BootStrap table使用

bootstrap table git address

https://github.com/wenzhixin/bootstrap-table

 

引入文件

<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="../bower_components/bootstrap-table-develop/dist/bootstrap-table.min.css"/> 
<script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../bower_components/bootstrap-table-develop/dist/bootstrap-table.js"></script>
<script type="text/javascript" src="../bower_components/bootstrap-table-develop/dist/locale/bootstrap-table-zh-CN.js"></script>

 

 

使用方式

<table data-toggle="table" data-url="data.json">
            <thead>
                ...    
            </thead>
</table>

 

or

<table id="table" class="mychar1-table"></table>
$('#table').bootstrapTable({
          url: 'data.json' 
 }); 

 

 

 

第二種更好理解點：

var $table = $('#mychart1');
$table.bootstrapTable({
url: reqprojectname_w+'list/spectrumlist', 
dataType: "json",
toolbar: '#toolbar',                //工具按鈕用哪一個容器
striped: true,                      //是否顯示行間隔色
singleSelect: false,
pagination: true, //分頁
pageNumber:1,                       //初始化加載第一頁，默認第一頁
pageSize: 10,                       //每頁的記錄行數（*）
pageList: [10, 25, 50, 100],        //可供選擇的每頁的行數（*）
search: false, //顯示搜索框
sidePagination: "server", //服務端處理分頁
      columns: [{
          field: 'id',
          title: '序號'
      }, {
          field: 'liushuiid',
          title: '交易編號'
      }, {
          field: 'orderid',
          title: '訂單號'
      }, {
          field: 'receivetime',
          title: '交易時間'
      }, {
          field: 'price',
          title: '金額'
      }, {
          field: 'coin_credit',
          title: '投入硬幣'
      },  {
          field: 'bill_credit',
          title: '投入紙幣'
      },  {
          field: 'changes',
          title: '找零'
      }, {
          field: 'tradetype',
          title: '交易類型'
      },{
          field: 'goodmachineid',
          title: '貨機號'
      },{
          field: 'inneridname',
          title: '貨道號'
      },{
          field: 'goodsName',
          title: '商品名稱'
      }, {
          field: 'changestatus',
          title: '支付'
      },{
          field: 'sendstatus',
          title: '出貨'
      },
              {
                  title: '操做',
                  field: 'id',
                  align: 'center',
                  formatter:function(value,row,index){  
                       var e = '<a href="#" mce_href="#" onclick="edit(\''+ row.id + '\')">編輯</a> ';  
                       var d = '<a href="#" mce_href="#" onclick="del(\''+ row.id +'\')">刪除</a> ';  
                    return e+d;  
                } 
              }
          ]
  });

 

 

 

詳細介紹

$(function () {
 
        //1.初始化Table
        var oTable = new TableInit();
        oTable.Init();
 
        //2.初始化Button的點擊事件
        /* var oButtonInit = new ButtonInit();
        oButtonInit.Init(); */
 
    });
 
 
    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#tradeList').bootstrapTable({
                url: '/VenderManager/TradeList',         //請求後臺的URL（*）
                method: 'post',                      //請求方式（*）
                toolbar: '#toolbar',                //工具按鈕用哪一個容器
                striped: true,                      //是否顯示行間隔色
                cache: false,                       //是否使用緩存，默認爲true，因此通常狀況下須要設置一下這個屬性（*）
                pagination: true,                   //是否顯示分頁（*）
                sortable: false,                     //是否啓用排序
                sortOrder: "asc",                   //排序方式
                queryParams: oTableInit.queryParams,//傳遞參數（*）
                sidePagination: "server",           //分頁方式：client客戶端分頁，server服務端分頁（*）
                pageNumber:1,                       //初始化加載第一頁，默認第一頁
                pageSize: 50,                       //每頁的記錄行數（*）
                pageList: [10, 25, 50, 100],        //可供選擇的每頁的行數（*）
                strictSearch: true,
                clickToSelect: true,                //是否啓用點擊選中行
                height: 460,                        //行高，若是沒有設置height屬性，表格自動根據記錄條數以爲表格高度
                uniqueId: "id",                     //每一行的惟一標識，通常爲主鍵列
                cardView: false,                    //是否顯示詳細視圖
                detailView: false,                   //是否顯示父子表
                columns: [{
                    field: 'id',
                    title: '序號'
                }, {
                    field: 'liushuiid',
                    title: '交易編號'
                }, {
                    field: 'orderid',
                    title: '訂單號'
                }, {
                    field: 'receivetime',
                    title: '交易時間'
                }, {
                    field: 'price',
                    title: '金額'
                }, {
                    field: 'coin_credit',
                    title: '投入硬幣'
                },  {
                    field: 'bill_credit',
                    title: '投入紙幣'
                },  {
                    field: 'changes',
                    title: '找零'
                }, {
                    field: 'tradetype',
                    title: '交易類型'
                },{
                    field: 'goodmachineid',
                    title: '貨機號'
                },{
                    field: 'inneridname',
                    title: '貨道號'
                },{
                    field: 'goodsName',
                    title: '商品名稱'
                }, {
                    field: 'changestatus',
                    title: '支付'
                },{
                    field: 'sendstatus',
                    title: '出貨'
                },]
            });
        };
 
        //獲得查詢的參數
      oTableInit.queryParams = function (params) {
            var temp = {   //這裏的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也須要改爲同樣的
                limit: params.limit,   //頁面大小
                offset: params.offset,  //頁碼
                sdate: $("#stratTime").val(),
                edate: $("#endTime").val(),
                sellerid: $("#sellerid").val(),
                orderid: $("#orderid").val(),
                CardNumber: $("#CardNumber").val(),
                maxrows: params.limit,
                pageindex:params.pageNumber,
                portid: $("#portid").val(),
                CardNumber: $("#CardNumber").val(),
                tradetype:$('input:radio[name="tradetype"]:checked').val(),
                success:$('input:radio[name="success"]:checked').val(),
            };
            return temp;
        };
        return oTableInit;
    };

 

請求參數

oTableInit.queryParams = function (params) {
            var temp = {   //這裏的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也須要改爲同樣的
                limit: params.limit,   //第幾條記錄
                offset: params.offset,  //顯示一頁多少記錄
                sdate: $("#stratTime").val(),
 
            };
            return temp;
        };

 

 

後臺拼裝測試數據

JSONArray jsonData=new JSONArray();
        JSONObject jo=null;
        for (int i=0,len=10;i<len;i++){
            jo=new JSONObject();
            jo.put("id",  i+(j++));
            jo.put("liushuiid", i+1);
            jo.put("price", 100);
            jo.put("mobilephone",10);
            jo.put("receivetime", 10);
            jo.put("tradetype",  10);
            jo.put("changestatus", "成功");
            jo.put("sendstatus", "失敗");
            jo.put("bill_credit", 10);
            jo.put("goodroadid", 10);
            jo.put("SmsContent", 10);
            jo.put("orderid",  10);
            jo.put("goodsName",  10);
            jo.put("inneridname", 10);
            jo.put("xmlstr", 10);
            jsonData.add(jo);
        }
        int TotalCount=97;
        JSONObject jsonObject=new JSONObject();
        jsonObject.put("rows", jsonData);//JSONArray
        jsonObject.put("total",TotalCount);//總記錄數
        

 

分頁接收

int pageindex=0;
int offset = ToolBox.filterInt(json1.getString("offset"));
int limit = ToolBox.filterInt(json1.getString("limit"));   
if(offset !=0){
    pageindex = offset/limit;
}
    pageindex+= 1;//第幾頁<br>...

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