BootStrap Table Table plug-in Adaptive fixed header (super handy) _jquery

The first is a simple form of the page, you can follow the usual way to draw tables to create HTML tables, and then through JS Control special style and other operations (the advantage is that the table more intuitive, easy to adjust the table style, etc., fast)

Of course, you can only put a table label on the page, after all the data and style through the JS control is also OK, later will say (advantages to facilitate control of the modified data, especially the Ajax way to obtain the JSON format, but the adjustment style is more troublesome)

PS: This is the official website of the plugin, which has English APIs and examples: http://bootstrap-table.wenzhixin.net.cn/zh-cn/

Also, before using, please introduce bootstrap related css,js,jquery, and bootstrap-table css,js at least 5 basic files

One, HTML table way

Example one: requirements, simple tabular data rendering, table headers are two rows, and a downward-pointing arrow

Analysis: Very simple, only need HTML can be implemented, according to the regular form to draw, add bootstrap-table unique custom properties can be, note if you do not use JS, in the beginning of the table tag add Data-toggle

HTML code:

<div> <table data-toggle= "table" data-height= "268" class= "table table-striped table-bordered table-hover" id= "TableL01" > <thead> <tr> <th data-field= "LHC" data-rowspan= "2" data-align= "Center" data-valign= " Middle "> To save </th> <th data-field=" Dr "data-colspan=" 3 "data-align=" center "data-valign=" Middle "> Day </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> <tr> <th data-field= "DRBQ" data-align= "center" data-valign= "Middle" > This period </th> <th data-field= "DRTB" data-align= "center" data-valign= "Middle" > </th> <th data-field= "DRHB" data-align= "center" data-valign= "Middle" > Chain </th> <th data-field= "BZBQ" data-align= "center" data-valign= "Middle" > this period </th> <th Data-field= "BZTB" data-align= "center" data-valign= "Middle" > </th> <th daTa-field= "BZHB" data-align= "center" data-valign= "Middle" > Chain </th> <th data-field= "BYBQ" Center "data-valign=" Middle "> Current </th> <th data-field=" BYTB "data-align=" center "data-valign=" Middle "> Year-on-year </th> <th data-field= "BYHB" data-align= "center" data-valign= "Middle" > Chain </th> </tr> </ thead> <tbody> <tr> <td> coal content </td> <td>21341</td> <td><i class= ' Glyphicon glyphicon-arrow-down ' ></i>0.31</td> <td><i class= ' Glyphicon glyphicon-arrow-up ' ></i>0.21</td> <td>334322</td> <td><i class= ' Glyphicon glyphicon-arrow-down '
></i>1.13</td> <td><i class= ' Glyphicon glyphicon-arrow-up ' ></i>4.21</td>
<td>3125113</td> <td><i class= ' Glyphicon glyphicon-arrow-down ' ></i>2.21</td> <td><i class= ' Glyphicon glyphicon-arrow-up ' ></i>2.94</td> </tr> <tr> <td> Coal content </td> <td>76573</td> <td><i class= ' Glyphicon glyphicon-arrow-down ' > </i>4.21</td> <td><i class= ' Glyphicon glyphicon-arrow-up ' ></i>1.45</td> <td >234534</td> <td><i class= ' Glyphicon glyphicon-arrow-down ' ></i>4.35</td> <td ><i class= ' Glyphicon glyphicon-arrow-up ' ></i>2.75</td> <td>44225</td> <td> <i class= ' Glyphicon glyphicon-arrow-down ' ></i>0.74</td> <td><i class= ' Glyphicon Glyphicon-arrow-up ' ></i>3.45</td> </tr> <tr> <td> coal consumption </td> <td>43363 </td> <td><i class= ' Glyphicon glyphicon-arrow-down ' ></i>0.31</td> <td><i class= ' Glyphicon glyphicon-arrow-up ' ></i>0.21</td> <td>32422</td> <td><i class = ' Glyphicon glyphicon-arrow-down ' ></i>1.13</td> <td><i class= ' Glyphicon glyphIcon-arrow-up ' ></i>4.21</td> <td>13345</td> <td><i class= ' Glyphicon Glyphicon-arrow-down ' ></i>2.21</td> <td><i class= ' Glyphicon glyphicon-arrow-up ' ></i >2.94</td> </tr> <tr> <td> to coal content </td> <td>34624</td> <td><i class = ' Glyphicon glyphicon-arrow-down ' ></i>4.35</td> <td><i class= ' Glyphicon Glyphicon-arrow-up ' ></i>1.23</td> <td>452346</td> <td><i class= ' Glyphicon Glyphicon-arrow-down ' ></i>2.32</td> <td><i class= ' Glyphicon glyphicon-arrow-up ' ></i >0.05</td> <td>94524</td> <td><i class= ' Glyphicon glyphicon-arrow-down ' ></i
>2.21</td> <td><i class= ' Glyphicon glyphicon-arrow-up ' ></i>2.94</td> </tr> <tr> <td> coal consumption </td> <td>21341</td> <td><i class= ' Glyphicon Glyphicon-arrow-down ' &GT;&Lt;/i>0.31</td> <td><i class= ' Glyphicon glyphicon-arrow-up ' ></i>0.21</td> <td >334322</td> <td><i class= ' Glyphicon glyphicon-arrow-down ' ></i>1.13</td> <td ><i class= ' Glyphicon glyphicon-arrow-up ' ></i>4.21</td> <td>3125113</td> <td ><i class= ' Glyphicon glyphicon-arrow-down ' ></i>2.21</td> <td><i class= ' Glyphicon Glyphicon-arrow-up ' ></i>2.94</td> </tr> <tr> <td> coal consumption </td> <td>21341 </td> <td><i class= ' Glyphicon glyphicon-arrow-down ' ></i>0.31</td> <td><i class= ' Glyphicon glyphicon-arrow-up ' ></i>0.21</td> <td>334322</td> <td><i class= ' Glyphicon glyphicon-arrow-down ' ></i>1.13</td> <td><i class= ' Glyphicon Glyphicon-arrow-up ' ></i>4.21</td> <td>3125113</td> <td><i class= ' Glyphicon GlyphicoN-arrow-down ' ></i>2.21</td> <td><i class= ' Glyphicon glyphicon-arrow-up ' ></i>2.94 </td> </tr> <tr> <td> coal consumption </td> <td>21341</td> <td><i class= ' Glyphicon glyphicon-arrow-down ' ></i>0.31</td> <td><i class= ' Glyphicon glyphicon-arrow-up ' ></i>0.21</td> <td>334322</td> <td><i class= ' Glyphicon glyphicon-arrow-down '
></i>1.13</td> <td><i class= ' Glyphicon glyphicon-arrow-up ' ></i>4.21</td>
<td>3125113</td> <td><i class= ' Glyphicon glyphicon-arrow-down ' ></i>2.21</td> <td><i class= ' Glyphicon glyphicon-arrow-up ' ></i>2.94</td> </tr> <tr> <td> Coal consumption </td> <td>21341</td> <td><i class= ' Glyphicon glyphicon-arrow-down ' ></i>0.31 </td> <td><i class= ' Glyphicon glyphicon-arrow-up ' ></i>0.21</td> <td>334322</td> <td><i class= ' Glyphicon glyphicon-arrow-down ' ></i>1.13</td> <td ><i class= ' Glyphicon glyphicon-arrow-up ' ></i>4.21</td> <td>3125113</td> <td ><i class= ' Glyphicon glyphicon-arrow-down ' ></i>2.21</td> <td><i class= ' Glyphicon Glyphicon-arrow-up ' ></i>2.94</td> </tr> <tr> <td> coal consumption </td> <td>21341 </td> <td><i class= ' Glyphicon glyphicon-arrow-down ' ></i>0.31</td> <td><i class= ' Glyphicon glyphicon-arrow-up ' ></i>0.21</td> <td>334322</td> <td><i class= ' Glyphicon glyphicon-arrow-down ' ></i>1.13</td> <td><i class= ' Glyphicon Glyphicon-arrow-up ' ></i>4.21</td> <td>3125113</td> <td><i class= ' Glyphicon Glyphicon-arrow-down ' ></i>2.21</td> <td><i class= ' Glyphicon glyphicon-arrow-up ' ></i >2.94</td> </tr> <tr> <td> coal consumption </td> <td>21341</td> <td><i class= ' Glyphicon glyphicon-arrow-down ' ></i>0.31</td> <td><i class= ' Glyphicon glyphicon-arrow-up ' ></i>0.21</td> <td>334322</td> <td><i class= ' Glyphicon glyphicon-arrow-down '
></i>1.13</td> <td><i class= ' Glyphicon glyphicon-arrow-up ' ></i>4.21</td>
<td>3125113</td> <td><i class= ' Glyphicon glyphicon-arrow-down ' ></i>2.21</td> <td><i class= ' Glyphicon glyphicon-arrow-up ' ></i>2.94</td> </tr> </tbody> </ Table> </div>

