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

Introduction:

I want to publish my blog website. The technical route is ASN. NET MVC5 + EF6 (Code First) + ZUI + various Jquery plug-ins. With this idea, I began 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. They are all self-taught, and the front-end is really spam. I found a lot of UIS on the Internet. Below are the addresses of various UIS, if you need it, go and see:

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: need to note that: http://www.guriddo.net/demo/bootstrap/ DEMO instance using php background data format for datatype: "jsonp "; here, I want to change the return value of MVC to datatype: "json". I 've been suffering from this problem 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 ). Require the server to receive this parameter and then return (see the following for details); specific parameter query official site address 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 my summary will help you with the JQGrid and Ables JS controls. Thank you. In addition, I will continue to get my blog and share the knowledge points used in it at. There are too many great gods in the blog Park, thank you for your post.