bootstrap table Operation Skills Sharing
- 2021-07-21 07:08:17
- OfStack
This article example for everyone to share bootstrap table operation related skills, for your reference, the specific content is as follows
Source code
html code:
<table id="agenttable" data-toggle="table"
data-pagination="true" data-cache="false"
data-height="800" data-show-columns="true"
data-smart-display = "true"
data-async = false
data-query-params="bh_agt_queryParams"
data-search="true"
data-sortable="true"
data-show-export="true"
data-show-refresh="true"
data-page-size="15"
data-page-list="[15,30,60,120]"
data-response-handler="bh_agt_bootstrapresp"
data-row-style="table_rowFormatter"
>
<thead>
<tr>
<th data-field="id" data-align="center" data-sortable="true" bgcolor="#FF0000">id</th>
<th data-field="name" data-align="center" data-sortable="true"> Name </th>
<th data-field="agentip" data-align="center" data-sortable="true">ip</th>
<th data-field="country" data-align="center" data-sortable="true"> State </th>
<th data-field="province" data-align="center" data-sortable="true"> Province </th>
<th data-field="city" data-align="center" data-sortable="true"> City </th>
<th data-field="carrier" data-align="center" data-sortable="true"> Provider </th>
</tr>
</thead>
</table>
js code:
// Generate background data request parameters. Background can be used request.getParameter Get
var bh_agt_queryParams=function(params){
var tmp = bt_bhagent_paras// Externally generated json Format parameter
bt_bhagent_paras={}
return tmp
}
var bh_agt_bootstrapresp=function(data){
bt_bhagent_list = data;
// This is the entry function after dynamically loading data.
// You can right here data Go on 2 Secondary machining generation retdata .
// You can also start other related actions here, such as drawing echart Figure.
return retdata
}
// Formatting a single row of data , You can return a variety of css
var table_rowFormatter = function(row, index){
if (row.succ == "SUCCESS"){
return { classes: 'success' };
}else if (row.succ == "NOTING"){
return { classes: 'warning' };
}
return { classes: 'danger' };
}
// Loading Table Data
var bh_table_update = function(refresh,filter){
if (refresh){
$('#'+ filter.eTable).bootstrapTable('refresh',{
url: filter.tableUrl
});
}else{
$('#'+ filter.eTable).bootstrapTable({
url: filter.tableUrl
});
}
}
Knowledge point description
bootstrapTable ('refresh', {url: filter. tableUrl}); will fail on the first load of data. The first load of data cannot take an refresh action. When the data is not loaded for the first time, the refresh action must be performed, otherwise the data will not be updated to the table. If you load existing data directly to, you need to use load action. For example: bootstrapTable ("load", data);