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);

Related articles: