我在网站上有以下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加载的。
如何使此表格可排序?
答案 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();
} );
之后你可以开始包含不同的属性来选择排序搜索的类型等等......希望有所帮助