Bootstrap table paging In asp.net MVC, bootstrapmvc

Bootstrap table paging In asp.net MVC, bootstrapmvc

Chinese translation documentation:

Http://blog.csdn.net/rickiyeat/article/details/56483577

Version description:

Jquery v2.1.1

Bootstrap v3.7

Bootstrap-table V1.11.1

I. view page

1 <! DOCTYPE html> 2 Ii. process scripts

1 var TableInit = function () {2 var oTableInit = new Object (); 3 4 // initialize Table 5 oTableInit. init = function () {6 $ ('# test_Table '). bootstrapTable ({7 url: "test", 8 method: 'get', 9 datatype: 'json', 10 contentType: "application/x-www-form-urlencoded ", 11 toolbar: '# test_toolbar', 12 striped: false, // whether to display the row interval color 13 cache: false, 14 pagination: true, 15 sortable: false, 16 sortName: 'adddate', 17 so RtOrder: "asc", 18 queryParams: oTableInit. queryParams, 19 sidePagination: "server", 20 pageNumber: 1, 21 pageSize: 20, 22 pageList: [20, 30, 50,100], 23 paginationPreText: 'previous paginationNextText: 'Next page', 25 search: false, 26 strictSearch: false, 27 showColumns: false, 28 showRefresh: true, 29 minimumCountColumns: 2, 30 clickToSelect: true, // select 31 height: 600, 32 idField: "Id", 33 uniqueI in the row D: "Id", // Unique Identifier column 34 showToggle: false, 35 cardView: false, 36 detailView: false, 37 showHeader: true, 38 singleSelect: false, // whether to select 39 checkboxHeader: true, 40 columns: [41 {checkbox: true}, 42 {43 title: 'sequence number ', field: 'no', width: '50', align: 'center', formatter: function (value, row, index) {44 return index + 1; 45} 46}, 47 {field: 'id ', title: 'id', visible: false}, 48 {49 field: 'ope Rate', 50 title: 'operation', 51 width: '000000', 52 halign: 'center', 53 align: 'center', 54 formatter: function (value, row, index) {55 var strHtml = "<a title = 'edit' onclick = 'btnedit (\" "+ row. id + "\") 'href = 'javascript: void (0 ); '> <I class = 'fa fa-penpencil fa-fw'> </I> </a> & nbsp ;"; 56 strHtml + = "<a title = 'delete' onclick = 'btndelete (\" "+ row. id + "\") 'href = 'javascript: void (0); '> <I class = 'fa fa-trash-O'> </I> </a> "; 57 return strHtml; 58} 59}, // or 60 {61 field: 'operate', title: 'operation', width: '80', halign: 'center', align: 'left', 62 events: operateEvents, 63 formatter: function (value, row, index) {64 var strHtml = "<a class = 'upload' title = 'upload 'href = 'javascript: void (0 ); '> <I class = 'fa fa-upload fa-fw'> </I> </a> & nbsp ;"; 65 strHtml + = "<a class = 'delete' title = 'delete' href = 'javascript: void (0); '> <I class = 'fa -Trash-o fa-fw '> </I> </a> "; 66 return strHtml; 67} 68} 69] 70}); 71 }; 72 73 // transmit the background parameter 74 oTableInit. queryParams = function (params) {75 // the corresponding table parameter 76/* method 1 var temp1 = {77 rows: this. pageSize, 78 page: this. pageNumber, 79 sort: this. sortName, 80 order: this. sortOrder 81}; */82 83 // serialized form data 84 var searchWhere =$ ("# activity_SearchForm "). serializeFormToJson (); 85 // method 2 86 var temp = {87 lim It: params. limit, // page size 88 offset: params. offset/params. limit, // page number 89 searchWhere: JSON. stringify (searchWhere) // JSON string parameter 90}; 91 return temp; 92}; 93 oTableInit. responseHandler = function (res) {94 if (res) {95 return {96 "rows": res. result, 97 "total": res. totalCount 98 }; 99} else {100 return {101 "rows": [], 102 "total": 0103}; 104} 105}; 106 return oTableInit; 107 }; 108 109 var Button Init = function () {110 var oInit = new Object (); 111 112 oInit. init = function () {113 114 // clear the query condition 115 $ ("# btnClear "). click (function () {116 //... 117}); 118 119 // query 120 $ ("# btnSearch "). click (function () {121 $ ("# test_Table "). bootstrapTable ('refresh'); 122}); 123 124 // batch display 125 $ ("# btnEdit "). click (function () {126 var selectRow = $ ("# test_Table "). bootstrapTable ('getselecexception'); 127 if (selectRow. leng Th <= 0) {128 $. modalAlert ("select the data row to be operated first. "," Warning "); 129} 130 131 var ids = new Array (); 132 $. each (selectRow, function (I, row) {133 ids [I] = row ["Id"]; 134}); 135 $. confirmForm ({137 //... 138}); 139}); 140 141 // batch Delete 142 $ ("# btnDelete "). click (function () {143 var selectRow = $ ("# test_Table "). bootstrapTable ('getselecexception'); 144 if (selectRow. length <= 0) {145 $. modalAlert ("select the data row to be operated first. "," Warning "); 146} 147 148 var ids = new Array (); 149 $. each (selectRow, function (I, row) {150 ids [I] = row ["Id"]; 151}); 152 $. deleteForm ({154 //... 155}); 156}); 157}; 158 return oInit; 159}; 160 161 162 // edit 163 var btnEdit = function (key //... 164} 165 166 // Delete 167 var btnDelete = function (key) {168 //... 169} 170 171 172 // row event or 173 174 in the following way // The operation listens to event window. operateEvents = {175 // Delete the data row 176 'click. remove ': function (e, value, row, index) {177 $ (' # test_Table '). bootstrapTable ('delete', {field: 'id', values: [row ['id']}); 178}, 179 // upload 180 'click. upload': function (e, value, row, index) {181 //... 182} 183 };View Code

Iii. backend Processing

1 /// <summary> 2 // test 3 /// </summary> 4 /// <param name = "limit"> page data size </param> 5 /// <param name = "offset"> page number </param> 6 /// <param name = "searchWhere"> </param> 7 /// <returns> </returns> 8 [HttpGet] 9 [AjaxOnly] 10 public JsonResult GetCommentGridJson (int limit, int offset, string searchWhere) 11 {12 // total number of 13 int rowCount = 0; 14 IList <T> list = null; 15 return Json (new {total = rowCount, rows = list}); 16} 17 18 // The returned JSON must contain total, rowsView Code