? ? ? ? 背景介紹

? ? ? ? 最近在一個簡單小項目中碰到需要一個前端數據表格控件，在看了網上的資料后最終選擇了JQuery Datatables。Datatables功能及其強大，基本滿足我的所有需求，在加上其插件Editor具有inline模式，很多需要直接修改數據的功能不在需再彈出窗口或者模態框進行修改，而是可以直接行內編輯，這對于開發者來說是及其方便的，再加上網上和其官網上有眾多關于Datatables使用資料和參考例子，Datatable是首選表格控件之一。關于Datatables的基本功能和Editor inline模式的基本使用會另外介紹，如有興趣和需要可以去官網上查看其眾多的API和資料：Datatables中文網? ? ，? ??Datatables官網

? ? ? ?服務端分頁基本在所有項目中都能用到，一些報表，在數據量不太的情況下，可以配合查詢條件減少查詢的數據量，Datatables一次性加載出所有數據也是可以的。但是當數據量大的情況下，比如10W行以上的數據Datatables的加載會變得緩慢，這是用戶無法接受的，也是我們不希望看到的，這時候就需要服務端分頁了，本文會介紹JQuery Datatables 服務端分頁簡單應用學習，畢竟本人也是菜鳥，如果有寫的不多的地方請指正，本文也隨著了解的深入和持續更新，大家一起探討學習共同學習進步~

本文參照博客鏈接如下：https://blog.csdn.net/shuai_wy/article/details/78196559

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??https://blog.csdn.net/u011072139/article/details/54312414

本例采用ASP.NET MVC，實現的效果圖如下所示：

HTML代碼如下所示：

<div class="tab-content" style="margin-top:100px;margin-bottom:10px;"><table id="example" class="table table-bordered hover" style="white-space: nowrap;width:100%;cursor:pointer" cellspacing="0"></table> </div>

JS代碼如下圖所示：

var table;$(document).ready(function () {table = $('#example').DataTable({ajax: function (data, callback, settings) {$.ajax({type: "Post",url: "/Home/ShowData",cache: false, //禁用緩存data: {//組裝分頁參數"PD.StartIndex": data.start,"PD.PageSize": data.length,"PD.Draw": data.draw,},dataType: "json",success: function (result) {//封裝返回數據var returnData = {};returnData.draw = result.Draw;returnData.recordsTotal = result.RecordsTotal;//總記錄數returnData.recordsFiltered = result.RecordsFiltered;//后臺不實現過濾功能，每次查詢均視作全部結果returnData.data = result.Data;//調用DataTables提供的callback方法，代表數據已封裝完成并傳回DataTables進行渲染//此時的數據需確保正確無誤，異常判斷應在執行此回調前自行處理完畢callback(returnData);},error: function (error) {alert(error);}})},dom: 'Bfrtip',select: true,//單擊行選中顏色凸顯,此功能需要select插件serverSide: true,//開啟服務端模式pageLength: 10,//每頁默認最大顯示行數columns: [{ title: "編號", data: "UserID" },{ title: "姓名", data: "UserName" },{ title: "密碼", data: "UserPwd" },],"language": {url: dtsLanguage//中文配置文件地址}}); })

Control 代碼如下圖所示：

public ActionResult ShowData(TextDataTableViewModel vm) {return Content(vm.GetData()); }

Model 代碼如下圖所示：

public class TextDataTableViewModel {public int Draw { get; set; }public PageData PD { get; set; } = new PageData();public string GetData(){using (MyTextDBEntities entity = new MyTextDBEntities()){List<TabUsers> TabUserLists = entity.TabUsers.ToList();this.PD.RecordsFiltered = TabUserLists.Count;this.PD.RecordsTotal = TabUserLists.Count;this.Draw = this.PD.StartIndex / this.PD.PageSize + 1;this.PD.Data = TabUserLists.OrderBy(p => p.UserID).Skip((this.Draw - 1) * this.PD.PageSize).Take(this.PD.PageSize).ToList();string json = Newtonsoft.Json.JsonConvert.SerializeObject(PD);return json;}}}public class PageData {public int Draw { get; set; }public int StartIndex { get; set; }//查詢頁第一條數據的行數public int PageSize { get; set; }//每頁行數public int RecordsTotal { get; set; }//總條數public int RecordsFiltered { get; set; }//過濾后總條數public List<TabUsers> Data { get; set; }//查詢出來的數據} public partial class TabUsers {public long UserID { get; set; }public string UserName { get; set; }public string UserPwd { get; set; } }

注意事項

服務端分頁最好配合ORM框架一起使用，如EF、NHIbernate等。

在每次點擊頁碼或者上一頁，下一頁的時候，Datatables會發送表單數據：格式如下圖所示：

這里需要特別注意三個字段：draw、length、start?。length為Datatable中設置的一頁的顯示的行數，start為查詢頁的第一? ? ? ? ? 條數據在總數據中的行數，如本文截圖那一刻查詢的是第4頁的數據，總共5頁，那第四頁的第一條數據就是30行。這里需? ? ? ? 要特別注意下draw這個字段，這個本應該理解為查詢頁的頁碼，但事實情況并非如此，每次點擊頁碼或者上一頁下一頁，? ? ? ? draw都會+1，就像一個計數器一樣，本文截圖時已經點了18次上一頁或者下一頁了。但是這并沒有關系，我們仍然可以通? ? ? ? ? 過start這個字段和每頁顯示的行數來計算出查詢的頁數，從而在后臺查出數據。這里還有一個問題，后臺查詢出數據返給? ? ? ? ? Datatable時，不要去修改Datatable 發送過來的draw值，Datatable傳過來是18就返回18，否則頁面無法刷新數據，也沒? ? ? ? ? ? ? 有報錯。這也是為什么Model中要單獨定義一個Draw變量用來計算真正的頁碼，而PageData類中的Draw用來存儲Datatable? ? ? 發送的頁面并傳回Datatable。

? ? ? ?3、返回給Datatable中的字段如JS代碼中展示的即可，必須要有這幾個字段，不能有大小寫錯誤。如下圖所示：

? ? ? ?

? ? ? 至此為止一個簡單的Datatable服務端分頁就算完成了。

總結

以上是生活随笔為你收集整理的JQuery Datatables 服务端分页简单应用学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。