Tablesorter Filter小部件在所有浏览器上更新后停止工作，没有错误消息 [英] Tablesorter Filter widget stops working after update on all browsers, no error msg

问题描述

我正在试图看看如何解决我在jQuery Tablesoter小部件中遇到的问题'filter'，它在更新表后没有任何错误消息就停止工作，并且它在所有Web浏览器上执行此操作，其他小部件像zebra和savesort一样工作，只有过滤器停止工作。

I'm trying to see how I can fix a problem that I'm having with jQuery Tablesoter widget called 'filter', it stops working after the table is updated without any error message and it does this on all web browsers, the other widgets work like zebra and savesort only filter stops working.

这里是代码：

<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-->

表更新后可能需要重新加载过滤器小部件吗？

Maybe the filter widget needs to be reloaded after the table update ?

我首先想到更新的表没有正确的格式，所以我将视图源保存为html文件，当我在本地打开页面时，'filter'（搜索）工作正常，所以它不能是表格（< TD> ）格式左右我认为，但有什么可以，有人可以帮助我，我一直试图让这个为两个工作几个星期了，我没有想法，因为我的知识有限:(谢谢。

I first thought that the updated table does not have the correct formatting so I saved the view source as a html file and when I open the page locally the 'filter' (search) works fine, so it cannot be the table (<TD>) formatting or so I think, but what can it be, can anyone please help me I have been trying to get this to work for two weeks now and I'm out of ideas as my knowledge here is limited :( Thanks.

推荐答案

看起来像需要的插件要知道我们做了更新，我只需要触发 updateAll 命令。

It looks like the plugin needed to know that we made an update and I just needed to trigger the updateAll command.

像这样：

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

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

这篇关于Tablesorter Filter小部件在所有浏览器上更新后停止工作，没有错误消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！