1

「フィルター」と呼ばれるjQuery Tablesoterウィジェットで発生している問題を修正する方法を確認しようとしています.テーブルが更新された後、エラーメッセージなしで動作しなくなり、すべてのWebブラウザ、他のウィジェットでこれを行います. zebra のように機能し、savesort のみのフィルターが機能しなくなります。

コードは次のとおりです。

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

テーブルの更新後にフィルター ウィジェットを再読み込みする必要があるのではないでしょうか?

更新されたテーブルの書式設定が正しくないと最初に思ったので、ビュー ソースを html ファイルとして保存し、ページをローカルで開いたときに「フィルター」(検索) が正常に機能するため、テーブル ( <TD>) の書式設定またはだから私は思いますが、それは何でしょうか、誰でも私を助けてくれませんか?私はこれを2週間機能させようとしてきました.

4

3 に答える 3

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 ]);
于 2013-09-03T17:08:09.950 に答える
0

通り抜けなければならないコードがたくさんありますが、次のようにテーブルの内容を更新してみてください:

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

replaceWith()機能が意図したとおりに機能していないと推測しているだけです。

于 2013-08-31T14:35:31.143 に答える
0

ここでも同じ問題。

短い解決策: filter-select を filter-match クラスにすると、テーブルは再び機能します。

長い解決策: ajax ページャーとフィルター プラグインを組み合わせたテーブル ソーターの実例はありますか?

于 2014-01-19T12:03:54.787 に答える