BootStrap table plug-in adaptive Fixed Header (super easy to use), bootstraptable

BootStrap table plug-in adaptive Fixed Header (super easy to use), bootstraptable

The first is a simple form of page. You can create html tables by drawing tables as usual, and then control special styles through js (the advantage is that tables are more intuitive, easy to adjust Table Styles and so on, fast)

Of course, you can also put only one table label on the page. After that, all the data and styles can be controlled through js, which will be discussed later (advantages: convenient control of data modification, especially the json format obtained by ajax, but it is troublesome to adjust the style)

Ps: This is the agent's official website, which has English api and examples: http://bootstrap-table.wenzhixin.net.cn/zh-cn/

Also, before use, please introduce at least five basic files of css, js, jQuery, and bootstrap-table, and js related to bootstrap.

I. html table

Example 1: Requirement: A simple table data is displayed. the header is two rows and an up/down arrow is displayed.

Analysis: It is very simple. You only need html to implement it. You just need to draw it based on the regular table and add the Custom Attributes unique to bootstrap-table, note: if you do not use js, add data-toggle to the table label at the beginning.

Html code:

<Div> <table data-toggle = "table" data-height = "268" class = "table-striped table-bordered table-hover" id = "tableL01"> <thead> <tr> <th data-field = "lhc" data-rowspan = "2" data-align = "center" data-valign = "middle"> to consume </th> <th data-field = "dr" data-colspan = "3" data-align = "center" data-valign = "middle"> today </th> <th data-field = "bz" data-colspan = "3" data-align = "center" data-valign = "middle"> this week </th> <th data-field = "by" data-colspan = "3" data-align = "center" data-valign = "middle"> this month </th> </tr> <th data-field = "drbq" data-align = "center" data-valign = "middle"> current period </th> <th data-field = "drtb" data-align = "center" data-valign = "middle"> year-on-year comparison </th> <th data-field = "drhb" data-align = "center" data-valign = "middle"> period-over-period comparison </th> <th data-field = "bzbq" data-align = "center" data-valign = "middle"> current period </th> <th data-field = "bztb" data-align = "center" data-valign = "middle"> year-on-year comparison </th> <th data-field = "bzhb" data-align = "center "data-valign =" middle "> period-over-period comparison </th> <th data-field =" bybq "data-align =" center "data-valign =" middle "> current period </th> <th data-field = "bytb" data-align = "center" data-valign = "middle"> year-on-year comparison </th> <th data-field =" byhb "data-align =" center "data-valign =" middle "> period-over-period comparison </th> </tr> </thead> <tbody> <tr> <td> coal volume </td> <td> 21341 </td> <I class = 'glyphicon glyphicon-arrow-low'> </I> 0.31 </td> <td> <I class = 'glyphicon glyphicon-arrow-up'> </I> 0.21 </td> <td> 334322 </td> <I class = 'glyphicon glyphicon -arrow-down '> </I> 1.13 </td> <I class = 'glyphicon glyphicon-arrow-up'> </I> 4.21 </td> <td> 3125113 </td> <I class = 'glyphicon glyphicon-arrow-low'> </I> 2.21 </td> <I class = 'glyphicon glyphicon-arrow-up'> </I> 2.94 </td> </tr> <td> coal volume </td> <td> 76573 </td> <td> <I class = 'glyphicon glyphicon-arrow-low'> </I> 4.21 </td> <I class = 'glyphicon glyphicon-arrow-up '> </I> 1.45 </td> <td> 234534 </td> <I class = 'glyphicon glyphicon-arrow-low'> </I> 4.35 </td> <I class = 'glyphicon glyphicon-arrow-up'> </I> 2.75 </td> <td> 44225 </td> <td> <I class = 'glyphicon glyphicon-arrow-low'> </I> 0.74 </td> <I class = 'glyphicon glyphicon-arrow-up'> </ i> 3.45 </td> </tr> <td> coal consumption </td> <td> 43363 </td> <I class = 'glyphicon glyphicon -arrow-down '> </I> 0.31 </td> <I class = 'glyphicon glyphicon-arrow-up'> </I> 0.21 </td> <td> 32422 </td> <I class = 'glyphicon glyphicon-arrow-low'> </I> 1.13 </td> <I class = 'glyphicon glyphicon-arrow-up'> </I> 4.21 </td> <td> 13345 </td> <I class = 'glyphicon glyphicon-arrow-down '> </I> 2.21 </td> <I class = 'glyphicon glyphicon-arrow-up'> </I> 2.94 </td> </tr> <tr> <td> coal volume </td> <td> 34624 </td> <I class = 'glyphicon glyphicon-arrow-low'> </I> 4.35 </td> <I class = 'glyphicon glyphicon-arrow-up'> </I> 1.23 </td> <td> 452346 </td> <td> <I class = 'glyphicon glyphicon-arrow-low'> </I> 2.32 </td> <I class = 'glyphicon glyphicon-arrow-up'> </ i> 0.05 </td> <td> 94524 </td> <I class = 'glyphicon glyphicon-arrow-low'> </I> 2.21 </td> <td> <I class = 'glyphicon glyphicon-arrow-up'> </I> 2.94 </td> </tr> <td> coal consumption </td> <td> 21341 </td> <I class = 'glyphicon glyphicon-arrow-low'> </I> 0.31 </td> <I class = 'glyphicon glyphicon-arrow-up'> </I> 0.21 </td> <td> 334322 </td> <I class = 'glyphicon glyphicon-arrow-down '> </I> 1.13 </td> <I class = 'glyphicon glyphicon-arrow-up'> </I> 4.21 </td> <td> 3125113 </td> <I class = 'glyphicon glyphicon-arrow-low'> </I> 2.21 </td> <I class = 'glyphicon glyphicon- arrow-up '> </I> 2.94 </td> </tr> <td> coal consumption </td> <td> 21341 </td> <td> <I class = 'glyphicon glyphicon-arrow-low'> </I> 0.31 </td> <I class = 'glyphicon glyphicon-arrow-up'> </ i> 0.21 </td> <td> 334322 </td> <I class = 'glyphicon glyphicon-arrow-low'> </I> 1.13 </td> <td> <I class = 'glyphicon glyphicon-arrow-up'> </I> 4.21 </td> <td> 3125113 </td> <I class = 'glyphicon glyphicon-arrow-low'> </I> 2.21 </td> <I class = 'glyphicon glyphicon-arrow-up'> </I> 2.94 </td> </tr> <td> coal consumption </td> <td> 21341 </td> <I class = 'glyphicon glyphicon-arrow-down '> </I> 0.31 </td> <I class = 'glyphicon glyphicon-arrow-up'> </I> 0.21 </td> <td> 334322 </td> <I class = 'glyphicon glyphicon-arrow-low'> </I> 1.13 </td> <I class = 'glyphicon glyphicon- arrow-up '> </I> 4.21 </td> <td> 3125113 </td> <I class = 'glyphicon glyphicon-arrow-low'> </ i> 2.21 </td> <I class = 'glyphicon glyphicon-arrow-up'> </I> 2.94 </td> </tr> <td> coal consumption </td> <td> 21341 </td> <I class = 'glyphicon glyphicon-arrow-low'> </I> 0.31 </td> <td> <I class = 'glyphicon glyphicon-arrow-up'> </I> 0.21 </td> <td> 334322 </td> <I class = 'glyphicon glyphicon-arrow-low'> </I> 1.13 </td> <I class = 'glyphicon glyphicon-arrow-up'> </I> 4.21 </td> <td> 3125113 </td> <I class = 'glyphicon glyphicon-arrow-low'> </I> 2.21 </td> <I class = 'glyphicon glyphicon-arrow-up'> </I> 2.94 </td> </tr> <td> coal consumption </td> <td> 21341 </td> <I class = 'glyphicon glyphicon-arrow-low'> </I> 0.31 </td> <I class = 'glyphicon glyphicon- arrow-up '> </I> 0.21 </td> <td> 334322 </td> <I class = 'glyphicon glyphicon-arrow-low'> </ i> 1.13 </td> <I class = 'glyphicon glyphicon-arrow-up'> </I> 4.21 </td> <td> 3125113 </td> <td> <I class = 'glyphicon glyphicon-arrow-low'> </I> 2.21 </td> <I class = 'glyphicon glyphicon-arrow-up'> </I> 2.94 </td> </tr> <td> coal consumption </td> <td> 21341 </td> <I class = 'glyphicon glyphicon-arrow-low'> </I> 0.31 </td> <I class = 'glyphicon glyphicon-arrow-up'> </I> 0.21 </td> <td> 334322 </td> <I class = 'glyphicon glyphicon-arrow-low'> </I> 1.13 </td> <I class = 'glyphicon glyphicon-arrow-up'> </I> 4.21 </td> <td> 3125113 </td> <I class = 'glyphicon glyphicon- arrow-down '> </I> 2.21 </td> <I class = 'glyphicon glyphicon-arrow-up'> </I> 2.94 </td> </tr> </tbody> </table> </div>

