使HTML表可排序(使用JavaScript加载标题和数据)

Question

我在网站中有以下html：

<table id="list" class="tablesorter">
  <thead id="header">
  </thead>
  <tbody id="rows">
  </tbody>
</table>

我使用 javascript 加载表的标题和行。我如何填充标题的示例：

$.get( '/getdata',{}, function(mydata) {    
        // Parses JSON Into Array
        var array = $.parseJSON(mydata);
        var html = '<tr>';
        html+='<th>#</th>';
        html+='<th>One</th>';
        html+='<th">TOTAL</th>';
        var available = {};
        for (var i = 0; i < array.length; i++) {
            available_item = array[i];
            html+='<th><abbr title="'+array[i].text+'"><img src="img/flags2/'+array[i].country+'.png"></img></abbr></th>';
        };
        html += '</tr>';
        $(html).appendTo('#header');
});

这些行以类似的方式填充：ajax get、for loop 和 append to html。

现在我需要表列可排序。我试图让它与 jquery 表排序器一起工作，但它不起作用。我想它不起作用，因为我的数据是使用 javascript 加载的。

如何使此表可排序？

Answer 1

> 添加 $（"#list"）.tablesorter（）; 在末尾（当表已经填满所有数据时，thead 和 tbody）...我在我的应用程序中使用相同的并且工作正常。

Answer 2

使用以下代码。 在数据循环端添加$("#list").tablesorter();。

$.get( '/getdata',{}, function(mydata) {    
    // Parses JSON Into Array
    var array = $.parseJSON(mydata);
    var html = '<tr>';
    html+='<th>#</th>';
    html+='<th>One</th>';
    html+='<th">TOTAL</th>';
    var available = {};
    for (var i = 0; i < array.length; i++) {
        available_item = array[i];
        html+='<th><abbr title="'+array[i].text+'"><img src="img/flags2/'+array[i].country+'.png"></img></abbr></th>';
       if(array.length === (i+1)){
           html += '</tr>';
           $(html).appendTo('#header');
           $("#list").tablesorter(); 
        }
    };
 });

Answer 3

是的，你可以做到

查看您的标题，使html表格可排序（使用javascript加载标题和数据）

无论您是通过 jquery 加载数据还是仅使用 php 都没有关系......在引导中查找数据表..该插件通过表格提供了所有类型的数据操作，其中还包括数据的排序......您还可以在表中执行搜索。您所要做的就是给你的表一些id，比如"mytable"，然后写

$(document).ready( function () {
     $('#mytable').DataTable();
} );

之后，您可以开始包含不同的属性来选择排序搜索等类型......希望有帮助