当前位置:  开发笔记 > 前端 > 正文

jQuery tablesorter - AJAX调用后功能丧失

如何解决《jQuerytablesorter-AJAX调用后功能丧失》经验,为你挑选了1个好方法。

我最近一直在试验jQuery的tablesorter插件.我已成功完成并运行一次,并给我留下了深刻的印象.但是,我试图将tablesorter应用到不同的表中,只是遇到一些困难......

基本上导致问题的表有一个

    上面的表,它充当表的一组选项卡.因此,如果单击其中一个选项卡,则会进行AJAX调用,并重新填充表,其中的行与单击的特定选项卡相关.当页面最初加载时(即在单击选项卡之前),tablesorter功能完全按预期工作.

    但是,当单击选项卡并重新填充表时,功能将消失,从而使其不具有可排序功能.即使您返回到原始选项卡,在单击另一个选项卡后,该功能也不会返回 - 唯一的方法是在浏览器中对页面进行物理刷新.

    我见过一个解决方案,看起来与我在这个网站上的问题类似,有人推荐使用jQuery插件,livequery.我试过这个但无济于事:-(

    如果有人有任何建议我会非常感激.我可以发布代码片段,如果它会有所帮助(虽然我知道tablesorter的实例化代码很好,因为它适用于没有选项卡的表 - 所以它绝对不是那样!)

    编辑: 根据要求,这里有一些代码片段:
    正在排序的表是

    ..
    ,我正在使用的tablesorter的实例化代码是:

    $(document).ready(function() 
    { 
        $("#sortableTable").tablesorter(
        {
            headers: //disable any headers not worthy of sorting!
            {
                0: { sorter: false },
                5: { sorter: false }
            },
            sortMultiSortKey: 'ctrlKey',
            debug:true,
            widgets: ['zebra']
        }); 
    });
    

    我尝试按如下方式安装livequery:

    $("#sortableTable").livequery(function(){
       $(this).tablesorter();
    });
    

    这虽然没有帮助...我不确定是否应该使用带有livequery的表的id,因为它是

      我应该响应的点击,这当然不是表本身的一部分.我已经尝试了一些变化,希望其中一个会有所帮助,但无济于事:-(



      1> elwyn..:

      添加数据后,请执行以下操作:

      $("your-table").trigger("update"); 
      var sorting = [[0,0]]; 
      $("your-table").trigger("sorton",[sorting]);
      

      这将让插件知道它有更新,并重新排序.

      文档中给出的完整示例:

      $(document).ready(function() { 
          $("table").tablesorter(); 
          $("#ajax-append").click(function() { 
               $.get("assets/ajax-content.html", function(html) { 
                   // append the "ajax'd" data to the table body 
                   $("table tbody").append(html); 
                  // let the plugin know that we made a update 
                  $("table").trigger("update"); 
                  // set sorting column and direction, this will sort on the first and third column 
                  var sorting = [[2,1],[0,0]]; 
                  // sort on the first column 
                  $("table").trigger("sorton",[sorting]); 
              }); 
              return false; 
          }); 
      });
      

      从这里的tablesorter doc:http: //tablesorter.com/docs/example-ajax.html


      刚碰到这个..trigger()比再次调用.tablesorter()工作得更好.谢谢!
推荐阅读
郑谊099_448
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有