欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Bootstrap table兩種分頁示例

 更新時(shí)間:2016年12月23日 15:07:00   作者:A__yes  
這篇文章主要為大家詳細(xì)介紹了Bootstrap table兩種分頁示例,服務(wù)器端分頁和客戶端分頁,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

Bootstrap table服務(wù)器端分頁和客戶端分頁,供大家參考,具體內(nèi)容如下

服務(wù)器端分頁

注意服務(wù)器端數(shù)據(jù)的返回的格式

[json]必須包含:total節(jié)點(diǎn)(總記錄數(shù)),rows節(jié)點(diǎn)(分頁后數(shù)據(jù))
即:{“total”:24,”rows”:[…]}

 $('#test-table').bootstrapTable({
  //請(qǐng)求方法
 method: 'get',
  //是否顯示行間隔色
 striped: true,
 //是否使用緩存,默認(rèn)為true,所以一般情況下需要設(shè)置一下這個(gè)屬性(*) 
 cache: false, 
 //是否顯示分頁(*) 
 pagination: true, 
  //是否啟用排序 
 sortable: false, 
  //排序方式 
 sortOrder: "asc", 
 //初始化加載第一頁,默認(rèn)第一頁
 //我設(shè)置了這一項(xiàng),但是貌似沒起作用,而且我這默認(rèn)是0,- -
 //pageNumber:1, 
 //每頁的記錄行數(shù)(*) 
 pageSize: 10, 
 //可供選擇的每頁的行數(shù)(*) 
 pageList: [10, 25, 50, 100],
 //這個(gè)接口需要處理bootstrap table傳遞的固定參數(shù),并返回特定格式的json數(shù)據(jù) 
 url: "/test/testtable.action",
 //默認(rèn)值為 'limit',傳給服務(wù)端的參數(shù)為:limit, offset, search, sort, order Else
 //queryParamsType:'', 
 ////查詢參數(shù),每次調(diào)用是會(huì)帶上這個(gè)參數(shù),可自定義  
 queryParams: queryParams : function(params) {
  var subcompany = $('#subcompany option:selected').val();
  var name = $('#name').val();
  return {
  pageNumber: params.offset+1,
  pageSize: params.limit,
  companyId:subcompany,
  name:name
  };
 },
 //分頁方式:client客戶端分頁,server服務(wù)端分頁(*)
 sidePagination: "server",
 //是否顯示搜索
 search: false, 
 //Enable the strict search. 
 strictSearch: true,
 //Indicate which field is an identity field.
 idField : "id",
 columns: [{
  field: 'id',
  title: 'id',
  align: 'center'
 }, {
  field: 'testkey',
  title: '測試標(biāo)識(shí)',
  align: 'center'
 }, {
  field: 'testname',
  title: '測試名字',
  align: 'center'
 },{
  field: 'id',
  title: '操作',
  align: 'center',
  formatter:function(value,row,index){
  //通過formatter可以自定義列顯示的內(nèi)容
  //value:當(dāng)前field的值,即id
  //row:當(dāng)前行的數(shù)據(jù)
  var a = '<a href="" >測試</a>';
  } 
 }],
 pagination:true
 });

客戶端分頁

將sidePagination屬性設(shè)為“client”即可

服務(wù)器返回json數(shù)據(jù)必須包含data節(jié)點(diǎn)(展示數(shù)據(jù))

當(dāng)數(shù)據(jù)量較少,只有上千條數(shù)據(jù)時(shí),一次性將所有數(shù)據(jù)返回給客戶端,無論點(diǎn)下一頁,或搜索條件時(shí),不向服務(wù)端發(fā)請(qǐng)求,實(shí)現(xiàn)全文檢索。

如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附3個(gè)精彩的專題:

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap Table使用教程

Bootstrap插件使用教程

以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論