BootStrap table 數據填充與分頁應用總結

BootStrap table 是一個輕量級的table插件，使用AJAX獲取JSON格式的數據，其分頁和數據填充很方便，支持國際化。最近后臺使用此插件做了一個表格應用，做個總結。

1.使用方法?
可以通過又拍云提供的CDN獲取js插件，樣式表和國際化插件，或者直接去官網下載。將下面的js插件和樣式放到html head 頭里即可使用。

//樣式
 


//國際化，表格漢化

2.table 數據填充

BootStrap table獲取數據有兩種方式，一是通過table 的data-url屬性指定數據源，而是通過JavaScript初始化表格時指定url來獲取數據，如下示例。

                ...    
            

$('#table').bootstrapTable({
          url: 'data.json' 
 }); 

第二種方式交第一種而言在處理復雜數據時更為靈活，一般使用第二種方式來進行table數據填充。

var $table = $('#table');
    $table.bootstrapTable({
    url: "duoBaoActivityList", 
    dataType: "json",
    pagination: true, //分頁
    singleSelect: false,
    data-locale:"zh-US" , //表格漢化
    search: true, //顯示搜索框
    sidePagination: "server", //服務端處理分頁
          columns: [
                  {
                    title: '活動名稱',
                      field: 'name',
                      align: 'center',
                      valign: 'middle'
                  }, 
                  {
                      title: '狀態(tài)',
                      field: 'status',
                      align: 'center',
                      valign: 'middle',
                  }, 
                  {
                      title: '參與人數',
                      field: 'participationCounts',
                      align: 'center'
                  },
                  {
                      title: '總人數',
                      field: 'totalCounts',
                      align: 'center'
                  },
                  {
                      title: '開始時間',
                      field: 'startTime',
                      align: 'center',
                  },
                  {
                      title: '操作',
                      field: 'id',
                      align: 'center',
                      formatter:function(value,row,index){  
                   var e = '編輯 ';  
                   var d = '刪除 ';  
                        return e+d;  
                    } 
                  }
              ]
      });

field字段必須與服務器端返回的字段對應才會顯示出數據。

3.分頁與搜索

分頁時BootStrap table 向后端傳遞兩個分頁字段：limit， offset ,前者表示每頁的個數，默認為10個，后者表示分頁時數據的偏移量。?
而搜索時則向后端傳遞的是search字段，表示具體的搜索內容。?
服務器端返回的數據中還要包括page（頁數），total（數據總量）兩個字段，前端要根據這兩個字段分頁。

最終具體顯示效果如下圖所示：?