First of all, it is a simple page form. You can create html tables in the usual way of drawing tables, and then control special styles and other operations through js (the advantage is that the tables are more intuitive, and it is convenient to adjust the table styles, etc., and the speed is fast)
Of course, you can just put a table tag on the page, and all the subsequent data and styles can be controlled through js. I will say later (the advantages are convenient to control and modify data, especially the json format obtained by the ajax method, but adjusting the style is more troublesome)
ps: This is the official website of the plug-in, which contains English APIs and examples: http://bootstrap-table.wenzhixin.net.cn/zh-cn/
Also, before using, please introduce bootstrap's related css, js, jQuery, and bootstrap-table css, js at least these 5 basic files.
1. HTML form method
Example 1: Requirements, simple table data presentation, the header is two rows, and there is an arrow that floats up and down
Analysis: It's very simple. You only need html to implement it. Draw according to the regular table and add the unique custom attributes of bootstrap-table. Note that if you don't use js, please add data-toggle to the initial table tag.
html code:
<div><table data-toggle="table" data-height="268" 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">this 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 issue</th><th data-field="drtb" data-align="center" data-valign="middle">Year-year</th><th data-field="drhb" data-align="center" data-valign="middle">Moon-month</th><th data-field="bzbq" data-align="center" data-valign="middle">This issue</th><th data-field="bztb" data-align="center" data-valign="middle">Year-year</th><th data-field="bzhb" data-align="center" data-valign="middle">Moon-month</th><th data-field="bybq" data-align="center" data-valign="middle">This issue</th><th data-field="bytb" data-align="center" data-valign="middle">Year-year</th><th data-field="byhb" data-align="center" data-valign="middle">MoQ</th></tr></thead><tbody><tr><td>Incoming coal volume</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>Incoming coal volume</td><td>76573</td><td><i class='glyphicon glyphicon-arrow-down'></i>4.21</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-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>Incoming coal volume</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'></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-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-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-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-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-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></tbody></table></div>
Example 2: Requirements: There is a custom cell that displays progress after the second table, and the first row requires a total statistical display. These two functions require using js to set custom rows and columns.
html code:
<div><table data-toggle="table" data-height="268" 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">Supplier</th><th data-field="pz" data-align="center" data-valign="middle">Variety</th><th data-field="rz" data-align="center" data-valign="middle">Carbon 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">Unit coal</th><th data-field="drlm" data-align="center" data-valign="middle">Cumulative 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 planned volume</th><th data-field="yjhjd" data-align="center" data-valign="middle" data-formatter="progress">monthly planned completion progress</th></tr></thead><tbody><tr><td>2</td><td>Shuangxin 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 Co., Ltd.</td><td>Engineering coal</td><td></td><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></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></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>Medium and high sulfur 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>Shuangxin 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>Shuangxin Mining</td><td>Low-sulfur coal</td><td></td><td></td><td></td><td></td><td></td><td>6686.08</td><td>30000</td><td>22%</td></tr><tt><td>9</td><td>Shuangxin 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></tbody></table></div>
js code:
//Declare the variable used to count the total (accumulated coal, monthly plan) var yjhArr=[];var ljlmArr=[];//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>"}//Method for calculating the total 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 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 parameter row in the progress() method will be executed once every row is generated and the object of the row is passed in when the table generates rows.
Two: js method
Through this method, it is very convenient to set parameters for the table, which is very convenient to process data, especially when setting the request method and address. However, this project is just a static page for the time being. Please write the data in the future.
Example 1: Same as above
html:
<div><table id="tableL01"></table></div>
js:
//Table plugin (Table 1) starts $('#tableL01').bootstrapTable({height:268,//Simulated 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',colspan:3}],[{align:'center',valign:'middle',field: 'drbq',title: 'this issue'}, {align:'center',valign:'middle',field: 'drtb',title: 'year-on-year',formatter:trend},{align:'center',valign:'middle',field: 'drhb',title: 'momentum',formatter:trend}, {align:'center',valign:'middle',field: 'bzbq',title: 'this issue'}, {align:'center',valign:'middle',field: 'bztb',title: 'Year-on-year',formatter:trend},{align:'center',valign:'middle',field: 'bzhb',title: 'Moon-month',formatter:trend},{align:'center',valign:'middle',field: 'bybq',title: 'This issue'},{align:'center',valign:'middle',field: 'bytb',title: 'Year-on-year',formatter:trend},{align:'center',valign:'middle',field: 'bytb',title: 'Year-on-year',formatter:trend},{align:'center',valign:'middle',field: 'byhb', title: 'Mono-month',formatter:trend}]],data:[{id:1,lhc:'coming 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:'coming stock',drbq:'21341',drtb:'0.21',d rhb:'0.33',bzbq:'35624',bztb:'1.62',bzhb:'3.16',bybq:'42613',bytb:'2.78',byhb:'1.59'},{id:3,lhc:'ent 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:4,lhc:'Come in 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:5,lhc:'Come in 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:6,lhc:'enter 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'},{i d:7,lhc:'Come in 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:8,lhc:'Come in 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:9,lhc:'ent 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:'ent stock',d rbq:'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:'coming 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:12,lhc:'enter 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'}]});//Simulation data end//Add function on the up and down floating arrow style trend(value,row){var trendIcon=row.id%2===0?'glyphicon glyphicon-arrow-down':'glyphicon glyphicon-arrow-up';return "<i class='"+trendIcon+"'></ i>"+value}//Table plugin endsAnalysis: $('#tableL01').bootstrapTable({}) is the flag at the beginning of the plug-in, adding the table parameters, and then in data: is the table data, and in columns, it is the place where column parameters and table data are set. The representative thing about this item is that the table header is divided into two parts, so two arrays need to be added to columns [{}] and [{}]. All of them were written in an array before, and the source code traversed the length of columns
Example 2:
The same HTML requires only a table tag with id
js:
//Table plugin (Table 2) starts //Declare the variables used to count the total (accumulated coal, monthly plan) var yjhArr=[];var ljlmArr=[];$('#tableL02').bootstrapTable({height:268,//Simulated 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: 'Variety'},{align:'center',valign:'middle',field: 'rz',title: 'caloric value'},{align:'center',valign:'middle',field: 'mj',title: 'coal price'},{align:'center',valign:'middle',field: 'bmdj',title: 'standard coal unit price'},{align:'center',valign:'middle',field: 'drlm',title: 'coal coming to the day'},{align:'center',valign:'middle',field: 'ljlm',title: 'coal coming to the day'},{align:'center',valign:'middle',field: 'ljlm',title: 'Cumulative coal coming'},{align:'center',valign:'middle',field: 'yjhl',title: 'monthly planned volume'},{align:'center',valign:'middle',field: 'yjhjd',title: 'Monthly planned completion progress',formatter:progress}],data:[{id:2,gys:'Shuangxin Mining',pz:'low sulfur coal',rz:'',mj:'',bmdj:'',drlm:'',ljlm:'6686.08',yjhl:'30000',yjhjd:'22%'},{id:3,gys:'Yitai Co., Ltd.',pz:'engineering coal',rz:'',mj:'',bmdj:'',d rlm:'',ljlm:'51888.72',yjhl:'70000',yjhjd:'74%'},{id:4,gys:'Jiayuan Company',pz:'Medium and high sulfur coal',rz:'',mj:'',bmdj:'',drlm:'',ljlm:'20041.86',yjhl:'90000',yjhjd:'100%'},{id:5,gys:'Aidi Energy',pz:'low sulfur coal',rz:'',m j:'',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-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%'}]});//Simulation data end//Show custom column function of progress bar 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>"}//Method for calculating the total 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 i=0; 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 much different from the first method, it is just that you put the custom columns in the data and set them. It's easier to understand. For other parameters, please refer to the official website. The data is dynamic and how to add it online. There are many examples, as long as they are placed in .bootstrapTable ({})
The above is the adaptive fixed header of the BootStrap table form plug-in introduced by the editor (super useful). I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!