bootstrap-table 常用用法

页面效果：

导入资源：

<link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"></link>
<script src="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.14.2/dist/locale/bootstrap-table-zh-CN.min.js"></script>

html代码：

<table id="mytab" class="table table-hover"></table>

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: '操作    <a href="/add_one.xhtml">添加图书</a>',
        field: 'publicationTime',
        formatter: operation,//对资源进行操作
    }]
});

function operation(value, row, index) {
    var htm = "<a href='/delete_one?bookName=" + row["bookName"] + "'>删除</a> " +
        "<a href='/modify_one.xhtml?bookName=" + row["bookName"] + "'>修改</a>"
    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);

}