jQuery数据表格控件boostrap-table

表格初始化js代码

function TableInit() {
         $("#edit").attr({"disabled":"disabled"});
         $("#delete").attr({"disabled":"disabled"});
        $('#list').bootstrapTable({
            url : 'sysRightObject/dataTable', //请求后台的URL（*）
            dataType: "json",//数据类型
            method : 'get', //请求方式（*）
            toolbar : '#toolbar', //工具按钮用哪个容器
            striped : true, //是否显示行间隔色
            cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination : true, //是否显示分页（*）
            sortable : false, //是否启用排序
            sortOrder : "asc", //排序方式
            queryParams : function queryParams(params) {
                var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                    limit : params.limit, //第几条记录
                    offset : params.offset, //显示一页多少记录
                    objectName: $("#txtRightObjectName").val(),
                    objectCode:$("#txtRightObjectCode").val(),
                    objectParentCode : $("#txtRightObjectParentCode").val(),
                    objectTypeCode:$("#txtRightObjectTypeCode").val()
                };
                return temp;
            }, //传递参数（*）
            queryParamsType : "limit",
            sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
            pageNumber : 1, //初始化加载第一页，默认第一页
            pageSize : 10, //每页的记录行数（*）
            pageList : [ 10, 25, 50, 100 ], //可供选择的每页的行数（*）
            search : true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch : true,
            showColumns : true, //是否显示所有的列
            showRefresh : true, //是否显示刷新按钮
            minimumCountColumns : 2, //最少允许的列数
            clickToSelect : true, //是否启用点击选中行
            height : 600, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId : "objectCode", //每一行的唯一标识，一般为主键列
            showToggle : true, //是否显示详细视图和列表视图的切换按钮
            cardView : false, //是否显示详细视图
            detailView : false, //是否显示父子表
            columns : [ {
                checkbox : true
            }, {
                field : 'objectCode',
                title : '权限代码'
            }, {
                field : 'objectName',
                title : '权限名称'
            }, {
                field : 'objectDescribe',
                title : '权限描述'
            }, {
                field : 'objectParentCode',
                title : '上级权限代码'
            }, {
                field : 'objectTypeCode',
                title : '权限类型代码'
            }, {
                field : 'url',
                title : 'URL'
            }, {
                field : 'useFlag',
                title : '是否可用'
            }, {
                field : 'displaySn',
                title : '显示序号'
            } ],
            onCheck : function() {
                $("#edit").removeAttr("disabled");
                 $("#delete").removeAttr("disabled");
            },
            onCheckAll : function() {
                $("#edit").removeAttr("disabled");
                 $("#delete").removeAttr("disabled");
            },
            onUncheckAll : function() {
                $("#edit").attr({"disabled":"disabled"});
                 $("#delete").attr({"disabled":"disabled"});
            },
            onUncheck : function() {
                var selectRow = $("#list").bootstrapTable('getSelections');
                if(selectRow.length<1){
                    $("#edit").attr({"disabled":"disabled"});
                     $("#delete").attr({"disabled":"disabled"});
                }
            }
        });
    }

html代码

        <div id="toolbar" class="btn-group">
            <button onclick="new_click();" id="new" type="button"
                class="btn btn-default">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button onclick="edit_click();" id="edit" type="button"
                class="btn btn-default">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
            </button>
            <button onclick="delete_click();" id="delete" type="button"
                class="btn btn-default">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
            </button>
        </div>
        <table id="list"></table>

日期显示问题解决

, {
                field: 'createTime',
                title: '创建时间',
                //——修改——获取日期列的值进行转换
                formatter: function (value, row, index) {
                    return jsonDateFormat(value)
                }
            }],

function jsonDateFormat(jsonDate) {
        //json日期格式转换为正常格式
        var jsonDateStr = jsonDate.toString();//此处用到toString（）是为了让传入的值为字符串类型，目的是为了避免传入的数据类型不支持.replace（）方法
        try {
            var k = parseInt(jsonDateStr.replace("/Date(", "").replace(")/", ""), 10);
            if (k < 0)
                return null;

            var date = new Date(parseInt(jsonDateStr.replace("/Date(", "").replace(")/", ""), 10));
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
            var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
            var milliseconds = date.getMilliseconds();
            return date.getFullYear() + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
        }
        catch (ex) {
            return "时间格式转换错误";
        }
    }

直接载入数据方法

$('#list').bootstrapTable('load', toJsonObj);

前端分页数据节点使用‘data’

github:https://github.com/wenzhixin/bootstrap-table

github:https://github.com/wenzhixin/bootstrap-table-examples

参考博客：JS组件系列——表格组件神器：bootstrap table

参考博客： bootStrap table spring mvc 详细运用实例

参考博客：表格组件神器：bootstrap table详细使用指南

参考博客：bootstrap-table表格事件

参考博客：Bootstrap table两种分页示例