Question

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]);
                        }); 
                }
            });

Answer 1

首先从ajax结果（数据）创建排序规则，然后使用Array.Sort函数根据特定值进行排序并创建表标记。看看这篇文章 Sorting Select Option in Javascript - Based on multiple values in same row

Answer 2

在没有看到你的代码的情况下，有点难以分辨出你做错了什么，但是我写了一个小提琴来做你想要的。

如果您发布更多代码，我可以根据您的需要进行修改。

以下是代码：

<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
    });

Fiddle

使用两列对HTML表数据进行排序

2 个答案: