資料分頁功能的實現是在任何一個專案中都非常實用的一個功能，在ASP.NET學習的時候，曾寫過一篇關於分頁功能的實現(點選檢視)，上面已經介紹的真假分頁的優缺點，在這裡我們就不過多的贅述了。現在的分頁實現依賴於EasyUI前臺框架的強大功能，那麼接下來就讓我們看看資料分頁在Easyui中的實現吧！

      分頁往往是依附於資料表格的，所以我們就使用的是easyui的datagrid元件，來開啟pagination分頁元件，為了方便，我們使用JS實現。

       表格顯示初始化

<table id="dg"></table>

<script>
    $('#dg').datagrid({
        title: '學生資訊查詢結果',       //表格標題
        width:500,            //表格寬度
        pagination: true,     //開啟分頁
        pageSize: 10,         //分頁大小
        pageNumber:1,         //第幾頁顯示（預設第一頁，可以省略）
        pageList: [10, 20, 30], //設定每頁記錄條數的列表 
        //url: '/FreshStudentMaintain/test',  //獲取資料地址
        columns: [[                //新增列
            {
                field: 'OrganizationID',  //繫結資料來源ID
                title: '專業程式碼',        //顯示列名稱
            },
            {
                field: 'OrganizationName',
                title: '專業名稱',
            },
        ]],
    });
</script>
 

我們還可以手動設定分頁控制元件的顯示樣式，例如：

    var p = $('#dg').datagrid('getPager');
    $(p).pagination({
        beforePageText: '第',//頁數文字框前顯示的漢字 
        afterPageText: '頁    共 {pages} 頁',
        displayMsg: '第{from}到{to}條，共{total}條',
    });

原版顯示效果如下：      
如上圖所示，資料表格和分頁已經顯示出來了。

       假分頁實現

假分頁就是將所有要顯示的資料全部查詢出來後，進行前臺的分頁，適合資料量較小的Web專案。 實現程式碼：

<script>       
    $('#dg').datagrid({ loadFilter: pagerFilter }).datagrid({
            url: '/FreshStudentMaintain/test'     //載入資料
        });

// 分頁資料的操作
    function pagerFilter(data) {
        if (typeof data.length == 'number' && typeof data.splice == 'function') {	// is array
            data = {
                total: data.length,
                rows: data
            }
        }
        var dg = $(this);
        var opts = dg.datagrid('options');
        var pager = dg.datagrid('getPager');
        pager.pagination({
            onSelectPage: function (pageNum, pageSize) {
                opts.pageNumber = pageNum;
                opts.pageSize = pageSize;
                pager.pagination('refresh', {
                    pageNumber: pageNum,
                    pageSize: pageSize
                });
                dg.datagrid('loadData', data);
            }
        });
        if (!data.originalRows) {
            data.originalRows = (data.rows);
        }
        var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
        var end = start + parseInt(opts.pageSize);
        data.rows = (data.originalRows.slice(start, end));
        return data;
    }
</script>
 

後臺程式碼僅僅是將從資料庫裡查詢到的資料轉化未Json字串型別傳到前臺就可以了。例：

public ActionResult test()
        {
            IBasicOrganizationBll CollegeBll = SpringHelper.GetObject<IBasicOrganizationBll>("BasicOrganizationBll");
            List<OrganizationViewModel> college = CollegeBll.QueryCollege();//查詢後臺資料方法

            return Json(college, JsonRequestBehavior.AllowGet);

        }

顯示效果：

       真分頁

真分頁相對假分頁來說麻煩了一些，但是對於資料量大的系統來說，可以很好的，快速的查詢資料。要想實現分頁，我們就得先知道分頁的原理，首先我們需要將[第幾頁](pageIndex)和[一頁多少資料](pageSize)傳遞給後臺，以便查詢，EasyUI非常方便的給我們提供了自動將這兩個引數傳到後臺的事件，當我們剛開始載入資料的時候，我們可以看到如圖，
當我選擇每頁顯示10條資料的時候。 當我點選下一頁的時候， 是不是非常清楚原理了，我們現在要做的就是在後臺接收這些資料，當然需要注意的是：後臺需要返回總資料條數（total）以便前臺顯示。

<script>
    $('#dg').datagrid({
        title: '學生資訊查詢結果',       //表格標題
        width:500,            //表格寬度
        pagination: true,     //開啟分頁
        pageSize: 10,         //分頁大小
        pageNumber:1,         //第幾頁顯示（預設第一頁，可以省略）
        pageList: [10, 20, 30], //設定每頁記錄條數的列表 
        url: '/FreshStudentMaintain/test',  //獲取資料地址
        columns: [[                //新增列
            {
                field: 'OrganizationID',  //繫結資料來源ID
                title: '專業程式碼',        //顯示列名稱
            },
            {
                field: 'OrganizationName',
                title: '專業名稱',
            },
        ]],
    });
</script>

