bootstrap table demo

js 代码

//搜索
        function searchTable(){
                var searchInfo = $("#searchForm").serializeJsonObject();
        initTable(searchInfo);
    }
        
        //初始化表格
        function initTable (visitor) {
                //初始化表格时清掉ID数组里的值
                hmdId = [];
                hmdIdResult = [];
                $('#exampleTableEvents').bootstrapTable('destroy');
                $('#exampleTableEvents').bootstrapTable({
                url: serverPath+"/hmdList/init", // 服务器数据的加载地址
                        method : 'post', // 提交方式
                        queryParams : function(params) {
                                if(visitor == null){
                                        return {
                                                pageSize : params.limit,
                                                pageNumber : params.offset
                                        };
                                }else{
                                        visitor["pageNumber"] = params.offset;
                                        visitor["pageSize"] = params.limit;
                                        return visitor;
                                }
                        },
                        contentType : "application/x-www-form-urlencoded;charset=UTF-8", // 发送到服务器的数据编码类型
                        sidePagination : "server",//分页方式：client客户端分页，server服务端分页（*）
                        trimOnSearch : false,//允许空字符搜索
                        pagination : true,//是否开启分页 底部显示
                        search : false,//是否启用搜索框
                        showRefresh : false,//是否显示刷新按钮。
                        showToggle : false,//是否显示切换视图（table/card）按钮。
                        showColumns : false,//是否显示内容列下拉框。
                        pageSize : 100,//如果设置了分页，页面数据条数
                        pageNumber : 1,//如果设置了分页，首页页码
                        pageList : [],//每页条数
                        toolbar : $("#tableTool"), // 设置工具栏
                        toolbarAlign : 'left', // 工具栏位置
                        height : 430, // 表格的高度
                        undefinedText: '-', // 当数据为 undefined 时显示的字符。
                        striped: true, // 隔行变色
                        iconsPrefix:'glyphicon', // 字体库
                        cache:false, // ajax缓存  设置为 false 禁用 AJAX 数据缓存
                        clickToSelect:true, // 设置 true 将在点击行时，自动选择 rediobox 和 checkbox。
                        maintainSelected:true,
                        rowStyle : function rowStyle(row, index){
                            return { 
                                css: {"padding-top":"0px!important","padding-bottom":"0px!important","font-size":"14px"}
                                }; },
                        onLoadSuccess : function(data) {
                        },
                        onLoadError : function(data) {
                        },
                        columns : [ {
                                title : '全选',
                                field : 'check',
                                checkbox : true
                        }, {
                                title : '姓名',
                                field : 'name',
                                align : 'center'
                        }, {
                                title : 'undefinedText',
                                field : 'sss',
                                align : 'center'
                        },{
                                title : '性别',
                                field : 'gender',
                                align : 'center'
                        }, {
                                title : '年龄',
                                field : 'age',
                                align : 'center'
                        }, {
                                title : '民族',
                                field : 'nation',
                                align : 'center'
                        }, {
                                title : '证件类型',
                                field : 'id_cardType',
                                align : 'center'
                        }, {
                                title : '证件号码',
                                field : 'id_card',
                                align : 'center'
                        }, {
                                title : '联系方式',
                                field : 'phone',
                                align : 'center'
                        }, {
                                title : '录入时间',
                                field : 'input_time',
                                align : 'center',
                                
                        }, {
                                title : '详细',
                                field : 'id',
                                align : 'center',
                                formatter : function(value, row, index) {
                                        //value：当前field的值
                                        //row：当前行的数据
                                        //通过formatter可以自定义列显示的内容
                                        var a = '<span  class = "toWhite" onclick = "showDetail('+row.id+')">查看</span>  ';
                                        var b = '<span  class = "toWhite" \
                                                onclick = "readyToEdit('+row.id+')">编辑</span>';
                                        return a+b;
                                }
                        } ],
                        onCheck : function(row) {
                                hmdId.push(row.id);

                        },
                        onUncheck : function(row) {
                                for (var i = 0; i < hmdId.length; i++) {
                                        if (hmdId[i] == row.id) {
                                                hmdId.splice(i, 1);
                                        }
                                }
                        },
                        onCheckAll:function(rows){
                                $("#exampleTableEvents>tbody>tr").addClass("selected");
                                for (var j = 0; j < rows.length; j++) {
                                        hmdId.push(rows[j].id);
                                }
                        },
                        onUncheckAll:function(rows){
                                $("#exampleTableEvents>tbody>tr").removeClass("selected");
                                for (var j = 0; j < rows.length; j++) {
                                        for (var i = 0; i < hmdId.length; i++) {
                                                if (hmdId[i] == rows[j].id) {
                                                        hmdId.splice(i, 1);
                                                }
                                        }
                                }
                        }
                });
        };