bootstrapTable--1.服务器端分页

最新推荐文章于 2025-05-26 16:42:37 发布

原创最新推荐文章于 2025-05-26 16:42:37 发布 · 600 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种基于Bootstrap Table插件实现财务记录分页查询的方法。通过前端JavaScript与后端交互，完成数据的动态加载及条件筛选。文章详细展示了初始化表格、数据格式化、查询功能的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 html

一个预存放的表格

2 pageBean

3 初始化数据

3.1 Js

3.1.1 预加载

/*初始化table数据*/
$(function() {
    var globalType,globalId,globalHotelId;   //全局变量

    globalId = ${existUser.id};
    globalHotelId = ${existUser.hotelId};

    $("#financial").bootstrapTable({
        url: '${path}/financial/getFinaNoteList.do',        //请求地址
        contentType: "application/x-www-form-urlencoded",   //发送的编码类型，必须要有！

        showRefresh:true,                        //是否显示 刷新按钮

        pagination:true,                         //分页
        pageNumber:1,                             //如果设置了分页，首页页码
        pageSize:10,                               //如果设置了分页，页面数据条数
        sidePagination: 'server',          //分页方式：client客户端分页，server服务端分页（*）
        pageList: [10, 20, 30, 40,50],              //如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。

        dataField: "res",//（前端分页，后端分页）这里使用后端分页，后端分页时需返回含有
                            // total：总记录数,这个键值好像是固定的
        responseHandler:function(res){
            return res;                     //在ajax获取到数据，渲染表格之前，修改数据源
        },

        queryParamsType:'',
        queryParams: function queryParams(params) {
            var param= {
                pageNumber: params.pageNumber,      //当前页
                pageSize: params.pageSize,          //每页大小
                id: ${existUser.id},
                hotelId: ${existUser.hotelId}
            };
            return param;
        },

        columns: [
            {
                field: 'state',
                checkbox: 'true'
            }, {
                field: 'fnId',
                title: '编号',
                align: 'center'
            }, {
                field: 'hotelName',
                title: '提现至',
                align: 'center'
            },{
                field: 'money',
                title: '金额',
                align: 'center',
                formatter:priceFormatter
            },{
                field: 'gmt_create',
                title: '申请时间',
                align: 'center',
                formatter:startDateFormatter
            },{
                field: 'status',
                title: '状态',
                align: 'center',
                formatter:statusFormatter
            },{
                field: 'bankName',
                title: '提现至银行',
                align: 'center'
            },{
                field: 'phone',
                title: '处理人',
                align: 'center',
                formatter:phoneFormatter
            },{
                field: 'noPassNote',
                title: '未通过原因',
            }
        ]
    });
});    //向服务器发送保存标签的请求

3.1.2 格式化参数

3.2 Controller接受

3.3 service

3.4 dao

3.4.1 总记录数

3.4.2 实体类

4 条件查询

4.1 Js

//条件查询---点击确认查询封装数据并向服务器发送请求
function getFinaNoteListByCondition(){
    var id = ${existUser.id};
    var hotelId = ${existUser.hotelId};
    var status = $('#status').val().trim();
    var beginDate=$('#beginDate').val().trim();
    var endDate=$('#endDate').val().trim();

    var pageSize = $(".page-size")[0].firstChild.data;
    var pageNumber = $(".page-number.active a").text();

    //进行验证
    //将数据封装成json
    var json={};
    json['id']= id;
    json['hotelId']=hotelId;
    json['status']=status;
    json['beginDate']=beginDate;
    json['endDate']=endDate;
    json['pageSize']=pageSize;
    json['pageNumber']=pageNumber;
    //发送请求
    $.ajax({
        url: '${path}/financial/getFinaNoteListByCondition.do',
        type: 'post',
        data: JSON.stringify(json),
        contentType:'application/json',
        timeout: 20000,
        success: function (data) {
            //手动加载数据
            $("#financial").bootstrapTable("load",data);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("访问后台发生错误:" + XMLHttpRequest.status)
        }
    });
}