Tablesorter Filter widget stops working after update on all browsers, no error msg

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.

here is the code:

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

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.

Answers:

Answer

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

Like this:

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

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

There is a lot of code to wade through, but you might want to try updating the table contents like this:

var $table = $("table.tablesorter");
$table.find('tbody').html(data);
$table.trigger("update", [true]);

I'm only guessing that the replaceWith() function isn't working as intended.

Answer

Same problem here.

Short solution: make the filter-select to a filter-match class, then the table will work again.

Long solution: Does anyone have a working example of table sorter combined with ajax pager and filter plugin?

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.