Detailed explanation of JavaScript BootStrap Table background data binding, special column processing, and sorting functions

This section mainly introduces the background of BootstrapData binding, special column processing and column sorting functions. The code is simple and easy to understand, very good, and has reference value. It is needed Friends, please refer to it

This section mainly introduces Bootstrap’s background data binding, special column processing and column sorting functions

1. Data binding

Generally when doing programming, it is rare to use json files to directly bind data. Basically we use programming language to obtain data and do data binding.

Place a Table control

<table id="table" ></table>

Code to call javascript

<script >
$(&#39;#table&#39;).bootstrapTable({
  url: &#39;tablejson.jsp&#39;,  //数据绑定，后台的数据从jsp代码
  search:true,      
  uniqueId:"Id",
  pageSize:"5",
  pageNumber:"1",
  sidePagination:"client",
  pagination:true,
  height:&#39;400&#39;,
  columns: [
  {
    field: &#39;Id&#39;,
    title: &#39;中文&#39;
  }, {
    field: &#39;Name&#39;,
    title: &#39;Name&#39;
  }
  , {
    field: &#39;Desc&#39;,
    title: &#39;Desc&#39;
  }
  ],
});

2. Special column Processing

In practical applications, we need to add our special columns, such as operation columns. See the following js code to add a special column

{
    field: '#',
    title: 'control',formatter:function(value,row,index){
    var del=&#39;<a href="Delete!delete.action?Id=&#39;+row.Id+&#39;" rel="external nofollow" rel="external nofollow" >删除</a>&#39;;
    var updt=&#39;<a href="supdate.jsp?Id=&#39;+row.Id+&#39;" rel="external nofollow" rel="external nofollow" >修改</a>&#39;;
    var add=&#39;<a href="Include.jsp?Id=&#39;+row.Id+&#39;" rel="external nofollow" rel="external nofollow" >增加</a>&#39;
    return del+" "+updt+"&nbsp"+add;
    }
  }

js The code is modified to

An in-depth analysis of the Bootstrap list group component
Detailed explanation of JavaScript function currying
Complete example of JS password generation and strength detection (with demo source code download)
Angularjs integrates WeChat UI (weui)
How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills