2013-7-30關於jquery.datatable插件從數據庫讀取數據（二）

在上篇隨筆中所提到的數據插入方法，是將所有數據一次性讀出並插入表格，只能針對數據量小的操作。

本篇隨筆記錄的是datatable插件服務器端分頁讀取數據的方法。

一、分頁

分頁的基本思想是根據datatable的頁碼及每頁顯示的行數，將數據從數據庫分段提出，然后再填充到表格中，以達到分頁的效果。

這里需要用到datatable插件的幾個屬性：

"sEcho"：這個屬性需要原封不動地傳回給datatable，具體的作用我也不清楚，但是根據它值的變化情況來看，好像是一個操作次數的計數（之前我一直把它當做是pageindex來用，結果發現，不論我在datatable中是翻下一頁還是翻上一頁，它一直在增加。）

"iDisplayStart"：這個屬性，根據字面意思理解，就是每段數據開始的行數，比如第一頁的數據就是從0開始計，那么它就是0，每頁顯示的行數是10，那么第二頁的第一行的iDisplayStart就是10。

"iDisplayLength"：這個屬性就是每頁顯示的行數。

然后是數據庫操作，只需要從數據庫查詢其中一段數據，然后輸出出來，轉成JSON格式，讓datatable插件獲取。在網上可以找到很多分頁的方法，我選擇了其中一種，使用row_number()的分頁的存儲過程。具體代碼如下(根據sql創建存儲過程模板）：

USE T_LOG
GO
/****** 對象:  StoredProcedure [dbo].[pagination]    腳本日期: 07/30/2013 09:37:03 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE procedure [dbo].[pagination] 
 ( 
     @pageIndex int,  --頁索引 
     @pageSize int    --每頁記錄數 
 ) 
 as 
 begin 
    set nocount on; 
    declare @sql nvarchar(500) 
    set @sql='SELECT LOG_ID,USER_ID,TABLE_NAME
            FROM (
            SELECT t.*,ROW_NUMBER()OVER(ORDER BY     t.LOG_ID) AS rownum
            FROM   T_LOG t
            ) AS a
            WHERE rownum BETWEEN ('+str(@pageSize)+' * ('+str(@pageIndex)+' - 1)) + 1 AND '+str(@pageSize)+' * '+str(@pageIndex)+''

    execute(@sql)  
    set nocount off; 
end

存儲過程的兩個參數，pageindex表示頁索引即當前頁碼，我不懂datatable有沒有這項屬性，所以我是用計算的方法得來的，就是iDisplayStart/iDisplayLength+1。

pagesize可以直接從datatable獲得。

服務端的代碼，我創建了一個datasource.ashx文件，代碼如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;

namespace WebApplication1
{
    /// <summary>
    /// Handler1 的摘要說明
    /// </summary>
    public class Handler1 : IHttpHandler
    {
        
        public void ProcessRequest(HttpContext context)
        {
            string sEcho = context.Request.Form["sEcho"];
            int iDisplayStart;
            int iDisplayLength;
            int.TryParse(context.Request.Form["iDisplayStart"], out iDisplayStart);
            int.TryParse(context.Request.Form["iDisplayLength"], out iDisplayLength);
            int pageindex = iDisplayStart / iDisplayLength + 1;
            int count = getcount();
            //DataTableToObjects類中的DataTableToJson()方法用來將數據轉成json數據格式
            string json = DataTableToObjects.DataTableToJson(int.Parse(sEcho),count,getJson(pageindex.ToString(),iDisplayLength.ToString()),false);
            context.Response.Write(json);
            
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

        public static DataTable getJson(string pageindex, string iDisplayLength)   //執行存儲過程，提出數據
        {
            string constr = "此處填寫數據庫連接字段"; 
            using (SqlConnection conn = new SqlConnection(constr))
            {
                string sqlstr = "DECLARE @pageIndex int " +
                                "DECLARE @pageSize int " +
                                "EXECUTE pagination " + pageindex + "," + iDisplayLength;             
                DataSet ds = new DataSet();
                SqlDataAdapter da = new SqlDataAdapter();
                da.SelectCommand = new SqlCommand(sqlstr, conn);
                da.Fill(ds);
                DataTable dt = ds.Tables[0];
                return dt;
            }
            
        }
        public int getcount()     //獲取數據總行數，iTotalRecords參數需要
        {
            string constr = "此處填寫數據庫連接字段"; 
            string countstr = "select count(1) from T_LOG";
            using (SqlConnection conn = new SqlConnection(constr))
            {
                conn.Open();
                SqlCommand com = new SqlCommand(countstr, conn);
                object obj = com.ExecuteScalar();
                conn.Close();
                return int.Parse(obj.ToString());
                
            }
        }     
    }
}

DataTableToObjects類的代碼如下：

using System;
using System.Collections.Generic;
using System.Web;
using System.Text;
using System.Data;

namespace WebApplication1
{
    public class DataTableToObjects
    {
        public static string DataTableToJson(int sEcho, int totalRow, DataTable dt, bool dt_dispose)
        {
            StringBuilder json = new StringBuilder();
            json.Append("{\"sEcho\":" + sEcho.ToString() + ",");
            json.Append("\"iTotalRecords\":" + totalRow.ToString() + ",");
            json.Append("\"iTotalDisplayRecords\":" + totalRow.ToString() + ",");
            json.Append("\"aaData\":[");
            //json.AppendFormat("{\"sEcho\":{0},\n \"iTotalRecords\":{1},\n \"iTotalDisplayRecords\": {2},\n \"aaData\":[", sEcho, totalRow, totalRow);
            
                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    json.Append("{");
                    for (int j = 0; j < dt.Columns.Count; j++)
                    {
                        json.Append("\"");
                        json.Append(dt.Columns[j].ColumnName);
                        json.Append("\":\"");
                        json.Append(dt.Rows[i][j].ToString());
                        json.Append("\",");
                    }
                    json.Remove(json.Length - 1, 1);
                    json.Append("},");
                }
                json.Remove(json.Length - 1, 1);
                json.Append("]}");
       
            return json.ToString();
        }

    }  

}

需要注意的一點：iTotalRecords與iTotalDisplayRecords是兩個不同的值，是改變分頁欄顯示用的參數，這里因為沒有考慮數據過濾功能，所以都設置成數據的總的行數。

然后是客戶端的代碼，與之前的差不多：

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="Styles/jquery.dataTables.css"/>
    <script type="text/javascript" charset="utf8" src="Scripts/jquery.js"></script>
    <script type="text/javascript" charset="utf8" src="Scripts/jquery.dataTables.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#example").dataTable({
                "bLengthChange": false,
                "bFilter": false,
                "bSort": false,
                "iDisplayLength": 10,
                //"sPaginationType": "full_numbers",            
                "bProcessing": true,
                "bServerSide": true,
                "sAjaxSource": "Handler1.ashx",
                "sServerMethod": "POST",
                "aoColumns": [
                        { "mData": "LOG_ID" },
                        { "mData": "USER_ID" },
                        { "mData": "TABLE_NAME" }
                    ]
                //"fnServerParams": function (aoData) {
                //    aoData.push({ "name": "name1", "value": "value1" });
                //    aoData.push({ "name": "name2", "value": "value2" });
                //}
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table id="example" width="100%" border="0" cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <td>LOG_ID</td>
          <td>USER_ID</td>
          <td>TABLE_NAME</td>
        </tr>
      </thead>
    </table>
    </form>
    
</body>
</html>

因為測試，所以我只提取了表中的三個字段，並且關閉了數據過濾及排序功能，其中，"bLengthChange"可以設置成true，因為服務端會獲取datatable的iDisplayLenth參數，即使每頁顯示數變化，數據也可以正常獲取。

這樣就實現了jquery.datatable插件的服務端分頁獲取數據。

先記錄到這里，搜索及排序功能下次再說。