使html表可排序(使用javascript加载标题和数据)

时间:2015-04-13 17:02:22

标签: javascript jquery html

我在网站上有以下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循环,并追加到html。

现在我需要表列可以排序。 我试图让它与jquery tablesorter一起使用,但它无效。我认为它无法正常工作,因为我的数据是使用javascript加载的。

如何使此表格可排序?

3 个答案:

答案 0 :(得分:1)

添加$(&#34;#list&#34;)。tablesorter();最后(当表已经填满了所有数据,thead和tbody)...我在我的应用程序中使用相同的工作并且工作正常。

答案 1 :(得分:1)

使用下面的代码。在数据循环结束处添加$("#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(); 
        }
    };

 });

答案 2 :(得分:1)

是的,你可以做到

查看你的标题使html表可排序(使用javascript加载标题和数据)

如果您通过jquery或仅使用php加载数据,那么这很重要... 在bootstrap中查找数据表.. This plugin提供所有类型的数据操作,表格还包括数据排序......您还可以在表格中执行搜索。你所要做的就是给你的表一些像“mytable”这样的id然后写

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

} );

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