Example two: requirements, the second table has a custom cell showing progress, and the first line is to do a total statistics show, these two functions need to use JS to set the custom ranks

HTML code:

<div> <table data-toggle= "table" data-height= "268" class= "table table-striped table-bordered table-hover" id= "TableL02" > <thead> <tr> <th data-field= "id" data-align= "center" data-valign= "Middle" > Serial number </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" > Standard coal price </th> <th data-field= "DRLM" Center "data-valign=" Middle "> Day to Coal </th> <th data-field=" LJLM "data-align=" center "data-valign=" Middle " > Cumulative Coal </th> <th data-field= "YJHL" data-align= "center" data-valign= "Middle" > Monthly plan amount </th> <th Data-field= "YJHJD" data-align= "center" data-valign= "middle" data-formatter= "progress" &Gt; monthly plan completion schedule </th> </tr> </thead> <tbody> <tr> <td>2</td> <td> Double-Xin Mining </ td> <td> Low sulfur coal </td> <td></td> <td></td> <td></td> <td></td > <td>6686.08</td> <td>30000</td> <td>22%</td> </tr> <tr> <td
>3</td> <td> Yitai shares </td> <td> Engineering coal </td> <td></td> <td></td> <td></td> <td></td> <td>51888.72</td> <td>70000</td> <td>74% </td> </tr> <tr> <td>4</td> <td> Jiahe company </td> <td> High sulfur coal </td> <td
></td> <td></td> <td></td> <td></td> <td>20041.86</td> <td>90000</td> <td>100%</td> </tr> <tr> <td>5</td> <td> Love Energy </td> <td> Low sulfur coal </td> <td></td> <td></td> <td></td> <td></td> <td>5191.08</td> <td>30000</td> <td>0%</td > </tr> <tr> <td>6</td> <td> hengtai Coal </td> <td> High Sulphur coal </td> <td> </td> <td></td> <td></td> <td></td> <td>18265.56</td> <td
>0</td> <td>22%</td> </tr> <tr> <td>7</td> <td> shuang Xin Mining </td>
<td> Low sulfur coal </td> <td></td> <td></td> <td></td> <td></td> <td>6686.08</td> <td>30000</td> <td>22%</td> </tr> <tr> <td>8 </td> <td> shuang Xin Mining </td> <td> Low Sulphur coal </td> <td></td> <td></td> <td ></td> <td></td> <td>6686.08</td> <td>30000</td> <td>22%</td > </tr> <tr> <td>9</td> <td> shuang xin Mining </td> <td> low sulfur coal &Lt;/td> <td></td> <td></td> <td></td> <td></td> <td>6686.08 </td> <td>30000</td> <td>22%</td> </tr> </tbody> </table> </div >

