Question

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

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

当页面加载时，它将运行AJAX脚本以从数据库中获取数据
收到数据后，将显示为表格
对于此表，我想使用JQuery Table Sorter插件对表进行排序
表格本身包含thead

我已经阅读了几个相同的问题，说我应该使用'触发'功能。但我不知道为什么，它不能解决我的问题。

这是我桌子的结构： Table Structure

这是我的代码：

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数据更新表后，在表上触发“update”事件，向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
});

使用AJAX，Rowspan和Colspan的JQuery表格分类器

1 个答案: