Bootstrap table learning notes (2) Front-end paging fuzzy query and bootstrap learning notes

Bootstrap table learning notes (2) Front-end paging fuzzy query and bootstrap learning notes

During usage, when reading the document and doing so, I encountered some difficulties. Here I will record it and make a summary by the way:

1. Front-end Paging
2. Back-end Paging
3. Fuzzy search

The front-end paging is quite simple. When I added 2 million pieces of test data, it opened smoothly without freezing.

$ (Function () {a () ;}); function a () {$ ('# yourtable '). bootstrapTable ({url: "/user/getUserList/", method: "post", dataType: "json", striped: true, // color-changing across rows cache: false, // whether to use the cache showColumns: false, // column pagination: true, // sortable paging: false, // whether to enable sorting singleSelect: false, search: false, // display the search box buttonsAlign: "right", // The button alignment mode showRefresh: false, // whether the refresh button sidePagination: "client" is displayed, // The client processes the pagination Server: server pageNumber: "1", // default page number when the plug-in is enabled pageSize: "15", // enable the plug-in is the default number of data entries per page pageList: [10, 25, 50,100], // customize the number of pages per page undefinedText: '--', uniqueId: "id", // unique identifier of each row, generally the primary key column queryParamsType :'', columns: [{title: 'id', field: 'id', align: 'center', valign: 'middle', },{ title: 'user name', field: 'name', align: 'center', valign: 'middle', },{ title: 'gender ', field: 'sex', align: 'center ',}, {title: 'user account', field: 'username', align: 'center' ,},{ title: 'mobile phone no. ', field: 'phone', align: 'center' ,}, {title: 'mailbox ', field: 'email', align: 'center' ,}, {title: 'authorization', field: 'rolename ', align: 'center' ,},{ title: 'operation', field: 'id', align: 'center', formatter: function (value, row, index) {// value: obtain the value of the current column. ========= var e = '<button href = "#" class = "btn-default" mce_href = "#" onclick = "edit (\'' + row. id + '\') "> edit </button> '; var d = '<button href = "#" class = "btn-default" mce_href = "#" onclick = "del (\'' + row. id + '\') "> Delete </button> '; return e + d ;}}]});}

Considering that there will be more and more data in the future, front-end paging is obviously unable to meet the requirements when there is a large amount of data. Therefore, the back-end paging is required.

First:

SidePagination: "server", // server page

QueryParams: queryParams, // PASS Parameters (*)

// Obtain the query parameter function queryParams (params) {var temp = {// The name of the key and the variable name of the controller must be consistent. Here we change the value, the Controller also needs to be changed to the same pageSize: params. pageSize, // page size pageNumber: params. pageNumber, // page number username: $ ("# search_username "). val (), name: $ ("# search_name "). val (), sex: $ ("# search_sex "). val (), phone: $ ("# search_mobile "). val (), email: $ ("# search_email "). val (),}; return temp ;};

The number of entries displayed on each page and the current page number are introduced. If you want to query, You need to input the query conditions.

The specific js is as follows:

$ (Function () {a () ;}); function a () {$ ('# userListTable '). bootstrapTable ({url: "/user/getUserList/", method: "post", dataType: "json", contentType: "application/x-www-form-urlencoded ", striped: true, // indicates whether to use the cache showColumns: false, // toobar: '# toolbar', pagination: true, // sortable: false, // whether to enable sorting singleSelect: false, search: false, // display the search box buttonsAlign: "right", // showRefresh: false, // whether the refresh button sidePagination is displayed: "server", // pageNumber: "1", pageSize: "15", pageList: [10, 25, 50,100], undefinedText: '--', uniqueId: "id", // unique identifier of each row, which is generally the primary key column queryParamsType: '', queryParams: queryParams, // pass the parameter (*) columns: [{title: 'id', field: 'id', align: 'center', valign: 'middle', },{ title: 'user name', field: 'name', align: 'center', valign: 'middle', },{ title: 'gender ', field: 'sex', align: 'center ',}, {title: 'user account', field: 'username', align: 'center' ,},{ title: 'mobile phone no. ', field: 'phone', align: 'center' ,}, {title: 'mailbox ', field: 'email', align: 'center' ,}, {title: 'authorization', field: 'rolename ', align: 'center' ,},{ title: 'operation', field: 'id', align: 'center', formatter: function (value, row, index) {var e = '<button href = "#" class = "btn-default" mce_href = "#" onclick = "edit (\'' + row. id + '\') "> edit </button> '; var d = '<button href = "#" class = "btn-default" mce_href = "#" onclick = "del (\'' + row. id + '\') "> Delete </button> '; return e + d ;}}]}); // obtain the queried Parameter function queryParams (params) {var temp = {// The name of the key and the variable name of the controller must be the same. Here, the controller must be changed to the same pageSize: params. pageSize, // page size pageNumber: params. pageNumber, // page number username: $ ("# search_username "). val (), name: $ ("# search_name "). val (), sex: $ ("# search_sex "). val (), phone: $ ("# search_mobile "). val (), email: $ ("# search_email "). val () ,}; return temp ;};/// search function serachUser () {$ ("# userListTable "). bootstrapTable ('refresh ');}

* Worth notingIs:

ContentType: "application/x-www-form-urlencoded", // because bootstap table uses ajax to obtain data, in this case, the requested content type is set to text/plain by default, so that the @ RequestParam parameter ing cannot be obtained on the server side.
And:

HTML:

<Div id = "page-content" class = "animated fadeInRight"> <div class = "col-sm-4 col-md-3 col-lg-3" style = "width: 100%; "> <form id =" search_User "> <div class =" panel-body search_box "> <div class =" search_div "> <label for =" search_name "> User Name: </label> <input type = "text" class = "form-control" id = "search_name" name = "UserV2.name"> </div> <div class = "search_div"> <label for = "search_mobile"> mobile phone number: </label> <input type = "text" class = "form-control" id = "search_mobile" name = "UserV2.phone"> </div> <div class = "search_div"> <label for = "search_sex"> gender: </label> <select class = "form-control" id = "search_sex" name = "UserV2.sex"> <option value = ""> --- select --- </option> <option value = "male"> male </option> <option value = "female"> female </option> </select> </div> <div class = "panel-body search_box"> <div class = "search_div"> <label for = "search_name"> User Account: </label> <input type = "text" class = "form-control" id = "search_username" name = "UserV2.username"> </div> <div class = "search_div"> <label for = "search_name"> User Email: </label> <input type = "text" class = "form-control" id = "search_email" name = "UserV2.email"> </div> <div class = "search_div" style = "text-align: center; "> <input type =" button "class =" btn-primary btn_search "value =" Search "onclick =" serachUser () "/> </div> </form> </div> <table id =" userListTable "> </table> </div>

The data imported to the background during table initialization or search is as follows:

PageSize = 15 pageNumber = 1 username = name = sex = phone = email =

Returned data:

We need to return two values:Rows total

Rows:The data we found

Total:Total number of data (this refers to the total number of all data, not the number of single pages, for example, I have 100 data records in the user table, my limit, so my rows contains 15 data records, but total = 100)

{"Total": 2, "rows": [{"email": "39385908@qq.com", "id": 1, "name": "Deng xx", "password ": "", "phone": "12345678911", "rolename": "platform administrator", "sex": "male", "username": "admin "}, {"email": "2222@222.com", "id": 8, "name": "Wang xiao'er 1", "password": "", "phone": "13245678910 ", "rolename": "", "sex": "male", "username": "admin2"}]}

With the total number, plus the previous pageSize and rows, bootStraptable will automatically generate paging-related elements for us:

:

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.