JS Code:

Statement of variable Var yjharr=[for statistical totals (cumulative coal, monthly plan)
;
var ljlmarr=[];
Displays the custom column
function progress (value,row) {
var width=parseint (ROW.YJHJD) of the progress bar;
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&G T;=100?red:blue) + "; ' > ' +value+ ' </span></div>
}
//The method of calculating the aggregate value
function Yjhtotal () {
var subyjh=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:subyjh,
yjhjd: ' 107% '
});
Return row
}

Analysis: Custom rows and columns need to add data-formatter= ' method name ', where the argument row in the progress () method executes once for each generated row and passes the object in the row when the table is generated.

Two: JS Way

In this way, you can easily set parameters for the table, processing data is very convenient, especially when setting the request mode and address, but this project is temporarily static page, the data on the future contact in writing

Example one: The preceding example

Html:

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

Js:

Table plug-in (Table I) Start $ (' #tableL01 '). Bootstraptable ({height:268,//Analog data columns: [[{align: ' center ', valign: ' Middle ', field: '] LHC ', title: ' To Consume ', rowspan:2}, {align: ' center ', valign: ' Middle ', field: ' Dr ', title: ' Day ', Colspan:3}, {align: ' center ', valign: ' Middle ', field: ' Bz ', title: ' This Week ', Colspan:3},{align: ' center ', valign: ' Middle ', field: ' By ', title: ' This month ', col Span:3}], [{align: ' center ', valign: ' Middle ', field: ' Drbq ', title: ' This period '}, {align: ' center ', valign: ' Middle ', field: ' DRT B ', title: ' Year-on-year ', formatter:trend},{align: ' center ', valign: ' Middle ', field: ' Drhb ', title: ' Chain ', formatter:trend}, {Alig
N: ' center ', valign: ' Middle ', field: ' Bzbq ', title: ' This period '}, {align: ' center ', valign: ' Middle ', field: ' Bztb ', title: ' Year ', Formatter:trend},{align: ' center ', valign: ' Middle ', field: ' Bzhb ', title: ' Chain ', formatter:trend}, {align: ' center ', Vali GN: ' Middle ', field: ' Bybq ', title: ' This period '}, {align: ' center ', valign: ' Middle ', field: ' Bytb ', title: ' Year ', formatter:trend} , {align: ' center ', valign: ' mIddle ', field: ' Byhb ', title: ' Chain ', formatter:trend}]], data:[{id:1, LHC: ' Stock ', DRBQ: ' 21341 ', DRTB: ' 0.21 ', DRHB: ' 0.33 ', BZBQ: ' 35624 ', BZTB: ' 1.62 ', BZHB: ' 3.16 ', BYBQ: ' 42613 ', BYTB: ' 2.78 ', BYHB: ' 1.59 '},{id:2, LHC: ' To Stock ', DRBQ: ' 21341 ', DRTB: ' 0.21 ', DRHB: ' 0.33 ', BZBQ: ' 35624 ', BZTB: ' 1.62 ', BZHB: ' 3.16 ', BYBQ: ' 42613 ', BYTB: ' 2.78 ', BYHB: ' 1.59 '},{id:3, LHC: ' Stock ', D RBQ: ' 21341 ', DRTB: ' 0.21 ', DRHB: ' 0.33 ', BZBQ: ' 35624 ', BZTB: ' 1.62 ', BZHB: ' 3.16 ', BYBQ: ' 42613 ', BYTB: ' 2.78 ', 1.59 '} , {id:4, LHC: ' Stock ', DRBQ: ' 21341 ', DRTB: ' 0.21 ', DRHB: ' 0.33 ', BZBQ: ' 35624 ', BZTB: ' 1.62 ', BZHB: ' 3.16 ', BYBQ: ' 42613 2.78 ', BYHB: ' 1.59 '},{id:5, LHC: ' Stock ', DRBQ: ' 21341 ', DRTB: ' 0.21 ', DRHB: ' 0.33 ', BZBQ: ' 35624 ', BZTB: ' 1.62 ', b YBQ: ' 42613 ', BYTB: ' 2.78 ', BYHB: ' 1.59 '},{id:6, LHC: ' To Stock ', DRBQ: ' 21341 ', DRTB: ' 0.21 ', DRHB: ' 0.33 ', BZBQ: ' 35624 ',: ' 1. BZHB: ' 3.16 ', BYBQ: ' 42613 ', BYTB: ' 2.78 ', BYHB: ' 1.59 '},{id:7, LHC: ' Stock ', DRBQ: ' 21341 ', DRTB: ' 0.21 ', DRHB Q: ' 35624 ', BZTB: ' 1.62 ', BZHB: ' 3.16 ', BYBQ: ' 42613 ', BYTB: ' 2.78 ', BYHB: ' 1.59 '},{id:8, LHC: ' Stock ', DRBQ: ' 21341 ', DRTB: ' 0.21 ', DRHB: ' 0.33 ', BZBQ: ' 35624 '
' 1.62 ', BZHB: ' 3.16 ', BYBQ: ' 42613 ', BYTB: ' 2.78 ', BYHB: ' 1.59 '},{id:9, LHC: ' To Stock ', DRBQ: ' 21341 ', DRTB: ' 0.21 ', DRHB: ' 0.33 ', BZBQ: ' 35624 ', BZTB: ' 1.62 ', BZHB: ' 3.16 ', BYBQ: ' 42613 ', BYTB: ' 2.78 ', BYHB: ' 1.59 '},{id:10, LHC: ' Stock ', DRBQ: ' 21341 ', DRTB: ' 0.21 ', DRHB: ' 0.33 ', BZBQ: ' 35624 ', BZTB: ' 1.62 ', BZHB: ' 3.16 ', BYBQ: ' 42613 ', BYTB: ' 2.78 ', BYHB: ' 1.59 '},{id:11, LHC: ' Stock ' , DRBQ: ' 21341 ', DRTB: ' 0.21 ', DRHB: ' 0.33 ', BZBQ: ' 35624 ', BZTB: ' 1.62 ', BZHB: ' 3.16 ', BYBQ: ' 42613 ', BYTB: ' 2.78 ' 1.59 '},{id:12, LHC: ' Stock ', DRBQ: ' 21341 ', DRTB: ' 0.21 ', DRHB: ' 0.33 ', BZBQ: ' 35624 ', BZTB: ' 1.62 ', BZHB: ' 3.16 '
, BYTB: ' 2.78 ', BYHB: ' 1.59 '}]}; Analog data End//up/down floating arrow Style add function trend (Value,row) {var trendicon=row.id%2===0? '
Glyphicon glyphicon-arrow-down ': ' Glyphicon glyphicon-arrow-up '; Return "<i class= '" +trendicon+ "' ></i>" +value}//Form plugin ended