Example 2: requirement. The second table is followed by a custom cell that shows the progress, and the first row requires a statistical display of the total, these two functions need to use js to set custom columns.

Html code:

<Div> <table data-toggle = "table" data-height = "268" class = "table-striped table-bordered table-hover" id = "tableL02"> <thead> <tr> <th data-field = "id" data-align = "center" data-valign = "middle"> NO. </th> <th data-field = "gys" data-align = "center" data-valign = "middle"> suppliers </th> <th data-field = "pz" data-align = "center" data -valign = "middle"> variety </th> <th data-field = "rz" data-align = "center" data-valign = "middle"> calorific value </th> <th data-field = "mj" data-align = "center" data-valign = "middle"> coal price </th> <th data-field = "bmdj" data -align = "center" data-valign = "middle"> coal price </th> <th data-field = "drlm" data-align = "center" data-valign = "middle"> coal on the current day </th> <th data-field = "ljlm" data-align = "center" data-valign = "middle"> accumulated coal </th> <th data-field = "yjhl" data-align = "center" data-valign = "middle"> monthly planned amount </th> <th data-field = "yjhjd" data-align = "center" data-valign = "middle" data-formatter = "progress"> monthly planned completion </th> </tr> </thead> <tbody> <tr> <td> 2 </td> <td> shuangxin mining </td> <td> low sulfur coal </td> </td> <td> 6686.08 </td> <td> 30000 </td> <td> 22% </td> </tr> <td> 3 </td> <td> intime </td> <td> engineering coal </td> & gt; <td> </td> <td> 51888.72 </td> <td> 70000 </td> <td> 74% </td> </tr> <td> 4 </td> <td> jiayuan company </td> <td> medium and high sulfur coal </td> <td> </td> <td> 20041.86 </td> <td> 90000 </td> <td> 100% </td> </tr> <td> 5 </td> <td> Aidi energy </td> <td> low sulfur coal </td> <td> 5191.08 </td> <td> 30000 </td> <td> 0% </td> </tr> <td> 6 </td> <td> hengtai coal </td> <td> medium and high sulfur coal </td> <td> 18265.56 </td> <td> 0 </td> <td> 22% </td> </tr> <td> 7 </td> <td> shuangxin Mining </td> <td> low sulfur coal </td> <td> 6686.08 </td> <td> 30000 </td> <td> 22% </td> </tr> <td> 8 </td> <td> shuangxin mining </td> <td> low sulfur coal </td> <td> </td> <td> 6686.08 </td> <td> 30000 </td> <td> 22% </td> </tr> <td> 9 </td> <td> shuangxin mining </td> <td> low sulfur coal </td> </td> <td> </td> <td> 6686.08 </td> <td> 30000 </td> <td> 22% </td> </tr> </tbody> </table> </div>

