在之前发布的Varibale控件已经可以向客户端传送DataTable数据，但是，如果该DataTable有几千行(甚至更多)时，使用Variable会直接将所有数据传到客户端，这显然是不现实的。本文所要介绍的LDataTable控件是一个适合用于向客户端传送含有大数据量的DataTable的控件，其实现的原理如下：
根据客户端的需求以页为单位从服务器读取要传送的DataTable中的行,读取到客户端之后,就将读取到的这部分数据缓存到客户端.
例如:
有一个具有5000行数据的DataTable,假如以100行为一页(则总共有50页),当客户端需要读取第1~50行(这50行数据在第1页中)时,LDataTable控件就向服务器发送请求读取第1页(尽管不足1页,仍需读取1页),然后将该页(即1~100行)缓存在客户端,如果之后客户端需要读取1~100行中的某一行时,只需中缓存中读取而不需要从服务器读取.
下面通过实现无刷新翻页的例子说明如何使用LDataTable控件
1.实现功能
在服务器上有一个保存了通讯录信息的XML文件，里面保存了6000多行数据，现在要在浏览器中以每页10行的方式浏览这6000多行数据
2.实现步骤
(1)在页面插入一个LDataTable控件
页面源代码如下(该例子使用的LDataTable控件名称为MyTable)：
<div> <!--插入LDataTable控件，由于向客户端传送DataTable--> <cc1:LDataTable ID="MyTable" runat="server"> </cc1:LDataTable> <!--表头--> <table id='Table1' class='tab_css' cellspacing="0"> <tbody id='Tbody1'> <tr class='tr_header_css'> <td>ID</td> <td>Name</td> <td>Tel</td> <td>E-Mail</td> </tr> </tbody> </table> <!--以每页10行显示表格--> <div style="overflow: auto; height: 350px;"> <table id='DemoTable' class='tab_css' cellspacing="0" style=" border-top: #000000 0px solid;"> </table> </div> <br /> <input id="btnGoTo" type="button" value="跳转到" onclick="return btnGoTo_onclick()"/> <input id="txtPageNum" type="text" style="width: 65px" /> 页 <br /> <br /> <textarea id="txtLog" readonly="readonly" style="width:640px;height:100px;" rows="0" cols="0"></textarea> </div>
(2)初始化LDataTable控件
使用LDataTable需要设置以下3个属性：
RowCount:总行数(必须)
PageSize:总页数(必须)
Tag:附加数据(可选)
本例的初始化代码如下：
protected void Page_Load(object sender, EventArgs e) { MyTable.OnRequestPage += new LUCC.LDataTable.OnRequestPageDelegate(MyTable_OnRequestPage); if (!IsPostBack) { DataTable dt = new DataTable(); dt.TableName = "Contact"; dt.Columns.Add("ID"); dt.Columns.Add("Name"); dt.Columns.Add("Tel"); dt.Columns.Add("Mail"); dt.ReadXml(Server.MapPath("contact.xml")); //设置MyTable的总行数(必须) MyTable.RowCount = dt.Rows.Count; //设置MyTable的每页的行数(必须) MyTable.PageSize = 100; //设置附加数据(可选) MyTable.Tag = ""; } }
注意：尽管我们的目的是以10行/页的方式浏览数据，但是，MyTable却设置为100行/页，这样做的好处是：但用户浏览第1页时，客户端就就从服务器读取100行数据并缓存，那么但用户在前10页之间跳转时，就不需要从服务器读取，直接在客户端处理就行了。
(3)在服务器向客户端传送数据
当客户端需要从服务器读取数据时，就向服务器发送请求，在服务器触发OnRequestPage事件。因此使用LDataTable在服务器只需处理OnRequestPage事件并根据参数pageNum返回指定页中的行即可
本例处理OnRequestPage事件的代码如下：
private DataRow[] MyTable_OnRequestPage(int pageNum) { //注意：页号从0开始 DataTable dt = new DataTable(); dt.TableName = "Contact"; dt.Columns.Add("ID"); dt.Columns.Add("Name"); dt.Columns.Add("Tel"); dt.Columns.Add("Mail"); dt.ReadXml(Server.MapPath("contact.xml")); List<DataRow> rows = new List<DataRow>(); int pend = (pageNum + 1) * MyTable.PageSize; int end = pend > dt.Rows.Count ? dt.Rows.Count : pend; for (int i = pageNum * MyTable.PageSize; i < end; i++) { rows.Add(dt.Rows[i]); } return rows.ToArray(); }
(4)在客户端从服务器读取数据
使用LDataTable，在客户端会生成一个名称与控件ID相同的LDataTable对象，例如，本例在客户端生成了一个名称为MyTable的对象.
当需要向服务器读取数据时，只需调用LDataTable对象的CacheRows方法即可:
CacheRows方法语法如下:
CacheRows(start,end,completeCallback,errorCallback)
CacheRows说明如下:
向服务器读取行号在start到end的行，成功时调用函数completeCallback，失败时调用errorCallback
CacheRows处理流程图如下:
CacheRows只是将所需要的行保存在缓存中，如要读取某一行，需要调用函数:
GetRow(index)
index为行号
本例显示某一页的Javascript代码如下:
function ShowPage(PageIndex,PageSize) { try { //计算起始行号 var start=PageIndex*PageSize //计算结束行号 var end=(PageIndex+1)*PageSize-1 //从服务器读取数据 MyTable.CacheRows( start, end, function() { //读取成功，显示数据 var start=PageIndex*PageSize var end=(PageIndex+1)*PageSize-1 tab=document.getElementById('DemoTable') while(tab.rows.length>0) { tab.deleteRow(0); } var rstr='' for(var i=start;i<=end;i++) { row=MyTable.GetRow(i) if(row!=null) { newRow=tab.insertRow(-1) newRow.className='tr_css' cell=newRow.insertCell(-1) cell.innerHTML=row["ID"] cell=newRow.insertCell(-1) cell.innerHTML=row["Name"] cell=newRow.insertCell(-1) cell.innerHTML=row["Tel"] cell=newRow.insertCell(-1) cell.innerHTML=row["Mail"] } } }, function() { alert('出錯了') } ) } catch(ex) { alert(ex) } }
(5)效果
在示例的网站中还有一个例子(LDataTableDemo1.aspx页面)，当打开网页时，以200行/秒的速度从服务器读取数据表格，一边读取，一边显示。读取过程中用户可以浏览已读取的数据。其界面如下:
