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":？
}