在之前发布的控件已经可以向客户端传送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" />&nbsp;页
    <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行/秒的速度从服务器读取数据表格，一边读取，一边显示。读取过程中用户可以浏览已读取的数据。其界面如下: