bootstrap-table 常用用法

页面效果：

导入资源：

html代码：

js代码：

$('#mytab').bootstrapTable({
    method: 'POST',
    url: "/queryAll",//请求路径
    striped: true, //是否显示行间隔色
    pageNumber: 1, //初始化加载第一页
    pagination: true,//是否分页
    sidePagination: 'client',//server:服务器端分页|client：前端分页
    pageSize: 5,//单页记录数
    pageList: [5, 10, 20, 30],//可选择单页记录数
    showRefresh: true,//刷新按钮
    columns: [{
        title: '书名',
        field: 'bookName',
        sortable: true
    }, {
        title: '作者',
        field: 'bookAuthor',
        sortable: true
    }, {
        title: '类别',
        field: 'bookType',
    }, {
        title: '价格',
        field: 'bookPrice',
    }, {
        title: '出版时间',
        field: 'publicationTime',
    }, {
        title: '操作    添加图书',
        field: 'publicationTime',
        formatter: operation,//对资源进行操作
    }]
});

function operation(value, row, index) {
    var htm = "删除 " +
        "修改"
    return htm;

需要注意的是operation带有三个参数。其中row 代表着这一行数据，用row["---"]这种形式就可以取出这一行的值，index代表着这一行的索引，就算跳转到第二页不会从0重新开始，依然会接着第一页最后数据的索引。

 /query返回的结果：

移除所有table数据：

$("#mytab").bootstrapTable('removeAll');

增加row行数据：

for (i = 0; i < data_obj.length; i++) {
    var _data = {
       "bookName": data_obj[i]["bookName"],
       "bookAuthor": data_obj[i]["bookAuthor"],
       "bookType": data_obj[i]["bookType"],
       "bookPrice": data_obj[i]["bookPrice"],
       "publicationTime": data_obj[i]["publicationTime"],
   }

    $("#mytab").bootstrapTable('append', _data);

}