javascript - Tablesorter Filter 小部件在所有浏览器上更新后停止工作，没有错误消息

Question

我试图看看如何解决我在使用名为“过滤器”的 jQuery Tablesoter 小部件时遇到的问题，它在更新表后停止工作，没有任何错误消息，并且它在所有网络浏览器上都会执行此操作，其他小部件的工作方式类似于 zebra 和 savesort only 过滤器停止工作。

这是代码:

<script type="text/javascript" src="tablesorter/OVOjquery-1.10.2.min.js"></script> 
<script type="text/javascript" src="tablesorter/OVOjquery.tablesorter.min.js"></script>
<script type="text/javascript" src="tablesorter/OVOjquery.tablesorter.widgets.min.js"></script>
<script type="text/javascript" src="tablesorter/OVOjquery.tablesorter.pager.min.js"></script>
<script type="text/javascript" src="tablesorter/final/toastmessage/jquery.toastmessage-min.js"></script>
<script type="text/javascript" src="tablesorter/qtip/jquery.qtip.min.js"></script>
<!--//c24-->
<script type="text/javascript">
        var comper;
    function checkSession() {
        return $.get("ajaxcontrol.php", function (DblIn) {
            console.log('checking for session');
            if (DblIn == 1) {
                window.location = 'loggedout.php';
            }
        }).then(updateTable);
    }

    function checkComper() {
        var SvInfo;
        var onResponse = function (comperNow) {
            if (comper === undefined) {
                comper = comperNow;
            } else if (comper !== comperNow) {
                var Vinfoo;
                comper = comperNow;
                // returning this $.get will make delay done until this is done.
                return $.get("getlastupdate2.php", function (primaryAddType) {
                    Vinfoo = primaryAddType;
                    $().toastmessage('showNoticeToast', Vinfoo);
                }).then(checkSession);
            }
        };
        $.get('getlastupdate.php').then(onResponse).done(function () {
            tid = setTimeout(checkComper, 2000);
        });
    }


    function updateTable() {
        return $.get('updatetableNEW.php', function (data) {
            console.log('update table');
            var $table = $("table.tablesorter");

            var $tableContents = $table.find('tbody')

           ////// var $html = $('<tbody/>').html(data);


             $tableContents.replaceWith('<tbody>' + data + '</tbody>')

            //$tableContents.replaceWith($html)


            $table.trigger("update", [true]);
            var currentUrl = document.getElementById("frmcontent").contentWindow.location.href;
            var urls = ['indexTOM.php', 'index1.php'],
                frame = document.getElementById('frmcontent').contentDocument;

            for (var i = 0; i < urls.length; i++) {
                var url = urls[i];
                if (frame.location.href.indexOf(url) !== -1) {
                    frame.location.reload()
                }
            }

            $('[title!=""]').qtip({});
        });

    };


$(function(){
var tid = setTimeout(checkComper, 2000);

    $("#append").click(function (e) {
        // We will assume this is a user action
        e.preventDefault();
        updateTable();
    });


  // define pager options
  var pagerOptions = {
    // target the pager markup - see the HTML block below
    container: $(".pager"),
    // output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
    output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
    // if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
    // table row set to a height to compensate; default is false
    fixedHeight: true,
    // remove rows from the table to speed up the sort of large tables.
    // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
    removeRows: false,
    // go to page selector - select dropdown that sets the current page
    cssGoto:   '.gotoPage'
  };

  // Initialize tablesorter
  // ***********************
  $("table")
    .tablesorter({
      theme: 'blue',
      headerTemplate : '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon!
      widthFixed: true,
      widgets: ['savesort', 'zebra', 'filter'],

      headers: { 8: { sorter: false, filter: false } }


    })

    // initialize the pager plugin
    // ****************************
    .tablesorterPager(pagerOptions);

    // Delete a row
    // *************
    $('table').delegate('button.remove', 'click' ,function(){
      var t = $('table');
      // disabling the pager will restore all table rows
      t.trigger('disable.pager');
      // remove chosen row
      $(this).closest('tr').remove();
      // restore pager
      t.trigger('enable.pager');
    });

    // Destroy pager / Restore pager
    // **************
    $('button:contains(Destroy)').click(function(){
      // Exterminate, annhilate, destroy! http://www.youtube.com/watch?v=LOqn8FxuyFs
      var $t = $(this);
      if (/Destroy/.test( $t.text() )){
        $('table').trigger('destroy.pager');
        $t.text('Restore Pager');
      } else {
        $('table').tablesorterPager(pagerOptions);
        $t.text('Destroy Pager');
      }
      return false;
    });

    // Disable / Enable
    // **************
    $('.toggle').click(function(){
      var mode = /Disable/.test( $(this).text() );
      $('table').trigger( (mode ? 'disable' : 'enable') + '.pager');
      $(this).text( (mode ? 'Enable' : 'Disable') + 'Pager');
      return false;
    });
    $('table').bind('pagerChange', function(){
      // pager automatically enables when table is sorted.
      $('.toggle').text('Disable');
    });

});
</script>
<!--//c24-->

也许表格更新后需要重新加载过滤器小部件？

我首先认为更新后的表格没有正确的格式，因此我将 View 源保存为 html 文件，当我在本地打开页面时，“过滤器”(搜索)工作正常，因此它不可能是表格( <TD> ) 格式或者我认为是这样，但是它会是什么，任何人都可以帮助我吗？我已经尝试让它工作两周了，但我没有想法，因为我的知识有限:( 谢谢.

Answer 1

看起来插件需要知道我们进行了更新，而我只需要触发 updateAll 命令。

像这样:

var resort = true, // re-apply the current sort
    callback = function(){
    // do something after the updateAll method has completed
    };

 $("table").trigger("updateAll", [ resort, callback ]);