1

私はこの質問に非常に似た問題を抱えています：jQueryテーブルの並べ替え

日付ヘッダーがクリックされたときに、テキストではなく日付に基づいてテーブルの行を並べ替えたいと思います。

上記の質問に対する回答の1つであるこのjsFiddlehttp : //jsfiddle.net/gFzCk/に基づいてコードを作成しました。これはソートされますが、日付は日付ではなく通常のテキストとして扱われます。

通常、元のコードを自分のニーズに合わせて変更することはできますが、このコードは私を少し超えています。

これが私のjsFiddleですhttp://jsfiddle.net/S6dM6/

HTML

<table>
    <tr>
        <th id="dateHeader">Date</th>
        <th>Phone #</th>
        <th id="city_header">City</th>
        <th>Speciality</th>
    </tr>
    <tr>
        <td>01/02/2013</td>
        <td>00001111</td>
        <td>Amsterdam</td>
        <td>GGG</td>
    </tr>
    <tr>
        <td>24/02/2013</td>
        <td>55544444</td>
        <td>London</td>
        <td>MMM</td>
    </tr>
    <tr>
        <td>28/02/2013</td>
        <td>33332222</td>
        <td>France</td>
        <td>RRR</td>
    </tr>
    <tr>
        <td>13/02/2013</td>
        <td>88884444</td>
        <td>Auckland</td>
        <td>AA</td>
    </tr>
    <tr>
        <td>04/02/2013</td>
        <td>11115555</td>
        <td>New York</td>
        <td>BBB</td>
    </tr>
</table>

JS

var table = $('table');

$('#dateHeader')
    .wrapInner('<span title="sort this column"/>')
    .each(function(){

        var th = $(this),
            thIndex = th.index(),
            inverse = false;

        th.click(function(){

            table.find('td').filter(function(){

                return $(this).index() === thIndex;

            }).sortElements(function(a, b){

                return $.text([a]) > $.text([b]) ?
                    inverse ? -1 : 1
                    : inverse ? 1 : -1;

            }, function(){

                // parentNode is the element we want to move
                return this.parentNode; 

            });

            inverse = !inverse;

        });

    });

そして、このjsファイルが参照されます： https ：//raw.github.com/padolsey/jQuery-Plugins/master/sortElements/jquery.sortElements.js

ある種のテーブル並べ替えプラグインを提案する場合に備えて、ヘッダーがクリックされたときに最終結果が並べ替えられないことに注意してください。並べ替え関数は、JavaScriptのさまざまな場所から呼び出されます。このクリックを使用しています。概念を機能させるための簡単な出発点として、そしてこの質問をするための簡単な方法としての例。

4

1 に答える 1

4

sortElements次のようにメソッドを変更します。

        }).sortElements(function(a, b){

            var strDate = $.text ([a]);
            var dateParts = strDate.split("/");
            var date = new Date(dateParts[2], (dateParts[1] - 1), dateParts[0]);
            var a1 = date.getTime ();
            strDate = $.text ([b]);
            dateParts = strDate.split("/");
            date = new Date(dateParts[2], (dateParts[1] - 1), dateParts[0]);
            b1 = date.getTime ();

            return a1 > b1 ?
                inverse ? -1 : 1
                : inverse ? 1 : -1;
于 2013-02-04T18:08:47.080 に答える