#1 bootstrap从入门到精通--bootstrap初始化表格方法

一、导入js和css

<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/bootstrap-table.css">
<!-- 使用bootstrap表单需要jQuery框架来支持 -->
<script src="${pageContext.request.contextPath}/bootstrap/jquery-1.9.1.min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap/bootstrap-table.js"></script>
<!-- bootstrap中文包，使得消息提示被汉化 -->
<script src="${pageContext.request.contextPath}/bootstrap/bootstrap-table-zh-CN.js"></script>

二、定义bootstrap表格初始化方法

/**
@functionname:initTable
@description:表格初始化数据方法
@author:yzh
@param:params
@date:2018-07-08
*/
function initTable(params){
    $('#table').bootstrapTable({
        url : params.url,//请求后台的URL（*） 
        method : 'get', //请求方式（*）
        pagination : true, //是否显示分页（*）
        sortable : false, //是否启用排序
        sortOrder : "asc", //排序方式
        sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
        pageNumber : 1, //初始化加载第一页，默认第一页
        pageSize : 10, //每页的记录行数（*）
        pageList : [ 10, 25, 50, 100 ], //可供选择的每页的行数（*）
        height : 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        columns :params.columns,//表格
        //自定义url参数
        queryParams:function(data){
            var param={
                     "rm":new Date().getTime(),
                     "pageSize":data.limit,
                     "pageNo":data.offset/data.limit+1,
                     "params[search]":data.search,
                     "params[sort]":data.sort,
                     "params[order]":data.order,
                     "params[assetId]":''
            };
            return param;
        },
        //获取后台返回的数据（否则使用服务器分页显示不了数据）
        responseHandler:function(res){
            if (res) {
                return res.data;
            }
        }
    })
}

三、测试

<table id="table"></table>
<script type="text/javascript">
    //初始化Table
    var t = setTimeout(function() {
        initTable({
            url : '${pageContext.request.contextPath}/list/listUserInfos.action', //请求后台的URL（*） 
            columns : [ {//定义选择按钮
                checkbox : true,
                title : 'rowCheck'
            },{
                field : 'userName',
                title : '用户名',
                align : 'center'
            }, {
                field : 'password',
                title : '密码',
                align : 'center'
            }, {
                field : 'age',
                title : '年龄',
                align : 'center'
            }, {
                field : 'sex',
                title : '性别',
                align : 'center'
            }, {
                field : 'tel',
                title : '手机号',
                align : 'center'
            }, {
                field : 'email',
                title : '邮箱',
                align : 'center'
            } ]
        });
    }, 300);
</script>