Bootstrap Table (4) toolbar, bootstraptable

Bootstrap Table (4) toolbar, bootstraptable

Related 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 query http://www.bkjia.com/article/115785.htm using a composite paging (5)

1. Enable the default supported Toolbar

/** Whether data-search displays the search box * whether data-show-refresh is like a refresh button. Note: The refresh operation will request data again, with the request parameter * data-show-toggle, whether to display the panel switch button * data-show-columns whether to display the column control button */$ ('# table1 '). bootstrapTable ({columns: [{field: 'sno', title: 'student number'}, {field: 'sname', title: 'student name'}, {field: 'ssex, title: 'gender'}, {field: 'sbirthday', title: 'birthday'}, {field: 'class', title: 'Course number'},], url: '@ Url. action ("GetStudent", "DataOne ")'}); <table id = "table1" data-classes = "table-hover" data-search = "true" data-show-refresh = "true" data-show-toggle =" true "data-show-columns =" true "> </table>

Ii. Use the extended Toolbar

/** Data-toolbar is used to specify the div extension toolbar of the id. This method is similar to javasird * queryParams in EaseUI. When requesting server data, you can add some additional parameters by rewriting parameters, for example, if queryParamsType = 'limit' is a parameter in a toolbar, the return parameter must contain limit, offset, search, sort, and order. Otherwise, it must contain pageSize, pageNumber, searchText, sortName, and sortOrder. if false is returned, the request */var $ table1 = $ ('# table1') will be terminated '). bootstrapTable ({columns: [{field: 'sno', title: 'student number'}, {field: 'sname', title: 'student name'}, {field: 'ssex, title: 'gender'}, {field: 'sbirthday', title: 'birthday'}, {field: 'class', title: 'Course number'},], url: '@ Url. action ("GetStudent", "DataOne") ', 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 params. sex = $ ('input [name = "sex"]: checked '). val (); return params ;}}); // refresh method $ ('# heartBtn '). click (function () {// refresh processing, specify the query parameters. Note: The parameters specified here, use // $ table1.bootstrapTable ('refresh', {// query: {// name: 'zhangsan' //}) only when refresh is performed '//}//}); $ table1.bootstrapTable ('refresh ');}); <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>

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