0 
Vector  VectorMode          VectorBaseDate
5       4                       2012-06-16
5       3                       2013-06-16
5       2                       2012-06-16
5       1                       2012-06-16
5       1                       2013-06-16
5       2                       2013-06-16
5       3                       2012-06-16
5       4                       2013-06-16

これは、jquery ajax 呼び出しで xml ファイルを読み取って作成している html テーブルです。最初に日付で並べ替え、次にモードで並べ替えます。したがって、結果は次のようになります。

Vector  VectorMode          VectorBaseDate
5       1                       2012-06-16
5       2                       2012-06-16
5       3                       2012-06-16
5       4                       2012-06-16
5       1                       2013-06-16
5       2                       2013-06-16
5       3                       2013-06-16
5       4                       2013-06-16

テーブルソータープラグインを試しましたが、うまくいきませんでした。

$("table").tablesorter();
        $.ajax({
        type: "GET",
        url: "vector.xml",
        dataType: "xml",
        success: function(xml) {
                            $('#showVelocity').append('<table cellspacing="1" id="myTable" class="tablesorter">');
                            $('#showVelocity').append('<thead><tr><th>VectorType</th><th>VectorMode</th><th>InitialValue</th><th>VectorBaseDate</th></tr></thead>');
                            $('#showVelocity').append('<tbody>');
                            $(xml).find('Vector').each(function() {
                            var intialVal = $(this).find('InitialValue').text();
                            var vectorBaseDate = $(this).find('VectorBaseDate').text();
                            var attrValType = $(this).find('VectorType').attr('tc');
                            var attrValMode = $(this).find('VectorMode').attr('tc');
                            if (attrValType=='5') {
                                //$('#someElement').append(intialVal+'<br/>');  
                                var tr = '<tr><td>'+attrValType+'</td><td>'+attrValMode+'</td><td>'+intialVal+'</td><td>'+vectorBaseDate+'</td></tr>';
                                $('#showVelocity').append(tr);
                            };

                            $('#showVelocity').append('</tbody></table>');
                            $("table").trigger("update");
                            var sorting = [[1,0],[3,0]]; 
                            $("table").trigger("sorton",[sorting]);
                        }); 
                }
            });
4

2 に答える 2

1

まず、ajax result（data）から照合を作成し、Array.Sort関数を使用して特定の値に基づいて並べ替え、テーブルタグを作成します。この投稿を見て くださいJavascriptの並べ替え選択オプション-同じ行の複数の値に基づく

于 2013-01-10T15:03:45.977 に答える
0

あなたのコードを見なければ、あなたが何を間違っているのかを知るのは少し難しいですが、私はあなたが望むことをするフィドルを書きました.

もう少しコードを投稿していただければ、ニーズに合わせて変更できます。

コードは次のとおりです。

<table class="tablesorter">
    <thead>
        <tr>
            <th>Vector</th>
            <th>VectorMode</th>
            <th>VectorBaseDate</th>
        </tr>
    </thead>
    <tbody>
        <tr>
          <td>5</td>
          <td>1</td>
          <td>2012-06-16</td>
        </tr>
        <tr>
          <td>5</td>
          <td>2</td>
          <td>2012-06-16</td>
        </tr>
        <tr>
          <td>5</td>
          <td>3</td>
          <td>2012-06-16</td>
        </tr>

    </tbody>
</table>

そしてJS

$('table').tablesorter({
        // *** Appearance ***
        // fix the column widths
        widthFixed : true,
        // include zebra and any other widgets, options:
        // 'uitheme', 'filter', 'stickyHeaders' & 'resizable'
        // the 'columns' widget will require custom css for the
        // primary, secondary and tertiary columns
        widgets    : [ 'uitheme', 'zebra' ],

        // *** Functionality ***
        // starting sort direction "asc" or "desc"
        sortInitialOrder : "asc",


        // jQuery selectors used to find the header cells.
        selectorHeaders : 'thead th',

        // *** css classes to use ***
        cssAsc        : "headerSortUp",
        cssChildRow   : "expand-child",
        cssDesc       : "headerSortDown",
        cssHeader     : "header",
        tableClass    : 'tablesorter',


        // pick rows colors to match ui theme
        widgetZebra: { css: ["ui-widget-content", "ui-state-default"] },

        // *** prevent text selection in header ***
        cancelSelection : true,

        // *** send messages to console ***
        debug : false
    });

フィドル

于 2013-01-10T15:08:09.803 に答える