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

This article mainly shows you "what is the use of table in Bootstrap", 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 "what is the use of table in Bootstrap" this article.

Bootstrap-table is a table plug-in that is written on the basis of bootstrap-table and is specially used to display data. Bootstrap, which comes from Twitter, is currently the most popular front-end framework. Bootstrap is based on HTML, CSS and JAVASCRIPT. It has the advantages of simple, flexible and rapid front-end development. Yes, it will not be described here with bootstrap.

First of all, let's explain the relationship among jquery, bootstrap and bootstrap-table. Many parts of the code in bootstrap involve jquery, that is, bootstrap depends on jquery, and the bootstrap-table we want to use is created on the basis of bootstrap, so we must refer to the relevant js,css files of jquery and bootstrap before using bootstrap-table.

Then, the characteristics of bootstrap-table: with jquery-ui,jqgrid and other table display plug-ins, bootstrap-table is flat, lightweight, for some lightweight data show, he is more than enough, and the support for father-son tables is also very good, the most important thing is that it can be seamlessly combined with other tags of bootstrap.

1. Introduce js and css

2. Table data padding

There are two ways for bootStrap table to obtain data, one is to specify the data source through the data-url attribute of table, and the other is to specify url when initializing the table through JavaScript to obtain data.

... $('# table') .bootstrapTable ({url: 'data.json'})

The second method is more flexible in dealing with complex data than the first, and the second method is generally used to populate table data.

$(function () {/ / 1. Initialize Table var oTable = new TableInit (); oTable.Init (); / / 2. Initialize the click event of Button / * var oButtonInit = new ButtonInit (); oButtonInit.Init (); * /}); var TableInit = function () {var oTableInit = new Object () / / initialize Table oTableInit.Init = function () {$('# tradeList') .bootstrapTable ({url:'/ VenderManager/TradeList', / / request backend URL (*) method: 'post', / / request method (*) toolbar:' # toolbar', / / tool button which container striped: true, / / whether to display the interline color cache: false, / / whether to use cache, 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: "asc", / / sorting method queryParams: oTableInit.queryParams,// passing parameters (*) sidePagination: "server", / / paging method: client client paging, server server paging (*) pageNumber:1, / / initializing and loading the first page Default first page pageSize: 50, / / number of rows per page (*) pageList: [10,25,50,100], / / number of rows available per page (*) strictSearch: true, clickToSelect: true, / / whether to enable click to select rows height: 460, / / row height, if the height attribute is not set, the table automatically feels the table height according to the number of records: "id", / / the unique identification of each row General primary key column cardView: false, / / whether to display the detailed view detailView: false, / / whether to display the parent-child table columns: [{field: 'id', title:' serial number'}, {field: 'liushuiid', title:' transaction number'}, {field: 'orderid', title:' order number'}, {field: 'receivetime', title:' transaction time'} {field: 'price', title:' amount'}, {field: 'coin_credit', title:' coin'}, {field: 'bill_credit', title:' banknote'}, {field: 'changes', title:' change'}, {field: 'tradetype', title:' transaction type'}, {field: 'goodmachineid' Title: 'freighter number'}, {field: 'inneridname', title:' cargo channel number'}, {field: 'goodsName', title:' commodity name'}, {field: 'changestatus', title:' payment'}, {field: 'sendstatus', title:' shipping'},]}) } / / get the query parameter oTableInit.queryParams = function (params) {var temp = {/ / the name of the key here and the variable name of the controller must be changed all the time. The controller also needs to be changed to the same limit: params.limit, / / page size offset: params.offset, / / page number sdate: $("# stratTime"). Val (), edate: $("# endTime"). Val (), sellerid: $("# sellerid"). Val (), orderid: $("# orderid"). Val (), CardNumber: $("# CardNumber"). Val (), maxrows: params.limit, pageindex:params.pageNumber, portid: $("# portid"). Val () CardNumber: $("# CardNumber"). Val (), tradetype:$ ('input: radio [name = "tradetype"]: checked'). Val (), success:$ (' input: radio [name = "success"]: checked'). Val (),} Return temp;}; return oTableInit;}

The field field must correspond to the field returned by the server to display the data.

3. Acquire data at the backend

A, servlet to get data

BufferedReader bufr = new BufferedReader (new InputStreamReader (request.getInputStream (), "UTF-8"); StringBuilder sBuilder = new StringBuilder (""); String temp = ""; while ((temp = bufr.readLine ())! = null) {sBuilder.append (temp);} bufr.close (); String json = sBuilder.toString (); JSONObject json1 = JSONObject.fromObject (json); String sdate= json1.getString ("sdate"); / / obtain front-end data by this method

B, the corresponding method in springMvc Controller to obtain data

Public JsonResult GetDepartment (int limit, int offset, string orderId, string SellerId,PortId,CardNumber,Success,maxrows,tradetype) {...} above are all the contents of this article entitled "what are the ways to use table in Bootstrap?" 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.