後臺程式碼接收：

        public ActionResult test()
        {
            int pageIndex, pageSize;
            pageIndex = int.Parse(Request["page"]);     //第幾頁的資料
            pageSize = int.Parse(Request["rows"]);  //每頁多少條資料
            int total=0;         //返回資料條數總值

            IBasicOrganizationBll CollegeBll = SpringHelper.GetObject<IBasicOrganizationBll>("BasicOrganizationBll");
            List<OrganizationViewModel> major = CollegeBll.test(pageIndex,pageSize,out total);

            var data = new
            {
                total,      //將資料total載入到data中，返回到前臺。
                rows = major
            };
            return Json(data, JsonRequestBehavior.AllowGet);

        }

介面程式碼：

List<OrganizationViewModel> test(int pageIndex, int pageSize, out int total);

查資料程式碼（我這裡使用的封裝好的D層，僅供參考，具體查詢方法，請自己書寫SQL語句）：

public List<OrganizationViewModel> test(int pageIndex, int pageSize,out int total)
         {
             List<basicorganizationentities> major = new List<basicorganizationentities>();

             major = this.BasicOrganizationCurrentDal.LoadPageItems(pageSize, pageIndex, out total, u => u.OrganizationCode, true).ToList();  //分頁資料查詢

             return ConvertListToList<List<basicorganizationentities>, List<OrganizationViewModel>>.ListInputToOutput<basicorganizationentities, OrganizationViewModel>(major); //返回查詢到的泛型集合。
         }

至此真分頁就已經實現了（其實也沒什麼東西，但是剛開始接觸，不怎麼會用而已）。

       MySQL分頁查詢語句（轉載自原文地址）

方法1：直接使用資料庫提供的SQL語句

---語句樣式: MySQL中,可用如下方法:SELECT * FROM 表名稱 LIMIT M,N。

---適應場景:適用於資料量較少的情況(元組百/千級)。

---原因/缺點:全表掃描,速度會很慢且有的資料庫結果集返回不穩定(如某次返回1,2,3,另外的一次返回2,1,3)。Limit限制的是從結果集的M位置處取出N條輸出,其餘拋棄。

方法2:建立主鍵或唯一索引,利用索引(假設每頁10條)

---語句樣式: MySQL中,可用如下方法: 

SELECT *FROM 表名稱 WHERE id_pk > (pageNum*10)LIMIT M。

---適應場景: 適用於資料量多的情況(元組數上萬)。

---原因:索引掃描,速度會很快。有朋友提出因為資料查詢出來並不是按照pk_id排序的，所以會有漏掉資料的情況，只能方法3。

方法3:基於索引再排序

---語句樣式: MySQL中,可用如下方法:SELECT * FROM 表名稱 WHERE id_pk >(pageNum*10) ORDER BY id_pk ASC LIMIT M。

---適應場景: 適用於資料量多的情況(元組數上萬).最好ORDER  BY後的列物件是主鍵或唯一所以,使得ORDERBY操作能利用索引被消除但結果集是穩定的(穩定的含義,參見方法1)。

---原因:索引掃描,速度會很快. 但MySQL的排序操作,只有ASC沒有DESC(DESC是假的,未來會做真正的DESC,期待)。

方法4: 基於索引使用prepare（第一個問號表示pageNum，第二個？表示每頁元組數）

---語句樣式: MySQL中,可用如下方法: 

PREPAREstmt_name FROM SELECT * FROM 表名稱 WHEREid_pk > (？*？) ORDER BY id_pk 

ASC LIMIT M。

---適應場景:大資料量。

---原因:索引掃描,速度會很快. prepare語句又比一般的查詢語句快一點。

方法5:利用MySQL支援ORDER操作可以利用索引快速定位部分元組,避免全表掃描

---比如:讀第1000到1019行元組(pk是主鍵/唯一鍵)。

---SELECT *FROM your_table WHERE pk>=1000 ORDER BY pk ASC LIMIT 0,20。

方法6:利用"子查詢/連線+索引"快速定位元組的位置,然後再讀取元組.道理同方法5

---如(id是主鍵/唯一鍵,藍色字型時變數):

利用子查詢示例:

1 2 3 4

SELECT *FROM your_tableWHERE id <= (SELECT idFROM your_tableORDER BY iddesc LIMIT ($page-1)*$pagesizeORDER BY iddesc LIMIT $pagesize

利用連線示例:

1 2 3 4 5

SELECT *FROM your_tableAS t1 JOIN (SELECT idFROM your_tableORDER BY id desc LIMIT ($page-1)*$pagesize AS t2 WHERE t1.id <= t2.id ORDER BY t1.iddesc LIMIT $pagesize;

總結：資料分頁原理都是一樣的，不論使用什麼前臺框架，都是這樣使用，也就是屬性和方法變一變而已，熟悉一下就會使用了，而對與十萬、百萬級別以上的資料的效能優化，就是能靠SQL查詢語句的優化了，需要記住的是使用主鍵和索引是一條非常好的辦法。