Js Code:

// Declare the variable var yjhArr = []; var ljlmArr = [] used to count the total (accumulated coal, monthly plan); // display the progress bar's Custom column function progress (value, row) {var width = parseInt (row. yjhjd); var red = '# e63737'; var blue =' # b6ccf4 '; yjhArr. push (row. yjhl); ljlmArr. push (row. ljlm); return "<div style = 'height: 20px; border: 1px solid # b6ccf4; '> <span style = 'display: block; float: left; width: "+ width +" %; height: 100%; background-color: "+ <br> (width> = 100? Red: blue) + "; '>" + value + "</span> </div>"} // function yjhTotal () {var subyiterator = 0; var subljlm = 0; var row = []; for (var I = 0; I <yjhArr. length; I ++) {if (yjhArr [I] = "") {yjhArr [I] = 0;} subyjh + = parseFloat (yjhArr [I]);} for (var j = 0; j <ljlmArr. length; j ++) {if (ljlmArr [j] = "") {ljlmArr [j] = 0;} subljlm + = parseFloat (ljlmArr [j]);} row. push ({id: 1, gys: 'Total', pz: '', rz:'', mj: '', bmdj:'', drlm: '', ljlm: subljlm. toFixed (2), yjhl: subybatch, yjhjd: '000000'}); return row}

