Bootstrap Table uses the combined query by PAGE (5) and the combined query by bootstrap

Bootstrap Table uses the combined query by PAGE (5) and the combined query by bootstrap

Recommended reading:

Bootstrap Table use organization (1) http://www.bkjia.com/article/115789.htm

Bootstrap Table use organization (2) http://www.bkjia.com/article/115791.htm

Bootstrap Table use organization (3) http://www.bkjia.com/article/115795.htm

Bootstrap Table use organization (4) toolbar http://www.bkjia.com/article/115798.htm

I. query by PAGE combination

/** Data-pagination: Specifies whether to enable paging * data-page-list specifies the page data size array '[5, 10]' * data-side-pagination specifies whether the page is a server) /client * Note: * client, request parameter: * search: text box content. If the content of the text box changes, the request is automatically submitted. * order: sorting method * sort: sort column name * offset: number of entries crossed * limit: number of data records to be retrieved **/var $ table1 = $ ('# table1 '). bootstrapTable ({columns: [{field: 'sno', title: 'student number', sortable: true}, {field: 'sname', title: 'student name '}, {field: 'ssex, title: Gender' }, {Field: 'sbirthday', title: 'birthday'}, {field: 'class', title: 'Course number'},], url: '@ Url. action ("GetStuList", "DataOne") ', pagination: true, sidePagination: 'server', pageList: [5, 10, 20, 50], queryParams: function (params) {params. name = 'zhang Sanfeng '; // in particular, if the returned parameter value is null, the current parameter will not be sent to the server. // This method of specifying the request parameter is similar to the price control of the datatables. sex = $ ('input [name = "sex"]: checked '). val (); return params ;}}); // refresh method $ ('# heartBtn '). c Lick (function () {$ table1.bootstrapTable ('refresh') ;}); [html] view plain copy print? <Table id = "table1" data-classes = "table-hover" data-search = "true" data-show-refresh = "true" data-show-toggle =" true "data-show-columns =" true "data-toolbar =" # toolbar "> </table> <div id =" toolbar "> <div class =" btn-group "> <button class =" btn-default "> <I class =" glyphicon-plus "> </I> </button> <button class =" btn- default "> <I class =" glyphicon-heart "id =" heartBtn "> </I> </button> <button class =" btn-default "> <I class = "glyphicon-trash"> </I> </button> </div> <div class = "form-group"> <label class = "control-label"> gender: </label> <label class = "radio-inline"> <input type = "radio" name = "sex" value = "male"/> male </label> <label class = "radio-inline"> <input type = "radio" name = "sex" value = "female"/> female </label> </div>

2. server code processing

Public JsonResult GetStuList (string sex, string search, string sort, string order, int offset, int limit) {var query = _ Context. student. asQueryable (); if (string. isNullOrEmpty (sex) = false) query = query. where (q => q. ssex = sex); if (string. isNullOrEmpty (search) = false) query = query. where (q => q. sno. contains (search) | q. sname. contains (search); // sort if (sort = "sno") {if (order = "asc") query = query. orderBy (q => q. sno); else query = query. orderByDescending (q => q. sno);} else query = query. orderBy (q => q. sbirthday); int total = query. count (); var list = query. skip (offset ). take (limit ). toList (); return Json (new {rows = list, total = total });}

The above section describes how to use the Bootstrap Table sorting (5) Paging Combined Query. I hope it will be helpful to you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!