表格插件-bootstrap table的使用示例

最新推荐文章于 2020-11-13 16:32:14 发布

原创最新推荐文章于 2020-11-13 16:32:14 发布 · 307 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap table #前台页面 #java

bootstrap table 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何使用Bootstrap Table插件创建动态表格，包括引入文件、页面布局、JS配置及实现分页、排序等功能，适用于快速搭建响应式数据展示界面。

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

官网地址：http://bootstrap-table.wenzhixin.net.cn/zh-cn/

一、使用步骤

1、在官网上下载相关的文件，在页面引入：

<link rel="stylesheet"href="${request.contextPath}/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" href="${request.contextPath }/libs/bootstrap/3.3.7/css/bootstrap-theme.min.css">

<script src="${request.contextPath }/libs/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
	<script src="${request.contextPath }/libs/bootstrap-table/1.12.1/bootstrap-table.min.js" ></script>
	<script src="${request.contextPath }/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js" ></script>

2、页面<body>部分代码

一般都是通过url请求本地json格式数据，所以在这不再展示死数据的呈现方式。

<div class="ibox-content">
	<table id="table"></table>
</div>

3、js的配置

<script type="text/javascript">
$(function () {
    //1.初始化Table
    var oTable = new TableInit();
    oTable.Init();

    //2.初始化Button的点击事件
    var oButtonInit = new ButtonInit();
    oButtonInit.Init();
});


var TableInit = function () {
    var oTableInit = new Object();
    //初始化Table
    oTableInit.Init = function () {
        $('#table').bootstrapTable({
            url: '${request.contextPath }/system/sysUser/selectAll',         //请求后台的URL（*）
            method: 'get',                      //请求方式（*）
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            contentType : "application/x-www-form-urlencoded",
            pagination: true,                   //是否显示分页（*）
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParamsType: "",
            queryParams: oTableInit.queryParams,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            //height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "userId",                     //每一行的唯一标识，一般为主键列
            showToggle:false,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            columns:[{
                checkbox: true
            },{
                field: 'userId',
                title: '序号'
            }, {
                field: 'userName',
                title: '管理员名称'
            }, {
                field: 'userLoginName',
                title: '登录名'
            }, {
                field: 'userDeptName',
                title: '部门名称'
            },{
                field: 'userPhone',
                title: '电话'
            },{
                field: 'userStatus',
                title: '状态'
            },],
            onEditableSave: function (field, row, oldValue, $el) {
                $.ajax({
                    type: "post",
                    url: "/demo/stu/edit",
                    data: { strJson: JSON.stringify(row) },
                    success: function (data, status) {
                        if (status == "success") {
                            alert("编辑成功");
                        }
                    },
                    error: function () {
                        alert("Error");
                    },
                    complete: function () {

                    }
                });
            }            
        });
    };

    //得到查询的参数
   oTableInit.queryParams = function (params) {
       //alert(JSON.stringify(params));
        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            pageSize:params.pageSize, 
            pageNumber:params.pageNumber
            //departmentname: $("#txt_search_departmentname").val(),
           // statu: $("#txt_search_statu").val()
        };
        return temp;
    };
    return oTableInit;
};


var ButtonInit = function () {
    var oInit = new Object();
    var postdata = {};

    oInit.Init = function () {
        //初始化页面上面的按钮事件
    };

    return oInit;
};
</script>

二、页面效果