Analysis: You need to add data-formatter = 'method name' to the custom row and column, where the parameter row in the progress () method, the row is executed every time a row is generated in the table and the object of the row is passed in.

Ii. js Mode

Using this method, you can easily set parameters for the table and process data, especially when setting request methods and addresses. However, this project is only a static page for the time being, subsequent data access is written.

Example 1: Same as Example 1

Html:

<div><table class="table table-striped table-bordered table-hover" id="tableL01"></table></div>

Js:

// Table plug-in (table 1) Start $ ('# tableL01 '). bootstrapTable ({height: 268, // simulate data columns: [{align: 'center', valign: 'middle', field: 'lhc ', title: 'memory consumption ', rowspan: 2}, {align: 'center', valign: 'middle', field: 'Dr', title: 'day', colspan: 3}, {align: 'center', valign: 'middle', field: 'yz', title: 'Week', colspan: 3}, {align: 'center ', valign: 'middle', field: 'by', title: 'month', colspan: 3}], [{align: 'center', valign: 'middle', field: 'drbq', title: 'Current issue '}, {Align: 'center', valign: 'middle', field: 'drtb', title: 'Year-on-year', formatter: trend}, {align: 'center', valign: 'middle', field: 'drhb ', title: 'yoken', formatter: trend}, {align: 'center', valign: 'middle ', field: 'bzbq', title: 'Current top'}, {align: 'center', valign: 'middle', field: 'bztb', title: 'Year-on-year ', formatter: trend}, {align: 'center', valign: 'middle', field: 'bzhb ', title: 'period-over-period comparison', formatter: trend}, {align: 'center', valign: 'middle', fi Eld: 'bybq', title: 'stream'}, {align: 'center', valign: 'middle', field: 'bytb', title: 'yo ', formatter: trend}, {align: 'center', valign: 'middle', field: 'byhb ', title: 'period-over-period comparison', formatter: trend}], data: [{id: 1, lhc: 'aliyance', drbq: '000000', drtb: '0. 21', drhb: '0. 33 ', bzbq: '123', bztb: '1. 62 ', bzhb:' 3. 16', bybq: '000000', bytb: '2. 78 ', byhb: '1. 59'}, {id: 2, lhc: 'aliyuntaobao', drbq: '000000', drtb: '0. 21', drhb: '0. 33 ', bzbq: '123', bztb: '1. 62 ', bzhb:' 3. 16 ', Bybq: '000000', bytb: '2. 78 ', byhb: '1. 59'}, {id: 3, lhc: 'aliyance', drbq: '000000', drtb: '0. 21', drhb: '0. 33 ', bzbq: '123', bztb: '1. 62 ', bzhb:' 3. 16', bybq: '000000', bytb: '2. 78 ', byhb: '1. 59'}, {id: 4, lhc: 'aliyance', drbq: '000000', drtb: '0. 21', drhb: '0. 33 ', bzbq: '123', bztb: '1. 62 ', bzhb:' 3. 16', bybq: '000000', bytb: '2. 78 ', byhb: '1. 59'}, {id: 5, lhc: 'aliyance', drbq: '000000', drtb: '0. 21', drhb: '0. 33 ', bzbq: '123', bztb: '1. 62 ', bzhb:' 3. 16', bybq: '20170101', B Ytb: '2. 78 ', byhb: '1. 59'}, {id: 6, lhc: 'aliyance', drbq: '000000', drtb: '0. 21', drhb: '0. 33 ', bzbq: '123', bztb: '1. 62 ', bzhb:' 3. 16', bybq: '000000', bytb: '2. 78 ', byhb: '1. 59'}, {id: 7, lhc: 'aliyance', drbq: '000000', drtb: '0. 21', drhb: '0. 33 ', bzbq: '123', bztb: '1. 62 ', bzhb:' 3. 16', bybq: '000000', bytb: '2. 78 ', byhb: '1. 59'}, {id: 8, lhc: 'aliyuntaobao', drbq: '000000', drtb: '0. 21', drhb: '0. 33 ', bzbq: '123', bztb: '1. 62 ', bzhb:' 3. 16', bybq: '000000', bytb: '2. 78 ', byhb: '1. 59'}, {id: 9, lhc: 'aliyance', drbq: '000000', drtb: '0. 21', drhb: '0. 33 ', bzbq: '123', bztb: '1. 62 ', bzhb:' 3. 16', bybq: '000000', bytb: '2. 78 ', byhb: '1. 59'}, {id: 10, lhc: 'aliyuntaobao', drbq: '000000', drtb: '0. 21', drhb: '0. 33 ', bzbq: '123', bztb: '1. 62 ', bzhb:' 3. 16', bybq: '000000', bytb: '2. 78 ', byhb: '1. 59'}, {id: 11, lhc: 'aliyuntaobao', drbq: '000000', drtb: '0. 21', drhb: '0. 33 ', bzbq: '123', bztb: '1. 62 ', bzhb:' 3. 16', bybq: '000000', bytb: '2. 78 ', byhb: '1. 59'}, {id: 12, Lhc: 'aliyuntaobao', drbq: '000000', drtb: '0. 21', drhb: '0. 33 ', bzbq: '123', bztb: '1. 62 ', bzhb:' 3. 16', bybq: '000000', bytb: '2. 78 ', byhb: '1. 59'}]}); // simulate data end // Add function trend (value, row) {var trendIcon = row to the up and down floating Arrow styles. id % 2 = 0? 'Glyphicon glyphicon-arrow-low': 'glyphicon glyphicon-arrow-up '; return "<I class = '" + trendIcon + "'> </I>" + value} // end of table plug-in 1

