ASP.NET MVC+EF在服務端分頁使用jqGrid以及jquery Datatables的注意事項

引言：

本人想本身個博客網站出來，技術路線是用ASN.NET MVC5+EF6（Code First）+ZUI+各類Jquery插件，有了這個想法以後就開始選擇UI，看了好多bootstrap的模板以後，發現即便你用了bootstrap仍是要本身寫css樣式，都是自學的，前端真的很垃圾，在網上找了不少UI，如下是各類UI的地址，須要的能夠去看看：

H-ui：http://www.h-ui.net/H-ui.admin.shtml ，是一個前端大牛弄得，模仿bootstrap，作適合中國網上的UI。

Amaze UI:http://amazeui.org/ ，中國HTML5 前端框架 對IE老版本兼容很差，這個我也是網上看的IE10以上 不錯 若是想兼容IE8 官網都說不怎麼好了。

ZUI:http://zui.sexy/ 一個基於Bootstrap深度定製開源前端實踐方案，幫助你快速構現代跨屏應用。

最後選擇了ZUI，由於是Bootstrap定製的 上手也容易點 由於之前也學過Bootstrap的使用 本身寫了些DEMO 感受不錯，我找了不少模板都是弄好了，國外的多，因此前端本身又垃圾，就改起來也發麻煩，就不放棄了，主要是本身仍是垃圾了。

 

1.登陸界面

有了以上的方法以後我就本身開始作了一個登陸界面：

雖然被技術羣裏的大神 嫌棄了好久 可是 我本身作的。

 

2.表格的選擇

很差意思各位，以上好像講的跟要說的東西沒什麼關係，接下來就是表格選擇了，我是一個很糾結的人，真的很糾結，因爲ZUI中只有表格的樣式，沒用那種帶有分頁 一共多少條，設置每頁的頁數，按照ZUI的創始人員的說法是，分頁這些能夠用js分頁控件來代替，這樣主要是爲了加載數據，這是他們在項目中實踐的結果，可是我仍是想要個有這些功能的表格，因此我就想本身在網上找，找到兩個一個是JQGrid和jquery Datatables，就又開始糾結了用哪一個了？ 由於之前用過jQuery EasyUI 因此一開始選擇了JQGrid：

 

  2.1JQGgird在asp.net MVC下實現過程：

       在JQGgird官網下載js文件，官網地址：http://www.trirand.com/blog/ ，貌似又更新了2016年6月9日，DEMO 地址：http://www.guriddo.net/demo/bootstrap/  Bootstrap風格，另一箇中文demo網站：http://blog.mn886.net/jqGrid/ 而後開始上乾貨：

       1.創建以個JQGridController控制器：

       2.創建index頁面 引入相應的js以及CSS樣式：

  3.查看插入的參數： rows爲一頁多少條記錄 ；page爲第幾頁；

4.查看數據返回的格式 ：page爲第幾頁；records：爲一共多少條數據；rows：爲數據集合；total：爲一共多少頁

5.而後就依葫蘆畫瓢在後臺弄個這樣的數據格式出來：

5.1：分頁查詢的方法，使用的是查詢多少條，跳過多少條的思路：

6.前端HTML頁面調用以及js部分： 須要說明一點的是：http://www.guriddo.net/demo/bootstrap/ DEMO中的實例使用的是php的後臺數據格式爲 datatype: "jsonp"；而我這裏MVC返回要改爲 datatype:"json"，爲了這個問題我弄了很久，痛苦。

 

七、展現效果：

看到的效果以後我，我就開始不舒服了 爲何左邊會有空白的地方，看着不爽，當加載了數據過多的時候，發現原來是爲了滾動條保留的位置

而後我就糾結，不喜歡這個樣式了，有接下的jquery Datatables

 

2.2jquery Datatables在asp.net MVC下實現過程：

       一樣在網上找官網：中文官網：http://datatables.club/  （是一個大牛在很早之前用過jquery Datatables以後，發現中文的資料不多，就跟國外的做者聯繫翻譯成中文，很崇拜這種人） ；英文官網 ：https://datatables.net/examples/index

      1.首先創建DataTabController控制器：

 

  2.創建index頁面 引入相應的js以及CSS樣式：

3.查看官網實例找參數，以及返回數據格式：

服務器端分頁demo：https://datatables.net/examples/server_side/jsonp.html

datatables 須要配置"serverSide": true,才能開啓服務端模式；關鍵參數：start爲從第幾條開始；length爲一頁多少條；draw：爲繪製計數器。這個是用來確保Ajax從服務器返回的是對應的（Ajax是異步的，所以返回的順序是不肯定的）。 要求在服務器接收到此參數後再返回（具體看下面）；具體參數查詢官網地址http://datatables.club/manual/server-side.html

返回數據格式：data爲數據集；draw：爲繪製計數器；recordsFiltered：爲過濾多少條；recordsTotal：爲總共多少條

4.而後我就開始寫大言不慚的認爲本身會用了應該更JQGrid差很少：

  5.   前端html以及js代碼：

結果是報錯了：

弄了好久沒弄出來：由於個人查詢數據返回的格式是跟DEMO中同樣的，我就開始鬱悶了：

 

總結：

通過羣裏的大神指點，終於找到問題了：

由於datatables中傳到後臺的參數是start表示的是從第幾頁條開始跟jqgrid的page第幾頁不一樣，第一次穿到後臺的是0，從第0條開始，在分頁的時候：傳0過去減1的話就是負數，因此報錯

因而作了修改：

先把pagesize作個判斷

在分頁的時候也修改了跳過條數的設置

而後從新啓動測試頁面：

這樣數據就出來了

後續：

         但願個人總結對須要用到JQGrid以及Datatables兩個JS控件的小夥伴，有幫忙吧，謝謝。另外我會繼續弄個人博客，把裏面用到的知識點，一點一點的分享給你們，博客園的大神太多了，謝謝大神的帖子給我在技術中遇到問題是否的幫助。