带有 AJAX、Rowspan 和 Colspan 的 JQuery 表排序器

Question

目前我正在使用 JQuery 表排序器对我的 HTML 表进行排序。

但是，我的桌子有点复杂。这是描述：

• 页面加载时，会运行AJAX脚本从数据库中获取数据
• 收到数据后，会显示为表格
• 对于这个表，我想使用JQuery Table Sorter插件对表进行排序
• 表格本身，包含用于 thead 的 rowspan 和 colspan

我读过几个相同的问题，说我应该使用“触发”功能。但我不知道为什么，它并没有解决我的问题。

这是我的表的结构：

这是我的代码：

HTML

<div class = "container content" role = "main">
    <div id = "form">
        <h1 id = title>Check-Out</h1>
        <div id= datum></div>
        <div id = "table-checkout">
        </div>
    </div>
</div>

JavaScript 和 JQuery

$('document').ready(function(){
today = new Date();
dd = today.getDate();
mm = today.getMonth() + 1;
yy = today.getFullYear();
$("#datum").html("Datum: " + dd + "-" + mm + "-" + yy);
//$('#table-checkout').tablesorter();
checkout();
//$('#table-checkout').trigger('update');
});

function checkout()

{
    $.post("func/checkout.php",
    {

    },


function(data)
    {
        con = "<table id='table-modify' border=1>";
        con += "<tr>";
        con += "<th colspan = 2>Gastgeber</th>";
        con += "<th colspan = 2>Besucher</th>";
        con += "<th class=small rowspan = 2>Int.</th>";
        con += "<th class=small rowspan = 2>Ext.</th>";
        con += "<th class=small rowspan = 2>DP</th>";
        con += "<th rowspan = 2>Uhr Parkticket</th>";
        con += "<th colspan = 2>Check-In</th>";
        con += "<th colspan = 3>Check-Out</th>";
        con += "</tr>";
        con += "<tr>";
        con += "<th>Name</th>";
        con += "<th>Org.-Einheit</th>";
        con += "<th>Name</th>";
        con += "<th>KFZ-Kennzeichen</th>";
        con += "<th>MA</th>";
        con += "<th>Uhrzeit</th>";
        con += "<th>MA</th>";
        con += "<th>Uhrzeit</th>";
        con += "<th>Stunden</th>";
        con += "</tr>";

        row = data.split("_");
        for(i=0,j=row.length-1;i<j;i++)
        {
            col = row[i].split("#");
            con += "<tr>";
            for(k=0,m=col.length;k<m;k++)
            {
                if(col[k] == "internal" || col[k] == "external" || col[k] == "dp")
                {
                    if(col[k] == "internal")
                    {
                        con += "<td class=small><input id = int type =radio checked disabled></td>";
                        con += "<td class=small></td>";
                        con += "<td class=small></td>";
                    }
                    else if(col[k] == "external")
                    {
                        con += "<td class=small></td>";
                        con += "<td class=small><input id = int type =radio checked disabled></td>";
                        con += "<td class=small></td>";
                    }
                    else
                    {
                        con += "<td class=small></td>";
                        con += "<td class=small></td>";
                        con += "<td class=small><input id = int type =radio checked disabled></td>";
                    }
                }
                else
                {
                    con += "<td>"+col[k]+"</td>";
                }
            }
            con += "</tr>";
        }

        con += "</table>";
        $("#table-checkout").html(con);
    });
}

那么，我该如何解决我的问题？提前致谢。

Answer 1

Tablesorter 的工作原理是收集表格的所有内容并将其放入缓存中。当您对表进行排序时，它实际上是对缓存进行排序，然后通过将行放回正确的排序顺序来更新表。

如果您更改任何内容，缓存不会自动更新。因此，如果您对表格进行排序，它仍然会从缓存中提取存储的行，并覆盖任何新添加的行或所有行（如果您使用的是 ajax）。

因此，在您的脚本使用新的 ajax 数据更新表格后，触发表格上的“更新”事件，以向 tablesorter 插件发出表格内容已更改的信号。它看起来像这样：

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: function(){
    // process, then add the table contents
    $('table')
        .find('tbody').html( newStuff )
        // tell tablesorter that new stuff was added
        // this is triggered on the tbody,
        // but the event bubbles up to the table
        .trigger('update');
  }
});

此外，由于所有表格内容都在不断变化，因此请确保在表格中的任何按钮或表单元素上使用delegated events。例如：

$('table').on('click', '.checkout-button', function(){
    // do something
});