asp.net mvc+ef use Jqgrid and jquery DataTables in service-side pagination practical tips

Always want to do their own blog site, the technical route is to use asn.net Mvc5+ef6 (Code first) +zui+ various jquery plug-ins , with this idea began to select the UI, Read a lot of bootstrap template, found that even if you use the bootstrap or to write their own CSS style, are self-study, the front-end is really rubbish, on the internet to find a lot of UI, the following is a variety of UI address, need to go to see:

H-ui:http://www.h-ui.net/h-ui.admin.shtml, is a front end Daniel made, imitate Bootstrap, do fit the Chinese Web UI.

Amaze ui:http://amazeui.org/, China HTML5 Front frame of the old version of the compatibility of IE is not good, this I also look at the online IE10 above good if you want to be compatible IE8 official website said not good.

zui:http://zui.sexy/a custom open source front-end practice based on bootstrap depth to help you quickly construct a modern, cross screen application.

Finally chose the Zui, because it is bootstrap custom to start also easy because before also learned to use the bootstrap to write some demo feel good, I found a lot of templates are ready, foreign more, so the front end of their own garbage, change up also trouble, don't give up, The main is oneself or rubbish.

1. Login interface

With the above method, I began to make a login interface:

Although the great God in the technology group for a long time but I did it myself.

2. Selection of Forms

I'm sorry, everyone, the above seems to have nothing to do with what to say, next is the table choice, I am a very tangled person, really very tangled, because Zui only form style, useless that with pagination altogether how many, set the number of pages per page, according to the Zui founder of the saying is, Paging these can be used to replace the JS page control, this is mainly to load data, this is their practice in the project results, but I still want to have these functions of the form, so I want to find their own online, find two is Jqgrid and jquery DataTables, And then you start to struggle with what? Since I used the jquery Easyui, I started by choosing Jqgrid:

2.1JQGgird implementation process under ASP.net MVC:

In Jqggird official website download js file, official website address:http://www.trirand.com/blog/ , seemingly again updated June 9, 2016, DEMO address:http://www.guriddo.net/ demo/bootstrap/ bootstrap style, another Chinese demo website:Http://blog.mn886.net/jqGrid/ and then start on dry goods:

1. To establish a Jqgridcontroller controller:

2. Set up the index page to introduce the corresponding JS and CSS style:

3. View inserted parameters: Rows is a page of how many records; page is the first few pages;

4. View the format returned by the data: page is the first few pages; records: For a total number of data; rows: a collection of data; Total: How many pages are there altogether?

5. Then on the gourd in the background to get a picture of such data format:

5.1: Pagination Query method, using the query how many, skip how many ideas:

6. Front-End HTML page calls as well as the JS section: What needs to be explained is: the example in Http://www.guriddo.net/demo/bootstrap/DEMO uses PHP's background data format as datatype: "Jsonp" And I'm here to change the MVC back to datatype: "JSON", for this problem I have been for a long time, pain.

7, show the effect:

See the effect after me, I began to feel uncomfortable why there is a blank space on the left, looking uncomfortable, when the load of data too much, found that the original is for the scroll bar reserved position

And then I get tangled, don't like this style anymore, there's the jquery DataTables

2.2jquery DataTables implementation process under ASP.net MVC:

Also on the Internet to find official website: China Civil Service Network:http://datatables.club/ (is a Daniel in a long time ago using jquery DataTables, found that the Chinese information is very little, and foreign authors contact translated into Chinese, very worship such people) ; Official English website:https://datatables.net/examples/index

1. First establish the Datatabcontroller controller:

2. Set up the index page to introduce the corresponding JS and CSS style:

3. View the official website instance to find the parameter, as well as returns the data format:

Server-Side Paging Demo:https://datatables.net/examples/server_side/jsonp.html

datatables 需要配置"serverSide": true,才能开启服务端模式；关键参数：start为从第几条开始；length为一页多少条；draw：为绘制计数器。这个是用来确保Ajax从服务器返回的是对应的（Ajax是异步的，因此返回的顺序是不确定的）。 要求在服务器接收到此参数后再返回（具体看下面）；具体参数查询官网地址http://datatables.club/manual/server-side.html

Return Data format: data is DataSet; Draw: to draw counter; Recordsfiltered: to filter how many; Recordstotal: For the total number of bars

4. Then I began to write the jqgrid that I should be more like:

5. Front-End HTML and JS code:

The result is an error:

It took a long time to get out: Because my query data returned in the same format as the demo, I began to be depressed:

Summarize:

After the group of the Great God to guide, finally found the problem:

Because the DataTables to the background of the parameter is the start to show that from the first few pages with Jqgrid page of the pages of different, the initial wear to the background is 0, starting from the No. 0, in the paging time: pass 0 in the past minus 1 words is negative, so the error

So I made a change:

Let's make a judgment of pagesize first.

The setting of the skip bar number is also modified when paging

Then restart the test page:

So the data is coming out.

Subsequent:

I hope this article on the need to use Jqgrid and DataTables two JS control of the small partners, to help you, thank you for your reading.