Notes for using jqGrid and jquery Datatables on the server page using ASP. net mvc + EF, jqgridjquery

Notes for using jqGrid and jquery Datatables on the server page using ASP. net mvc + EF, jqgridjquery

I always wanted to create my own blog website,Technical RouteYesASN. NET MVC5 + EF6 (Code First) + ZUI + various Jquery plug-insWith this idea, I started to select the UI. After reading a lot of bootstrap templates, I found that even if you use bootstrap, you still need to write css styles by yourself, the front-end is really spam. I found a lot of UIS on the Internet. The following are the addresses of various UIS. You can check them if you need them:

H-ui: http://www.h-ui.net/H-ui.admin.shtml, is a front-end Daniel get, imitate bootstrap, do suitable for China's online UI.

Amaze UI: http://amazeui.org/, China HTML5 front-end framework is not compatible with the old version of IE, this I am also online to see IE10 or above good if you want to compatible with IE8 official website said not good.

ZUI: http://zui.sexy/a Bootstrap-based deep customization of Open Source front-end practice solutions to help you quickly build modern cross-screen applications.

Finally, I chose ZUI, because it is easy to get started with Bootstrap customization, because I have also learned how to use Bootstrap and wrote some demos myself before. I found a lot of templates to work out, A lot of foreign countries, so the front-end itself and garbage, it is also troublesome to change, do not give up, mainly for themselves or garbage.

1. logon Interface

With the above method, I started to create a logon interface:

I did it myself even though I had been disgusted by the experts in the technology group for a long time.

2. Select a table

Sorry, the above seems to have nothing to do with what you want to talk about. The next step is to select a table. I am a very tangled person and really tangled, since ZUI only has Table Styles, there is no need to set the total number of pages with pages and the number of pages on each page. According to the founder of ZUI, paging can be replaced by js paging controls, mainly to load data, which is the result of their practice in the project, but I still want a table with these functions, so I just wanted to find them on the internet and find JQGrid and jquery Ables. Then I began to struggle with which one I used? Because jQuery EasyUI was used before, JQGrid was selected at the beginning:

2.1JQGgird implementation process in asp.net MVC:

In JQGgird official website download js files, official website address: http://www.trirand.com/blog/, looks like updated in June 9, 2016, DEMO address: http://www.guriddo.net/demo/bootstrap/ Bootstrap style, another Chinese demo Website: http://blog.mn886.net/jqGrid/ and then began to dry goods:

1. Create a JQGridController controller:

2. Create an index page to introduce the corresponding js and CSS styles:

3. view the inserted parameters: the number of records on one page in rows and the number of pages in rows;

4. view the format returned by the data. page indicates the page number. records indicates the total number of data records. rows indicates the data set. total indicates the total number of pages.

5. Then, use the following data format in the background:

5.1: The paging query method uses the following methods:

6. front-end HTML page call and js part: The following must be noted: datatype: "jsonp"; here, the return value of MVC is changed to datatype: "json ", I have been suffering for a long time.

7. Display Results:

After seeing the effect, I began to feel uncomfortable. Why is there a blank space on the left? It looked uncomfortable. When I loaded too much data, I found that it was originally for the position reserved by the scroll bar.

Then I am struggling. I don't like this style anymore. There is the next jquery Ables.

2.2 jquery Datatables implementation process in asp.net MVC:

Also find the official website on the Internet: Chinese official website: http://datatables.club, worship such people); English official website: https://datatables.net/examples/index

1. First create the abcontroller controller:

2. Create an index page to introduce the corresponding js and CSS styles:

3. view the instance search parameters on the official website and the returned data format:

Server-side paging demo: https://datatables.net/examples/server_side/jsonp.html

Datatables needs to be configured with "serverSide": trueTo enable the server mode. Key Parameter: start is the number of entries starting from, length is the number of entries on a page, and draw is the drawing counter. This is used to ensure that Ajax is returned from the server (Ajax is asynchronous, so the returned order is uncertain ). The server must receive this parameter before returning it (see the following for details ).http://datatables.club/manual/server-side.html

Returned data Format: data is a dataset, draw is a drawing counter, recordsFiltered is the number of rows filtered, and recordsTotal is the total number of rows

4. Then I began to write a comment and thought I would use JQGrid:

5. Front-end html and js Code:

The result is an error:

I haven't gotten it out for a long time: Because the format returned by my query data is the same as that in the DEMO, I started to get depressed:

Summary:

After some guidance from the group, I finally found the problem:

Because the parameter "start" in the datatables to the background indicates the page number starting from the page number, which is different from the page number of the jqgrid. For the first time, it is 0 in the background and starts from 0th, when paging: If 0 is passed, minus 1 is a negative number, so an error is returned.

So we made the following changes:

First, make a judgment on pagesize.

The number of skipped items is also modified during paging.

Then restart the test page:

In this way, the data comes out.

Follow-up:

I hope this article will help you with the JQGrid and Ables JS controls. Thank you for reading this article.