javascript - JQuery TableSorter 重新加载和排序

Question

我认为这个问题已经发布了好几次，但我无法将答案放在一起。我的脚本生成一个 HTML/JS 站点，其中包含一个 div，其中仅包含一个 table。当调用函数 refreshTbl 时，它应该重新加载 div 的内容(这有效)并按照以前的方式对表进行排序(不起作用)。该表应该再次可排序(也不起作用)。

var currentSort;

$(document).ready(
function() 
{ 
    $("#tbl1").tablesorter().bind("sortEnd", function(sorter) {
        currentSort = sorter.target.config.sortList; } );
}

);

function refreshTbl()
{
    $("#divtbl1").load(window.location.pathname + "?tableonly");
    $("#tbl1").tablesorter().bind("sortEnd", function(sorter) {
        currentSort = sorter.target.config.sortList; } );
    $("#tbl1").trigger("sorton", [currentSort]);
}

我也尝试过

    $("tbl1 tbody").load(window.location.pathname + "?tableonly");

并让脚本仅发送表主体(没有前导码和 tbody 标签)。也没用。

正确的做法是什么？

Answer 1

问题是 .load() function是异步的。当 javascript 执行该代码时，.load() 函数被调用，然后立即执行下一条语句；但该表还不存在。

要解决此问题，请使用complete callback内置于 jQuery .load() 函数中。

试试这个代码:

var currentSort = [];

function init() {
  $("#tbl1")
    .tablesorter({ sortList: currentSort })
    .bind("sortEnd", function(sorter) {
      currentSort = sorter.target.config.sortList;
    });
}

$(function() 
{ 
  init(); 
});

function refreshTbl()
{
  $("#divtbl1").load(window.location.pathname + "?tableonly", function(response, status, xhr) {
    if (status === "error") {
      console.error("ERROR!", xhr.status, xhr.statusText);
    } else {
      init();
    }
  });
}