亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Bootstrap table兩種分頁示例

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

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

服務器端分頁

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

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

 $('#test-table').bootstrapTable({
  //請求方法
 method: 'get',
  //是否顯示行間隔色
 striped: true,
 //是否使用緩存,默認為true,所以一般情況下需要設置一下這個屬性(*) 
 cache: false, 
 //是否顯示分頁(*) 
 pagination: true, 
  //是否啟用排序 
 sortable: false, 
  //排序方式 
 sortOrder: "asc", 
 //初始化加載第一頁,默認第一頁
 //我設置了這一項,但是貌似沒起作用,而且我這默認是0,- -
 //pageNumber:1, 
 //每頁的記錄行數(shù)(*) 
 pageSize: 10, 
 //可供選擇的每頁的行數(shù)(*) 
 pageList: [10, 25, 50, 100],
 //這個接口需要處理bootstrap table傳遞的固定參數(shù),并返回特定格式的json數(shù)據(jù) 
 url: "/test/testtable.action",
 //默認值為 'limit',傳給服務端的參數(shù)為:limit, offset, search, sort, order Else
 //queryParamsType:'', 
 ////查詢參數(shù),每次調(diào)用是會帶上這個參數(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服務端分頁(*)
 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: '測試標識',
  align: 'center'
 }, {
  field: 'testname',
  title: '測試名字',
  align: 'center'
 },{
  field: 'id',
  title: '操作',
  align: 'center',
  formatter:function(value,row,index){
  //通過formatter可以自定義列顯示的內(nèi)容
  //value:當前field的值,即id
  //row:當前行的數(shù)據(jù)
  var a = '<a href="" >測試</a>';
  } 
 }],
 pagination:true
 });

客戶端分頁

將sidePagination屬性設為“client”即可

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

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

如果大家還想深入學習,可以點擊這里進行學習,再為大家附3個精彩的專題:

Bootstrap學習教程

Bootstrap實戰(zhàn)教程

Bootstrap Table使用教程

Bootstrap插件使用教程

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

相關文章

最新評論