Analysis: $ (' #tableL01 '). Bootstraptable ({}) is the flag at which the plug-in starts, adding the table's parameters, and then the data: is the table, and the columns is where the column parameters and tabular data are set, This project is representative of the table header is divided into two parts, so you need to add two array "{}", "{}" in columns. is written in an array, and the source code traverses the length of the columns.

Case TWO:

HTML is the same as all you need is a table tag with ID

Js:

Form plugin (Table II) Start//DECLARE variable var yjharr=[for statistical totals (cumulative coal, monthly plan);
var ljlmarr=[];
$ (' #tableL02 '). Bootstraptable ({height:268,//Analog data columns: [{align: ' center ', valign: ' Middle ', field: ' ID ', title: ' Serial 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 ', titl E: ' Coal price '},{align: ' center ', valign: ' Middle ', field: ' Bmdj ', title: ' Standard coal price '},{align: ' center ', valign: ' Middle ', field: ' DrL M ', title: ' The same day come to coal '},{align: ' center ', valign: ' Middle ', field: ' Ljlm ', title: ' Cumulative coal '},{align: ' center ', valign: ' Middle ', f
Ield: ' YJHL ', title: ' Monthly plan amount '},{align: ' center ', valign: ' Middle ', field: ' Yjhjd ', title: ' Month Plan complete Progress ', formatter:progress}], data:[{id:2, Gys: ' Shuang hin mining ', PZ: ' Low sulfur coal ', RZ: ', MJ: ', Bmdj: ', DRLM: ', ljlm: ' 6686.08 ', YJHL: ' 30000 ', Yjhjd: ' 22% '},{id:3, Gy S: ' Yitai shares ', PZ: ' Engineering coal ', RZ: ', MJ: ', Bmdj: ', DRLM: ', ljlm: ' 51888.72 ', YJHL: ' 700', Yjhjd: ' 74% '},{id:4, gys: ' Ka Yuan company ', PZ: ' Medium high sulfur coal ', RZ: ', MJ: ', Bmdj: ', DRLM: ', ljlm: ' 20041.86 ', YJHL: ' 90000 ',: ' 10 0% '},{id:5, Gys: ' Love energy ', PZ: ' Low sulfur coal ', RZ: ', MJ: ', Bmdj: ', DRLM: ', ljlm: ' 5191.08 ', YJHL: ', Yjhjd: ' 0% '},{id:6, Gys: ' Hengtai coal Charcoal ', PZ: ' Medium high sulfur coal ', rz: ' ', MJ: ', Bmdj: ', DRLM: ', ljlm: ' 18265.56 ', 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 high sulfur coal ', RZ: ', MJ: ', Bmdj: ', Dr
LM: ', ljlm: ' 18265.56 ', YJHL: ', Yjhjd: ' 0% '}]; Analog data end//Show progress bar 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>}//The method of calculating the aggregate value Yjhtotal () {var subyjh=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: ' 107% '}; Return row}

This is actually not the same as the first way, except that the custom column is set in the data. Better understanding. And about other parameters can refer to the official website, the data is dynamic how to add the Internet also has a lot of examples, as long as all put in the. bootstraptable ({})

The above is a small set to introduce Bootstrap table table plug-in Adaptive fixed table Head (Super good), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!