bootstrap-table 学习心得_adminlte、restful和bootstap-table实验心得-CSDN博客

本文介绍如何使用 Bootstrap Table 插件实现数据表格的快速搭建，包括必要的文件引入、表格初始化方法及参数配置，并展示了两种表格渲染方式及操作按钮定义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、bootstrap-table使用基础-----必要的引入

<!--样式文件-->
<link href="assets/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
<link href="assets/bootstrap-table-develop/src/bootstrap-table.css" rel="stylesheet">
<!--js文件-->
<script src="js/jquery-2.2.4.js"></script>
<script src="assets/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="assets/bootstrap-table-develop/src/bootstrap-table.js"></script>
<script src="assets/bootstrap-table-develop/src/bootstrap-table-zh-CN.js"></script>
<!-- 自己封装的包含分页和数据请求的初始化 -->
<script src="assets/bootstrap-table-develop/src/bootstrap-table-common.js"></script><script src="assets/bootstrap-table-develop/src/bootstrap-table-common.js"></script>

/**
 * @author     :
 * version     : 
 * description :Encapsulation of common table content
 * 参数说明：id :bootstrap-table id   
 * url         :数据请求url   
 * queryParams : 
 * pagination  : 是否显示分页
 * strictSearch: 是否显示搜索
 */
// 初始化表格
function initTable(id, url, queryParams, pagination, strictSearch) {
    //先销毁表格 
    $('#' + id).bootstrapTable('destroy');
    //初始化表格,动态从服务器加载数据
    $("#" + id).bootstrapTable({
        method              : "get",      // 使用get请求到服务器获取数据 
        url                 : url,        // 获取数据的Servlet地址
        toolbar             : '#toolbar', // 工具按钮用哪个容器
        cache               : false,      // 是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        striped             : true,       // 表格显示条纹 
        pagination          : pagination, // 启动分页
        pageSize            : 15,         // 每页显示的记录数 
        pageNumber          : 1,          // 当前第几页
        search              : true,       // 是否启用查询
        strictSearch        : strictSearch,       // 查询
        showRefresh         : true,       // 显示刷新按钮
        showToggle          : false,      // 是否显示详细视图和列表视图的切换按钮
        showColumns         : true,       // 显示下拉框勾选要显示的列 
        minimumCountColumns : 2,          // 最少允许的列数
        clickToSelect       : true,       // 是否启用点击选中行
        uniqueId            : "ID",       // 每一行的唯一标识，一般为主键列
        cardView            : false,      // 是否显示详细视图
        detailView          : false,      // 是否显示父子表
        sidePagination      : "server",   // 表示服务端请求
        queryParams         : queryParams
    });
}
// 删除表格整行
function onRemove(rowId){
    $('table').bootstrapTable('remove',{
        fild: 'rowId',
        values: rowId
    })
}

二、表格渲染方式：

方式一：

<table class="table table-hover table-responsive table-bordered" id="cusTable"> 
    <thead>
        <tr>
            <th data-field="checkbox" data-checkbox="true"></th>
            <th data-field="projectName">项目名称</th>
            <th data-field="projectType" data-sortable="true">项目类型</th>
            <th data-field="PersonInCharge" data-sortable="true" data-width='200'>负责人</th>
            <th data-field="participants" data-sortable="true" data-width='160'>参与人数</th>
            <th data-field="stopTime" data-sortable="true" data-width='160'>项目结束时间</th>
            <th data-field="option" data-width='60' data-formatter="actionFormatter">操作</th> 
        </tr>
     </thead>
     <tbody></tbody>
</table>

    <script type="text/javascript">
        $(document).ready(function () {
              initTable('cusTable', 'data/data.json', queryParams, true,true);

            //data/data.json 的格式:rows:[],total:,为分页状态
       });
      var queryParams = function(params){
            var param      = { 
                pageNumber : params.offset,
                pageSize   : params.limit,
                sortName   : params.sort
            };
            if (params.sort) {
                param.sortOrder = params.order;
            }
            return param;
        }
       
        // 定义操作按钮
        function actionFormatter(value, row, index) {
            if (row.projectName=="考试系统") {
                return [
                    '<a data-id="' + row.projectName + '" class="edit-action" href="javascript:void(0);" style="cursor:pointer;" title="编辑"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></a>&nbsp;&nbsp;',
                    '<a data-id="' + row.projectName + '" class="trash-action" href="javascript:void(0);" onclick="onRemove('+row.projectName+')"  title="删除"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>'
                ].join('');
            }else{
                return [
                    '<a data-id="' + row.projectName + '" class="trash-action" href="javascript:void(0);" style="cursor:pointer;" title="删除"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>'
                ].join('');
            }
            
        }
    </script>

方式二：

        <table class="table table-hover table-responsive table-bordered" id="table" data-url="data/data.json"> 
            <thead>
                <tr>
                    <th data-field="checkbox" data-checkbox="true"></th>
                    <th data-field="projectName">项目名称</th>
                    <th data-field="projectType" data-sortable="true">项目类型</th>
                    <th data-field="PersonInCharge" data-sortable="true" data-width='200'>负责人</th>
                    <th data-field="participants" data-sortable="true" data-width='160'>参与人数</th>
                    <th data-field="stopTime" data-sortable="true" data-width='160'>项目结束时间</th>
                    <th data-field="option" data-width='60' data-formatter="actionFormatter">操作</th> 
                </tr>
            </thead>
            <tbody></tbody>
        </table>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#table").bootstrapTable({
                //如不设置分页那么数据源不需要totals和rows，只需要data就可以
                pagination: true,
                sidePagination: 'server' // 设置为服务器端分页
            });
        });
       
    </script>

数据源格式：

{
    "total": 20,
    "rows": [
        {
            "projectName": "考试系统", 
            "projectType": "研发类", 
            "PersonInCharge": "项..,刘..",
            "participants": "8",
            "stopTime":"2018-05-01 00:00:00",
            "option":""
        }, 
        {
            "projectName": "ERP", 
            "projectType": "研发类", 
            "PersonInCharge": "邵..,石..,张..,刘..",
            "participants": "8",
            "stopTime": "2017-09-30 00:00:00",
            "option": ""
        }, 
        {
            "projectName": "INS 2.0", 
            "projectType": "研发类", 
            "PersonInCharge": "项..,刘.",
            "participants": "8",
            "stopTime": "2017-12-31 00:00:00",
            "option":""
        }, 
       {
            "projectName": "考试系统", 
            "projectType": "研发类", 
            "PersonInCharge": "项..,刘..",
            "participants": "8",
            "stopTime": "2018-05-01 00:00:00",
            "option":"删除"
        }
    ]
}