Shulou(Shulou.com)06/03 Report--

This article mainly shows you "bootstrap-table how to achieve data tables", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to achieve data tables in bootstrap-table" this article.

When using bootstrap table, it is possible to display data in tables that are often reused. It is certainly no problem if you write it yourself, but it is much more troublesome to display the data. However, bootstrap table encapsulates a set of perfect data table components, which can easily display the data requested from the background. Bootstrap table can be implemented in two ways, one is written in html through table, the other is implemented through js, and js implementation is more flexible. So js is used here, let's take a look at the implementation.

Client

The corresponding css, js and other files must be introduced first.

Bootstrap-Table add record × Add record Cancel submission $(function () {/ / adjust the table height according to the window $(window) .resize (function () {$('# mytab') .bootstrapTable ('resetView') {height: tableHeight ()}) $('# mytab') .bootstrapTable ({url: ", / / data source dataField:" rows ", / / the data key value returned by the server means that the key value of the record is rows The key value of the total number of records used when paging is total height: tableHeight (), / / height adjustment search: true,// whether to search for pagination: true,// whether paging pageSize: 20 pageList: [5, 10, 20, 50], / / paging step value sidePagination: "server" / / server paging contentType: "application/x-www-form-urlencoded", / / request data content format: application/json handles dataType: "json" by server according to the format, / / expect to return data type method: "post", / / request method searchAlign: "left" / / query box alignment queryParamsType: "limit", / / query parameter organization queryParams: function getParams (params) {/ / params obj params.other = "otherInfo" Return params }, searchOnEnterKey: false,// enter search showRefresh: true,// refresh button showColumns: true,// column selection button buttonsAlign: "left", / / button alignment toolbar: "# toolbar", / / specify toolbar toolbarAlign: "right" / / Toolbar alignment columns: [{title: "Select all", field: "select", checkbox: true, width: 20 Legend / width align: "center" / / horizontal valign: "middle" / / Vertical}, {title: "ID", / / title field: "id", / / key name sortable: true / / whether order: "desc" / / default sorting method}, {field: "name", title: "NAME", sortable: true, titleTooltip: "this is name"} {field: "age", title: "AGE", sortable: true,}, {field: "info", title: "info [using-formatter]", formatter: 'infoFormatter' / / format the data in this column}], onClickRow: function (row, $element) {/ / $element is the current tr jquery object $element.css ("background-color", "green") }, / / Click row event locale: "zh-CN", / / Chinese support detailView: false, / / whether to display details to fold detailFormatter: function (index, row, element) {var html ='; $.each (row, function (key, val) {html + = "

"+ key +": "+ val +"

"}); return html;}}); $(" # addRecord ") .click (function () {alert (" name: "+ $(" # name "). Val () +" age: "+ $(" # age "). Val ();}) }) function tableHeight () {return $(window) .height ()-50 The formatting function of the column * @ param {[type]} value [description] * @ param {[type]} row [description] * @ param {[type]} index [description] * @ return {[type]} [description] * / function infoFormatter (value, row) before the data is returned to load from the server Index) {return "id:" + row.id + "name:" + row.name + "age:" + row.age }

Server: just return the json array when you receive the request, which is the json array, not a single object, otherwise the data will not be displayed.

Note that bootstrap table can be paged at either the front end or the back end. Here, we use the back end page. When the back end page is done, you need to return a page containing

Total: the key value of the total number of records seems to be fixed. I can't find it in the document and change it to something else.

Rows: the key value of the record collection can be modified by dataField to define what you want.

{"total": 200, "rows": [{"id": 1, "name": "sallency", "age": 26}, {"id": 1, "name": "sallency", "age": 26}, {"id": 1, "name": "sallency", "age": 26}, {"id": 1, "name": "sallency", "age": 26}, {"id": 1, "name": "sallency" "age": 26}]}

But there may be situations where the data cannot be assigned when requested, and then you will be in a hurry, and you can also use the following ways to render the data. This effect is different from the above one, so it will not be pictured here. Similarly, the first step is to introduce css/js and other documents required by the official website.

Var $table = $("# product") $table.bootstrapTable ({url: "http://192.168.6.240:8080/form", dataType:" json ", contentType:" application/x-www-form-urlencoded ", / / toolbar:'# toolbar', / / which container to use for the tool button striped: true, / / whether to display the interline color cache: false / / whether to use caching or not Default is true So in general, you need to set this property (*) pagination: true, / / whether to display paging (*) sortable: false, / / whether to enable sorting sortOrder: "desc", / / sort method sidePagination: "client" / / paging method: client client paging Server server pagination (*) pageNumber:1, / / initialize and load the first page By default, the first page pageSize: 10, / / the number of rows per page (*) pageList: [5pc10d20], / / paging step value / / number of rows per page available (*) / / search:true, / / whether to display a table search, this search is a client search and will not enter the server, so Personal feeling is not meaningful / / strictSearch: true, oolbarAlign:'right',// toolbar alignment buttonsAlign:'right',// button alignment / / showColumns: true, / / whether to show all columns / / showRefresh: true, / / whether to display the refresh button minimumCountColumns: 2 / / minimum allowed number of columns clickToSelect: true, / / whether to enable click to select rows / / height: 500, / / row height If the height property is not set, the table automatically feels the height of the table according to the number of records uniqueId: "id", / / the unique identification of each row General primary key column / / showToggle:true, / / whether to display the switch button of detail view and list view cardView: false, / / whether to show detail view / / detailView: false, / / whether to display parent and child tables onEditableSave / / singleSelect: false, / / striped: true / / whether to display interline color / / cache: false, / / whether to use caching The default is true, so generally you need to set this property (*) / / sortable: true, / / whether sorting is enabled / / pagination: true, / / display the paging button / / sortName: "starttime", / / sortOrder: "desc", / / default sort / / pageNumber: 1, / / initialize and load the first page Default first page / / pageSize: 10, / / default number of pages displayed / / showRefresh: true, / / whether to display the refresh button / / showPaginationSwitch: true, / / whether to display the select paging button / / queryParamsType:', / / default is' limit', and the parameter passed to the server by default is: offset,limit Sort / / set to''the parameter passed to the server in this case is: pageSize,pageNumber queryParams:function (params) {var temp = {pageSize: params.pageSize, / / page size pageNumber: params.pageNumber, / / page number table_data:tempdata,} return temp }, responseHandler:function (res) {/ / when obtaining the data passed in the background before the dynamic rendering table, it is used to obtain the additional parameters to remove the data needed for rendering / / see the api return res of this function for details. }, / / search: true, / / Show search box (client search) / / sidePagination: "server", / / Server processing paging / / showToggle:true, / / switch button on whether to display detailed view and list view cardView: false, / / whether to show detailed view / / detailView: false / / whether to display the parent-child table columns: [{title: 'remarks', field: 'code', align:' center', width: 100, valign: 'middle',}, {title:' operation', field: 'name' Align: 'center', width: 120, valign:' middle',}, {title: 'coding', field: 'calcMode', align:' center', width: 120, valign: 'middle',}] OnLoadSuccess: function () {/ / execute alert when loading successfully ("loading data successfully") }, onLoadError: function () {/ / execute alert when loading fails ("failed to load data";}});}

Do you feel much better than the table you wrote after you can use it? you don't have to write a lot of js and div, and there are more features you can go to the official website to learn how to use.

The above is all the contents of the article "how to implement data tables in bootstrap-table". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.