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

1,页面效果

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

              <div style="width:1000px;">
                 <table id="lnjfxxDataGrid" class="table table-hover"></table>
 

               </div>

 

js 

 

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}]}
    }

 

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页