在JQuery中创建动态html表格后，应用另一个JQuery（表格分类器）

我已经使用JQuery从PHP的JSON数据创建了HTML TABLE。创建表后，我尝试附加表分类器（jQuery），但它不起作用。怎么解决？代码如下。在JQuery中创建动态html表格后，应用另一个JQuery（表格分类器）

<script type="text/javascript"> 
$(document).ready(function() { 
     $.getJSON('listnotice.php', function(data) {  

      var table = ""; 
      $.each(data, function(index,entry) { 
       table += '<tr>'; 
       table += '<td>' +entry["title"] + '</td>'; 
       table += '<td>' +entry["content"] + '</td>'; 
       table += '<td>' +entry["date"] + '</td>'; 
       table += '</tr>'; 
      }); 

      table += "</tbody>"; 
      $("#noticeList").append(table); 
      }); 

     $("#noticeList").tablesorter({debug: false, widgets: ['zebra'], sortList: [[0,0]]}).tablesorterFilter({filterContainer: $("#filter-box"), 
          filterClearContainer: $("#filter-clear-button"), 
          filterColumns: [0], 
          filterCaseSensitive: false}); 
}); 
</script> 

</head> 
<body> 
    <table id="noticeList"> 
     <thead><tr><th>1</th><th>2</th><th>3</th></tr></thead><tbody> 

    </tablev> 
</body> 
</html>

来源

2011-11-09 rightsna

什么不起作用？ – jrummell

您需要在构建表的同一回调中应用tablesorter。 getJSON调用是异步的，你现在拥有它的方式，你在调用返回和表建立之前应用tablesorter。

$.getJSON('listnotice.php', function(data) {  

    var table = ""; 
    $.each(data, function(index,entry) { 
     table += '<tr>'; 
     table += '<td>' +entry["title"] + '</td>'; 
     table += '<td>' +entry["content"] + '</td>'; 
     table += '<td>' +entry["date"] + '</td>'; 
     table += '</tr>'; 
    }); 

    table += "</tbody>"; 
    $("#noticeList").append(table) 
        .tablesorter({debug: false, widgets: ['zebra'], sortList [[0,0]]}).tablesorterFilter({filterContainer: $("#filter-box"), 
          filterClearContainer: $("#filter-clear-button"), 
          filterColumns: [0], 
          filterCaseSensitive: false}); 
});

来源

2011-11-09 13:19:08 tvanfosson

快速回答，谢谢:) – rightsna

AJAX请求将仍然执行作为插件.tablesorter()被调用。如果您将桌面分拣机移动到您的成功处理程序中，它应该可以工作。

试试这个：

$(document).ready(function() { 
    $.getJSON('listnotice.php', 
     function(data) {  
      var table = ""; 
      $.each(data, function(index,entry) { 
       table += '<tr>'; 
       table += '<td>' +entry["title"] + '</td>'; 
       table += '<td>' +entry["content"] + '</td>'; 
       table += '<td>' +entry["date"] + '</td>'; 
       table += '</tr>'; 
      }); 
      table += "</tbody>"; 

      $("#noticeList").append(table).tablesorter({debug: false, widgets: ['zebra'], sortList: [[0,0]]}).tablesorterFilter({filterContainer: $("#filter-box"), 
         filterClearContainer: $("#filter-clear-button"), 
         filterColumns: [0], 
         filterCaseSensitive: false});   
     } 
    ); 
});

来源

2011-11-09 13:19:59

在JQuery中创建动态html表格后，应用另一个JQuery（表格分类器）

回答

相关问题