springboot整合bootstrap pagehelper分页插件 mybaties 做多表头表格查询列表

1，页面效果

页面html 首先引入js bootstrap bootstrap-table

</div>

function grlnzh(record) {
$('#lnjfxxDataGrid').bootstrapTable('destroy');
_dwxxcx.companyDataGrid(record);
}

var _dwxxcx = {

companyDataGrid:function (record){
$('#lnjfxxDataGrid').bootstrapTable({
method: 'post',
url: "grkszr/grkszr/searchgrzhList", // 请求路径
striped: true, // 是否显示行间隔色
pageNumber: 1, // 初始化加载第一页
pagination: true, // 是否分页
sidePagination: 'server', // server:服务器端分页|client：前端分页
pageSize: 5, // 单页记录数
// contentType:"application/x-www-form-urlencoded",
cache: false,
pageList: [5, 10, 20],
// showRefresh : true,// 刷新按钮
queryParams: function(params) { // 上传服务器的参数
/*var temp = {

// offset: params.offset,
// limit: params.limit,
//companyName:record.companyName
// viewReason: $("#viewReason").val(),

};
return temp;*/
                   var params = JSON.parse(JSON.stringify(params));
                   params.grid='101011294406';
                   params.xxbbh=record;
                   return params;

columns: [

[{"title": " 历年缴费及个人账户记账信息", "halign": "center", "align": "center", "colspan": 40}],
[
{title: 'id', field: 'id', visible: false, colspan: 1, rowspan: 2},
{title: '序号', align: 'center',visible: false, valign: 'middle', width: '5%', sortable: true, colspan: 1, rowspan: 2,
formatter: function(value, row, index) {
return index + 1;
}
},
{title: '参保地区', field: 'XZQH', align: 'center', valign: 'middle', colspan: 2, rowspan: 1},
{title: '年份', field: 'NIAN', align: 'center', valign: 'middle', sortable: true, colspan: 1, rowspan: 2, width: '8%'},
{title: '缴费起止时间', field: 'QZRQ', align: 'center', valign: 'middle', sortable: true, colspan: 1, rowspan: 2, width: '8%'},
{title: '缴费月数', field: 'YS', align: 'center', valign: 'middle', sortable: true, colspan: 1, rowspan: 2, width: '8%'},
{title: '月缴费基数', field: 'YJFJS', align: 'center', valign: 'middle', sortable: true, colspan: 1, rowspan: 2, width: '8%'},
{title: '缴费比例', field: 'jfbl', align: 'center', valign: 'middle', colspan: 3, rowspan: 1},
{title: '当年记账金额', field: 'dnjzje', align: 'center', valign: 'middle', colspan: 2, rowspan: 1},
{title: '当年记账利息', field: 'dnjzlx', align: 'center', valign: 'middle', colspan: 2, rowspan: 1},
{title: '至本年末账户累计存储额', field: 'zbcce', align: 'center', valign: 'middle', colspan: 2, rowspan: 1},
{title: '备注', field: 'BZ', align: 'center', valign: 'middle', formatter: formatSex, sortable: true, colspan: 1, rowspan: 2, width: '8%'}
],
[
                   {field: 'XZQH', title: '行政区<br>划代码', align: 'center', valign: 'middle', width: '6%', sortable: true},
{field: 'XZQH', title: '名称', align: 'center', valign: 'middle', width: '6%', sortable: true},
                   {field: 'DWJFBL', title: '单位', align: 'center', valign: 'middle', width: '6%', sortable: true},
{field: 'DWHZBL', title: '划入个人账户比例', align: 'center', valign: 'middle', width: '6%', sortable: true},
{field: 'GRJFBL', title: '个人', align: 'center', valign: 'middle', width: '6%', sortable: true},
                   {field: 'DNGRJF', title: '单位', align: 'center', valign: 'middle', width: '6%', sortable: true},
{field: 'DNJZJE', title: '小计', align: 'center', valign: 'middle', width: '6%', sortable: true},
{field: 'DNZHLX', title: '#个人缴费', align: 'center', valign: 'middle', width: '6%', sortable: true},
{field: 'DNJZLX', title: '小计', align: 'center', valign: 'middle', width: '6%', sortable: true},
{field: 'ZBNMLJGRJF', title: '#个人缴费', align: 'center', valign: 'middle', width: '6%', sortable: true},
{field: 'ZBNMLJZHJE', title: '小计', align: 'center', valign: 'middle', width: '6%', sortable: true}
]
]

});
}

}

后台java

@RequestMapping("/grkszr/searchgrzhList")
@ResponseBody
public R getGrzhlist(@RequestBody Map<String, Object> params) {

   //{order=asc, offset=0, limit=5, grid=101011294406, xxbbh=12600470}
   //int offset = ((int)params.get("pageNumber")-1)*(int)params.get("pageSize");
   int offset = (int)params.get("offset");
   Page<Object> page = PageHelper.offsetPage(offset,(int)params.get("limit"));
   List<Map> list = grglService.getGrzhlist(params);//此处mybaties获取数据

   return R.ok().put("rows", list).put("total", page.getTotal());

返回此格式数据

{"msg":"success","total":22,"code":0,"rows":[{"DNJZJE":0,"GRID":"101011294406","DNGRJF":0,"NIAN":"2012","ZHLB":"0","QZRQ":"2012.12-2012.12","DWJFBL":0,"ROW_ID":21,"XZQH":"210199","ZBNMLJZHJE":24244.79,"CWID":"10101049851370","QRQ":"2012.12","DNJZLX":0,"YJFJS":0,"DNGRLX":0,"ZRQ":"2012.12","YS":0,"ZBNMLJGRJF":20656.8,"GRJFBL":0},{"DNJZJE":0,"GRID":"101011294406","DNGRJF":0,"NIAN":"2013","ZHLB":"0","QZRQ":"2013.12-2013.12","DWJFBL":0,"ROW_ID":22,"XZQH":"210199","ZBNMLJZHJE":25197.3,"CWID":"10101049851370","QRQ":"2013.12","DNJZLX":0,"YJFJS":0,"DNGRLX":0,"ZRQ":"2013.12","YS":0,"ZBNMLJGRJF":21472.16,"GRJFBL":0}]}
}

springboot整合bootstrap pagehelper分页插件 mybaties 做多表头表格查询列表

相关推荐