Analysis: $ ('# tableL01 '). bootstrapTable ({}) is the sign at the beginning of the plug-in. Add Table parameters in the plug-in, and set Column Parameters and table data in data: Table data, while in columns, this project is representative of the header divided into two parts. Therefore, you need to add two arrays [{}] and [{}] in columns 【{}],【{}]. Previously written in an array, while the source code traverses the length of columns

Example 2:

The same html requires only one table tag with id.

Js:

// Table plug-in (table 2) Start // declare the variable var yjhArr = []; var ljlmArr = [] used to count the total (accumulated coal, monthly plan); $ ('# tableL02 '). bootstrapTable ({height: 268, // simulate data columns: [{align: 'center', valign: 'middle', field: 'id', title: 'sequence number '}, {align: 'center', valign: 'middle', field: 'gys ', title: 'Supplier'}, {align: 'center', valign: 'middle ', field: 'pz', title: 'breed '}, {align: 'center', valign: 'middle', field: 'rz', title: 'calorific value '}, {align: 'center', valign: 'middle', field: 'mj ', tit Le: 'Coal price'}, {align: 'center', valign: 'middle', field: 'bmdj', title: 'Coal price '}, {align: 'center', valign: 'ddle', field: 'drlm ', title: 'Coal of the day'}, {align: 'center', valign: 'middle', field: 'ljlm ', title: 'accumulative coal fly'}, {align: 'center', valign: 'middle', field: 'yjhl', title: 'monthly planned quantity '}, {align: 'center', valign: 'middle', field: 'yjhjd ', title: 'monthly Plan Completion progress', formatter: progress}], data: [{id: 2, gys: 'shuangxin mining ', pz: 'low sulfur coal', rz: '', mj:'', bmdj: '', drlm:'', l Jlm: '2017. 08 ', yjhl: '000000', yjhjd: '000000'}, {id: 3, gys: 'itai shares', pz: 'engineering coal ', rz :'', mj: '', bmdj:'', drlm: '', ljlm: '51888. 72 ', yjhl: '000000', yjhjd: '000000'}, {id: 4, gys: 'jiayuan company', pz: 'medium high sulfur coal', rz :'', mj: '', bmdj:'', drlm: '', ljlm: '20041. 86 ', yjhl: '000000', yjhjd: '000000'}, {id: 5, gys: 'aidi ener', pz: 'low sulfur coal', rz :'', mj: '', bmdj:'', drlm: '', ljlm: '5191. 08 ', yjhl: '', yjhjd: '0%'}, {id: 6, gys: 'hengtai coal ', pz: 'medium high sulfur coal', rz :'', mj: '', bmdj:'', drlm: '', ljlm: '18265. 56 ', yjhl :' ', Yjhjd: '0%'}, {id: 6, gys: 'hengtai coal ', pz: 'medium sulfur coal', rz: '', mj :'', bmdj: '', drlm:'', ljlm: '100. 56 ', yjhl: '', yjhjd: '0%'}, {id: 6, gys: 'hengtai coal ', pz: 'medium high sulfur coal', rz :'', mj: '', bmdj:'', drlm: '', ljlm: '18265. 56 ', yjhl: '', yjhjd: '0%'}]}); // simulate data completion // display the progress bar's Custom column function progress (value, row) {var width = parseInt (row. yjhjd); var red = '# e63737'; var blue =' # b6ccf4 '; yjhArr. push (row. yjhl); ljlmArr. push (row. ljlm); return "<div style = 'height: 20px; border: 1px solid # b6ccf4; '> <span style = 'display: block; float: left; width: "+ width +" %; height: 100%; background-color: "+ (width >=100? Red: blue) + "; '>" + value + "</span> </div>"} // function yjhTotal () {var subyiterator = 0; var subljlm = 0; var row = []; for (var I = 0; I <yjhArr. length; I ++) {if (yjhArr [I] = "") {yjhArr [I] = 0;} subyjh + = parseFloat (yjhArr [I]);} for (var j = 0; j <ljlmArr. length; j ++) {if (ljlmArr [j] = "") {ljlmArr [j] = 0;} subljlm + = parseFloat (ljlmArr [j]);} row. push ({id: 1, gys: 'Total', pz: '', rz:'', mj: '', bmdj:'', drlm: '', ljlm: subljlm, yjhl: subyjh, yjhjd: '000000'}); return row}

In fact, this is not much different from the first method, but it just sets the Custom column in the data. Better understanding. For other parameters, refer to the official website. There are also many examples of how to dynamically add data to the Internet, as long as they are all placed in. bootstrapTable ({}).

The above section describes the self-adaptive fixed table header (super easy to use) of the BootStrap table plug-in. I hope it will be helpful to you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!