Bootstrap-Table学习笔记
前言
依赖
示例
客户端分页
客户端分页需要服务器端返回的数据格式是一个**数组**
// 初始化表格 var columns = [ {field: 'selectItem', radio: true}, {title: '反馈时间', field: 'createTime', visible: true, align: 'center', valign: 'middle'}, {title: '用户ID', field: 'createUser.id', visible: true, align: 'center', valign: 'middle'}, {title: '用户名称', field: 'createUser.realName', visible: true, align: 'center', valign: 'middle'}, {title: '用户反馈图片1', field: 'feedbackImgOne', visible: false, align: 'center', valign: 'middle'}, {title: '用户反馈图片2', field: 'feedbackImgTwo', visible: false, align: 'center', valign: 'middle'}, {title: '用户反馈图片3', field: 'feedbackImgThree', visible: false, align: 'center', valign: 'middle'}, {title: '用户反馈时间', field: 'createTime', visible: true, align: 'center', valign: 'middle'}, {title: '处理内容', field: 'dealWithContent', visible: true, align: 'center', valign: 'middle'}, { title: '状态', field: 'hasDealWith', visible: true, align: 'center', valign: 'middle', formatter:function (value, row, index) { if(value==0) return "未处理"; else return "已处理"; } }, {title: '操作',field:'ID', visible: true, align: 'center', valign: 'middle', formatter: function () { return '<button type="button" onClick="#" class="btn btn-xs btn-primary" data-toggle="modal" data-target="#consumeModal">处理</button>'; }} ]; //先销毁表格 $('#tableId').bootstrapTable('destroy'); //初始化表格 $('#tableId').bootstrapTable({ // 请求地址 url: Feng.ctxPath + "/opinion-feedback/query-opinion-feedback", // 请求方式 method: "get", // 请求内容类型 contentType: "application/x-www-form-urlencoded", // 数据类型 dataType: "json", // 是否显示行间隔色 striped: true, // 是否启用排序 sortable: true, // 排序方式 sortOrder: "asc", // 是否使用缓存 cache: false, // 每行的唯一标识 // uniqueId: "id", // 指定工具栏 toolbar: "#toolbar", // 显示刷新按钮 showRefresh: false, // 切换显示样式 showToggle: false, // 默认显示详细视图 cardView: false, // 是否显示搜索 // search: true, // 是否显示分页 pagination: true, // 是否启用点击选中行 clickToSelect: true, // 最少要显示的列数 // minimumCountColumns: 2, // 显示隐藏列 showColumns: false, // cell没有值时显示 undefinedText: '-', // 分页方式：client客户端分页，server服务端分页 /** 指定。注意，这两种后台传过来的json数据格式也不一样 client : 正常的json array格式 [{},{},{}] server： {“total”:0,”rows”:[]} 其中total表示查询的所有数据条数，后面的rows是指当前页面展示的数据 量。 */ sidePagination: "client", // 每页的记录行数 pageSize: 1, // 初始化加载第1页，默认第1页 pageNumber: 1, // 可供选择的每页的行数 pageList: "[10, 20, 50, 80, 100]", paginationFirstText: "首页", paginationPreText: "上一页", paginationNextText: "下一页", paginationLastText: "末页", paginationLoop: false, // 分页条无限循环，默认为true // 按钮样式 buttonsClass: 'btn', // 分页器class iconSize: 'pager', // 查询条件 queryParams: function (params) { var hasDealWithVal = $('#hasDealWithId').val(); var temp = { hasDealWith: hasDealWithVal, pageNo: params.offset/params.limit +1, pageSize: params.limit }; // 时间 var startDateVal = $('#startDateId').val(); if (startDateVal){ startDateVal = dateFormat(new Date(startDateVal), 'yyyy/MM/dd'); temp.startDate = startDateVal } var endDateVal = $('#endDateId').val(); if (endDateVal){ endDateVal = dateFormat(new Date(endDateVal), 'yyyy/MM/dd'); temp.endDate = endDateVal; } return temp; }, // 列 columns: columns, onLoadSuccess: function (res) { // 加载成功时 console.log(res); }, onLoadError: function (statusCode) { return "加载失败了" }, formatLoadingMessage: function () { // 正在加载 return "拼命加载中..."; }, formatNoMatches: function () { // 没有匹配的结果 return '无符合条件的记录'; } });
服务器端分页
服务器端分页，需要使用 responseHandler 设置 total 和 rows
responseHandler: function (res) { var temp = { // 下面这两个参数是必须有的, 名称不能变 // 总的数量 total : res.total, // 数据 rows : res.content }; return temp; },
示例
// 初始化表格 var columns = [ {field: 'selectItem', radio: true}, {title: '反馈时间', field: 'createTime', visible: true, align: 'center', valign: 'middle'}, {title: '用户ID', field: 'createUser.id', visible: true, align: 'center', valign: 'middle'}, {title: '用户名称', field: 'createUser.realName', visible: true, align: 'center', valign: 'middle'}, {title: '用户反馈图片1', field: 'feedbackImgOne', visible: false, align: 'center', valign: 'middle'}, {title: '用户反馈图片2', field: 'feedbackImgTwo', visible: false, align: 'center', valign: 'middle'}, {title: '用户反馈图片3', field: 'feedbackImgThree', visible: false, align: 'center', valign: 'middle'}, {title: '用户反馈时间', field: 'createTime', visible: true, align: 'center', valign: 'middle'}, {title: '处理内容', field: 'dealWithContent', visible: true, align: 'center', valign: 'middle'}, { title: '状态', field: 'hasDealWith', visible: true, align: 'center', valign: 'middle', formatter:function (value, row, index) { if(value==0) return "未处理"; else return "已处理"; } }, {title: '操作',field:'ID', visible: true, align: 'center', valign: 'middle', formatter: function () { return '<button type="button" onClick="#" class="btn btn-xs btn-primary" data-toggle="modal" data-target="#consumeModal">处理</button>'; }} ]; function tableFun(queryParams){ //先销毁表格 $('#tableId').bootstrapTable('destroy'); //初始化表格 $('#tableId').bootstrapTable({ //表格参数 //请求地址,此处数据为本地加载 url: Feng.ctxPath + "/opinion-feedback/query-opinion-feedback", //请求方式 method: "get", //请求内容类型 contentType: "application/x-www-form-urlencoded", //数据类型 dataType: "json", //是否显示行间隔色 striped: true, //是否启用排序 sortable: true, //排序方式 sortOrder: "asc", //是否使用缓存 cache: false, //每行的唯一标识 // uniqueId: "id", //指定工具栏 toolbar: "#toolbar", //显示刷新按钮 showRefresh: false, //切换显示样式 showToggle: false, //默认显示详细视图 cardView: false, //是否显示搜索 // search: true, //是否显示分页 pagination: true, //是否启用点击选中行 clickToSelect: true, //最少要显示的列数 // minimumCountColumns: 2, //显示隐藏列 showColumns: false, //cell没有值时显示 undefinedText: '-', //分页方式：client客户端分页，server服务端分页 /* 指定。注意，这两种后台传过来的json数据格式也不一样 client : 正常的json array格式 [{},{},{}] server： {“total”:0,”rows”:[]} 其中total表示查询的所有数据条数，后面的rows是指当前页面展示的数据量。*/ sidePagination: "server", //查询条件 queryParams: function (params) { var hasDealWithVal = $('#hasDealWithId').val(); var temp = { hasDealWith: hasDealWithVal, pageNo: params.offset/params.limit +1, pageSize: params.limit }; // 时间 var startDateVal = $('#startDateId').val(); if (startDateVal){ startDateVal = dateFormat(new Date(startDateVal), 'yyyy/MM/dd'); temp.startDate = startDateVal } var endDateVal = $('#endDateId').val(); if (endDateVal){ endDateVal = dateFormat(new Date(endDateVal), 'yyyy/MM/dd'); temp.endDate = endDateVal; } return temp; }, // 请求成功后,渲染表格 responseHandler: function (res) { var temp = { // 下面这两个参数是必须有的, 名称不能变 // 总的数量 total : res.total, // 数据 rows : res.content }; return temp; }, //每页的记录行数 pageSize: 20, //初始化加载第1页，默认第1页 pageNumber: 1, //可供选择的每页的行数 pageList: "[10, 20, 50, 80, 100]", paginationFirstText: "首页", paginationPreText: "上一页", paginationNextText: "下一页", paginationLastText: "末页", paginationLoop: false, // 分页条无限循环，默认为true //按钮样式 buttonsClass: 'btn', //分页器class iconSize: 'pager', //查询条件 queryParams: queryParams, //列参数 //表头 columns: columns, onLoadSuccess: function (res) {//可不写 //加载成功时 console.log(res); }, onLoadError: function (statusCode) { return "加载失败了" }, formatLoadingMessage: function () { //正在加载 return "拼命加载中..."; }, formatNoMatches: function () { //没有匹配的结果 return '无符合条件的记录'; } }); } // 初始化请求数据 $(function () { var temp = { hasDealWith: 0 }; tableFun(temp) });
