[英]Table sorting by clicking on column headers
我在通过单击列名对表中的数据进行排序时遇到问题。 我为此尝试了许多解决方案。 但是问题是,当我使用javascript insertRow()方法向表中添加行时,它似乎可以正常工作。 插入新行后,当我单击任何列时,仅对旧数据进行排序,而通过javascript插入的新行却消失了。 这是代码:您可以在此链接http://www.allmyscripts.com/Table_Sort/中找到gs_sortable.js文件。
<script type="text/javascript">
var TSort_Data = new Array ('my_table', 's', 'd', 'c', 'i');
</script>
<title>JSP Page</title>
</head>
<body><h3 align="center" >
</h3><table class="table-autosort" width="100%"> <table id="my_table">
<thead>
<tr>
<th width="25%">Product</th>
<th width="25%">Date</th>
<th width="25%">Price per unit</th>
<th width="25%">Units sold</th>
</tr>
</thead>
<tr>
<td width="25%" >Item A</td>
<td width="25%">14/5/2012</td>
<td width="25%">$28</td>
<td width="25%"> 1</td>
</tr>
<tr>
<td width="25%"> Item B</td>
<td width="25%">14/5/2012</td>
<td width="25%">$35</td>
<td width="25%">1</td>
</tr>
<tr>
<td width="25%">Item A</td>
<td width="25%">13/5/2012</td>
<td width="25%">$25.15</td>
<td width="25%">20</td>
</tr>
<tr>
<td width="25%">Item C</td>
<td width="25%">15/5/2012</td>
<td width="25%">$20</td>
<td width="25%">100</td>
</tr>
</table>
<button type="button" onclick="displayResult()">Insert new row</button>
</table>
</body>
当我单击列标题时,我希望新行在排序列表中。
谢谢
这是解决方案的工作提琴http://jsfiddle.net/GbGx5/4/
导入的事情是在调用insertRow之后用tsort重新注册表数据,否则tsort内部缓存的数据将仅包含旧表数据。
为此,请调用以下方法(如在将脚本与动态加载的表配合使用下的文档中所建议, http://www.allmyscripts.com/Table_Sort/#example )
// Make sure we refresh the TSort_Data Array!
TSort_Data = new Array ('my_table', 's', 'd', 'c', 'i');
tsRegister();
tsSetTable('my_table');
tsInit();
该示例的完整JavaScript如下...
var TSort_Data = new Array ('my_table', 's', 'd', 'c', 'i');
function insertNewRow() {
var table=document.getElementById("my_table"),
newRowIndex = table.getElementsByTagName('tr').length,
row=table.insertRow(newRowIndex),
cell1=row.insertCell(0),
cell2=row.insertCell(1),
cell3=row.insertCell(2),
cell4=row.insertCell(3);
cell1.innerHTML = "New Item";
cell2.innerHTML = "15/10/2013";
cell3.innerHTML = "$5";
cell4.innerHTML = 51;
// Make sure we refresh the TSort_Data Array!
TSort_Data = new Array ('my_table', 's', 'd', 'c', 'i');
tsRegister();
tsSetTable('my_table');
tsInit();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.