datalist 在客户端完成排序
我想在客户端给dataList排序,但总实现不了,下面是我的代码
<script language="javascript" type="text/javascript">
// <!CDATA[
function testSort_onclick() {
alert("function");
var oTable=document.getElementById("testTable"); //主要不只怎样取得
var oTBody=oTable.tBodies[0];
var colDataRows=oTBody.rows;
var aTRs=new Array;
for(var i=1;i <colDataRows.length;i++)
{
aTRs[i-1]=colDataRows[i];
}
aTRs.reverse(); //操纵数组,可实现各种排列形式
var oFragment=document.createDocumentFragment();
for(var i=0;i <aTRs.length;i++)
{
oFragment.appendChild(aTRs[i]);
}
oTBody.appendChild(oFragment);
alert("game over");
}
// ]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<table id="testDiv">
<asp:DataList ID="firstDate" runat="server" Width="100%">
<ItemTemplate>
<table id="test1" style="width: 100%;border-bottom: #C1D0D5 1px solid;">
<tr>
<td style="width:25%; height: 14px;">
<%# ((DataRowView)Container.DataItem)["periodNo"]%>
</td>
<td style="width:25%; height: 14px;">
<%# ((DataRowView)Container.DataItem)["area"]%>
</td>
<td style="width:25%; height: 14px;">
<%# ((DataRowView)Container.DataItem)["sumSalesT"]%>
</td>
<td style="width:25%; height: 14px;">
<%# ((DataRowView)Container.DataItem)["orderByS"]%>
</td>
</tr>
</table>
</ItemTemplate><ItemStyle Font-Bold="True" />
<HeaderTemplate>
<table style="width: 100%">
<tr>
<td style="width:25%">
列1</td>
<td style="width:25%">
列2</td>
<td style="width:25%">
列3</td>
<td style="width:25%">
列4</td>
</tr>
</table>
</HeaderTemplate>
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
</asp:DataList>
</table>
<input id="testSort" type="button" value="testSort" onclick="return testSort_onclick()" />
</form>
</body>
</html>
请各位高手指点迷津,谢谢
[解决办法]
没有这么做过,建议楼主不要这么做,如果数据量上去,这样的排序其实并不友好
[解决办法]
上面不要用table,dl本身就生成table,直接获取firstDate的客户端ID控件,
[解决办法]
数据量大很慢,数据不多操作灵活
[解决办法]
另外要获取dl
JS记得放dl下面
[解决办法]
思路:
1.首先把数据生成一个JS全局数组
2.每次排序时,只需对数组排序即可
3.排序完成后,把TABLE中的数据清空
4.循环数组,生成TR行及各列的数据(可以定义一个字符串,循环生成HTML字符串,然后用TableID.innerHtml(s)就可以了)
以前经常这样做,如果数据量大,则在服务器端先把本页的数据拿出来,然后传到客户端排序生成界面.
如果数据不经常变化,就一次性传到客户端即可