1, paging query
Front desk: (1) sends the request, need to pass two parameters: a page (the current page number), a limit (page size)
(2) set the callback (receiving the returned data, the data processing)
Note: the two parameters of paging one can't be little
Background: (1) receive parameters, processing the parameters, and because of the need to calculate the amount of paging query need to skip the data
(2) to query the data sorting, note: paging must be sorted before
(3) by page and limit the data paging query (core)
(4) build a return data, the front desk need what form of data, the background and then return to what form of data
(5) return data
Example: the front desk using layui form rendering
Tabular data is as follows:
The table name: S_CabinType
CabinTypeID cabinTypeCode cabinTypeName basisPrice discountRate
1 F class 1790.00 1.50
2 economy class Y 1190.00 1.00
Economy class 1130.00 0.95 3 K
Economy class 1070.00 0.90 4 B
5 E economy class 1010.00 0.85
Economy class 950.00 0.80
6 H7 L economy class 890.00 0.75
8 V business class 600.00 0.50
At the front desk code:
HTML: & lt; The table id="tabCabinType" layui - filter="tabCabinType & gt;" //need to render element
JS: var layTable tabCabinType;
$(function () {
//load layui module
Layui. Use (' table ', function () {
LayTable=layui. Table;
//form rendering
LayTable. Render ({
Elem: # tabCaibnType ', '//need to render element
Url: '/Main/SelectCabinTypeInfor',//request path
Cols: [[/line/render headers and data
{the title: "serial number", type: 'Numbers', the align:' center '},
{the title: "class code" field: cabinTypeCode, align: 'center'},
{the title: "name of space", the field: cabinTypeName, align: 'center'},
{the title: "base price", the field: basicPrice, align: 'center'},
{the title: "discount rate", the field: 'discountRate', align: 'center'}
]],
Page: true,//open the page
Limit: 5//paging size
)};
)};
)};
Note: use layui rendering form, send the request will pass two parameters by default, a page is (the current page number), for the first time rendering
When 1, can not set, the limit (page size), the default is 10, if set limit, that is, set the value of the
The background code:
Public ActionResult SelectCabinTypeInfor (int page, int limit) {
//calculate start index pages
Int startIndex=(page 1) * limit;
//paging query
List
Select tabCabinType). Skip (startIndex)//paging starting position index
. Take (limit)//the data extraction amount
ToList ();//build list
//the total number of data
Int count=myModel. S_CabinType. The count ();
//build return data, the front desk need to what kind of format of the data, the background is what kind of format of the data returned
Return a Json (new {
Code=0,//state, optional
Msg=", "//message, optional
The count=count,//the total number of data, you must pass
Data=data after the https://bbs.csdn.net/topics/listData//page, you must pass
}, JsonRequestBehavior. AllowGet);
}
Results: don't show in the form of pictures, here is the appearance of the below form
Sequence number space code name base price of shipping discount rate
1 F class 1790.00 1.50
2 economy class Y 1190.00 1.00
Economy class 1130.00 0.95 3 K
Economy class 1070.00 0.90 4 B
5 E economy class 1010.00 0.85