简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  Detailed explanation of JavaScript BootStrap Table background data binding, special column processing, and sorting functions

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

黄舟
黄舟Original
2017-05-28 10:29:352220browse

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: &#39;#&#39;,
    title: &#39;control&#39;,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