bootstrap表格

bootstrap表格

1、表格插件
官方下載地址
中文幫助文檔
2、實際應用
採用jquery調用表格，代碼如下：
html：

<table data-toggle="table" id="deviceTable">
</table>

js：

    var $table = $('#deviceTable');
    $table.bootstrapTable({
    url: "data/device2.json", 
    dataType: "json",
    pagination: true, //分頁
    pageList:[5,6],
    pageSize:6,
    singleSelect: false,
    idField:"id",
    sidePagination: "client", //客戶端處理分頁()
          columns: [
                  {
                    title: '設備名稱',
                      field: 'name',
                      align: 'center',
                      valign: 'middle'
                  }, 
                  {
                      title: 'ip地址',
                      field: 'ip',
                      align: 'center',
                      valign: 'middle',
                  }, 
                  {
                      title: '描述',
                      field: 'description',
                      align: 'center'
                  },
                  {
                      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;  
                    } 
                  }
              ]
      });

    客戶端處理時數據格式爲json數組：

[
    {"id":"1","name":"NT890","ip":"192.168.21.45","description":"描述信息"},
    {"id":"2","name":"NT123","ip":"192.168.21.45","description":"描述信息"}
]

    需要注意的是當採用server處理分頁時數據格式爲：

{"rows":[
    {"id":"1","name":"NT890","ip":"192.168.21.45","description":"描述信息"},
    {"id":"2","name":"NT123","ip":"192.168.21.45","description":"描述信息"}
],
"total":？,
"page":？
}