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 结果（数据）创建一个排序规则，并使用该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 回答