使用BootStrapTable 进行分页查询时后端接口数据正常前端表单没有展现数据，或展现数据为空问题

本人在使用BootStrapTable 进行分页查询时，前端表单数据老是缺失，
在参考一些博客的叙述后，虽然数据有时展现数据，但数据不稳定，也会出现为空现象参考博客如下：
https://www.cnblogs.com/java-spring/p/10180048.html

随后我整理一下相应的总结，总体程序如下所示：

数据库端：

本人在测试时使用的Oracle数据库分页

    <!--分页查询-->
    <select id="QueryBypagination" resultType="com.zkxy.btb.core.tabledto.B_zfkmsz" parameterType="Integer">

                select *
                from (select a.*, rownum rnum
                from (select *
                from B_zfkmsz) a
                where <![CDATA[rownum <= #{end}]]> )
                where <![CDATA[rnum > #{start}]]>

    </select>

映射接口相对于方法：

List<B_zfkmsz> QueryBypagination(@Param("start")Integer start,@Param("end") Integer end);

服务端：

业务层方法：

 //分页查询
    @Override
    public List<B_zfkmsz> QueryBypagination(Integer offset, Integer limit)
    {

        //分页数据判断
        /**
         * 前端传来的数据为偏移量（从第几个数据开始查询）和每一页的数据量的大小
         * 后端需要的数据为偏移量（从第几个数据开始查询）和到第几个数据结束
         *
         * start(数据查询从那开始查询) = offset
         * end(数据查询到哪里结束) = offset+limit(开始的数据+当前数据量的大小)
         *
         */
        Integer start = offset;
        Integer end = limit+offset;

        List<B_zfkmsz> b_zfkmszs = b_zfkmszMapper.QueryBypagination(start, end);

        return b_zfkmszs;
    }

Contraller层方法：

//进行分页查询
    @RequestMapping("paginate")
    @ResponseBody
    public Object pagination(@RequestParam("offset") Integer offset, @RequestParam("limit") Integer limit)
    {
        List<B_zfkmsz> b_zfkmszs = zfkxService.QueryBypagination(offset,limit);
        Integer count = zfkxService.findNumber();
        PageBean pageBean = new PageBean();

        pageBean.setRows(b_zfkmszs);
        pageBean.setTotal(count);

        return pageBean;
    }

返回到前端所需要的类：PageBean

public class PageBean<T>
{
    /** 行实体类 */
    private List<T> rows = new ArrayList<T>();
    /** 总条数 */
    private int total;

    public PageBean() {
        super();
    }

    public List<T> getRows() {
        return rows;
    }

    public void setRows(List<T> rows) {
        this.rows = rows;
    }

    public int getTotal() {
        return total;
    }

    public void setTotal(int total) {
        this.total = total;
    }
}

注意该类的属性值最后是rows和total,因为前端固定接受这两个属性，如果不是则需要在前端responseHandler中进行处理

前端：

html:
现在html添加表单标签

   <table id="eventTable"/>

引入相对应的js文件：

<link href="../css/bootstrap-table.css" rel="stylesheet">
<script src="../js/bootstrap-table.js"></script>
<script src="../js/bootstrap-table-zh-CN.js"></script>

主要的核心在JS文件如下所示:

$(function()
{

    //调用函数，初始化表格
    initTable();
    //当创建一个按钮点击进行刷新页面
    $("#refash").bind("click", function () {
        $("#eventTable").bootstrapTable('refresh');
    });

});

//初始化BootStrapTable表格数据
function initTable() {
    //先销毁表格
    $('#eventTable').bootstrapTable('destroy');
    $('#eventTable').bootstrapTable({
        url: "/zfkx/paginate",//请求后台的URL（*）
        method: 'get',//请求方式
        contentType: "application/x-www-form-urlencoded",
        dataType: "json",
        dataField: 'rows',
        striped: true,//设置为 true 会有隔行变色效果
        undefinedText: "空",//当数据为 undefined 时显示的字符
        pagination: true, //设置为 true 会在表格底部显示分页条。
        showToggle: "true",//是否显示 切换试图（table/card）按钮
        showColumns: "true",//是否显示 内容列下拉框
        pageNumber: 1,//初始化加载第一页，默认第一页
        pageSize: 10,//每页的记录行数（*）
        pageList: [10, 20, 30, 40],//可供选择的每页的行数（*），当记录条数大于最小可选择条数时才会出现
        paginationPreText: '上一页',
        paginationNextText: '下一页',
        search: false, //是否显示表格搜索,bootstrap-table服务器分页不能使用搜索功能，可以自定义搜索框，上面jsp中已经给出，操作方法也已经给出
        striped : true,//隔行变色
        showColumns: false,//是否显示 内容列下拉框
        showToggle: false, //是否显示详细视图和列表视图的切换按钮
        clickToSelect: true,  //是否启用点击选中行
        data_local: "zh-US",//表格汉化
        sidePagination: "server", //服务端处理分页
        queryParamsType : "limit",//设置为 ‘limit’ 则会发送符合 RESTFul 格式的参数.
        queryParams: function (params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的
//            请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
//　　　　　　　queryParamsType = 'limit' ,返回参数必须包含limit, offset, search, sort, order
//            queryParamsType = 'undefined', 返回参数必须包含: pageSize, pageNumber, searchText, sortName, sortOrder.
//            返回false将会终止请求。
            return {//这里的params是table提供的
                offset: params.offset,//从数据库第几条记录开始
                limit: params.limit//找多少条
                // memberId: $("#searchString_id").val() //这个就是搜索框中的内容，可以自动传到后台，搜索实现在xml中体现
            };
        },
        responseHandler: function (result)
        {
            //如果后台返回的json格式不是{rows:[{...},{...}],total:100},可以在这块处理成这样的格式
            var isjsonStr = isJsonString(result);

            //判断后端传递的数据是否为json字符串，如果不是则直接返回，
            // 如果是,先将json字符串解析成Json格式的对象然后返回数据
            if (!isjsonStr)
            {
                var newjson = JsonArray(result.rows);

                return {
                    "rows": newjson.rows,
                    "total": result.total
                };
            }else{
                //先将json字符串解析成Json格式的对象然后返回数据
                var r = $.parseJSON(result);

                var newjson = JsonArray(r.rows)

                return {
                    "rows": newjson.rows,
                    "total": r.total
                };
            }

        },
        columns: [ {
            checkbox: true
        },{
            field : 'id',
            title : '编号',
            align : 'center'
        }, {
            field : 'zffs',
            title : '支付号',
            align : 'center'
        }, {
            field : 'fsmc',
            title : '支付方式',
            align : 'center'
        }, {
            field : 'zfkm',
            title : '收款号',
            align : 'center'
        },
        {
            field : 'kmmc',
            title : '收款方式',
            align : 'center'
        },{
            field : 'compid',
            title : '指定的id',
            align : 'center',
            width : '280px',
        }],
        onLoadSuccess: function ()
        {
           // alert("数据加载成功");
        },
        onLoadError: function ()
        {
            // alert("数据加载失败");
        }
    });
}

//判断某个字符串是否为json字符串格式的数据
function isJsonString(str) {
    try {
        if (typeof JSON.parse(str) == "object") {
            return true;
        }
    } catch(e) {
    }
    return false;

}


//将一个数组里的每个json对象的属性值都变为小写
// 并将该数组返回到一个属性为rows的Json新对象当中
function JsonArray(array)
{
    var newArray = [];
    var newRows = {};
    for(var i=0;i<array.length;i++)
    {
        var newjson = JsonKeysToLowCase(array[i]);
        newArray.push(newjson);
    }
    newRows.rows = newArray;

    return newRows;
}


//将Json的属性值全部转换成小写，并返回新的Json对象
function JsonKeysToLowCase(JsonObject)
{

    var newJson ={};
    for(i in JsonObject)
    {
        var newVlue = JsonObject[i];
        var newKey = i.toLowerCase();

        newJson[newKey] = newVlue;

    }

    return newJson;
}

总结：
1、首先前端要渲染的属性值要与后端返回的要保持一致，
2、在responseHandler中进行处理数据，要确保后端返回的数据在rows中，返回的数据总数量的在total中，如果没有这两个属性然后在前端重新定义，
3、后端传递的数据可能为字符串格式，如果是字符串格式则需要使用 $.parseJSON(result)进行转换成json格式，否则表单则可能会出现没有匹配的数据;
4、如果返回的属性和js当中的属性大小写不一致的话可能会将会返回数据为空，处理大小写后在返回

以上就是我个人遇到的问题和一些总结，希望能给大家带来一些帮助！