bootstrapTable服务端控制分页，无法正常显示的问题解决

最新推荐文章于 2023-04-08 16:03:18 发布

原创最新推荐文章于 2023-04-08 16:03:18 发布 · 3.5k 阅读

0 ·

CC 4.0 BY-SA版权

JAVA 专栏收录该内容

11 篇文章

订阅专栏

在使用bootstrapTable进行服务端分页时遇到问题，offset始终为零，导致所有分页请求返回第一页数据。经过排查，发现是前端初始化设置中queryParamsType设为“undefined”，移除或注释该设置后恢复正常。分享此解决方案，帮助遇到同样问题的开发者避免浪费时间。

我用 bootstrapTable进行分页操作，发现接收到的offset始终是零，所以导致无论点哪个分页都是第一页数据。研究了半天，发现问题出在前端。在初始化定义时候，多了 queryParamsType: "undefined"的定义。也就是默认不分页传参都不定义类型，从而导致BUG。把改行去掉或注释掉，就正常了。具体如下代码：

  <script>
            var $table = $('#table');
            $(function () {
                // bootstrap table初始化
                $table.bootstrapTable({
                    url: '${basePath}/manage/task/mytodolist',
                    height: getHeight(),
                    striped: true,
                    search: false,
                    showRefresh: true,
                    showColumns: true,
                    minimumCountColumns: 2,
                    clickToSelect: true,
                    detailView: false,
                    detailFormatter: 'detailFormatter',
                    pagination: true,
                    paginationLoop: false,
                    sidePagination: 'server',
                    silentSort: false,
                    smartDisplay: false,
                    escape: true,
                    searchOnEnterKey: true,
                    idField: 'taskId',
                    maintainSelected: true,
                    toolbar: '#toolbar',
                   // queryParamsType: "undefined",
                    queryParams: function (params) {
                        var str_search = $('#txt_search_key').val();
                        return {
                            offset: params.offset,
                            limit: params.limit,
                            search: str_search
                        };
                    },
                    columns: [
                        {field: 'ck', checkbox: true},
                        {field: 'taskId', title: '编号', align: 'center'},
                        {field: 'title', title: '任务名称'},
                        {field: 'initiatorRealname', title: '发起人', align: 'center'},
                        {field: 'responsiblemanRealname', title: '责任人', align: 'center'},
                        {field: 'executorRealname', title: '执行人', align: 'center'},
                        {field: 'taskSourceName', title: '任务来源', align: 'center'},
                        {field: 'taskTypeName', title: '任务类型', align: 'center'},
                        {field: 'taskStatusName', title: '任务状态', align: 'center'},
                        {field: 'priorityName', title: '优先级', align: 'center'},
                        {field: 'action', title: '操作', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}
                    ]
                });
            }
            );
            // 格式化操作按钮
            function actionFormatter(value, row, index) {
                return [
                    '<a class="update" href="javascript:;" onclick="viewAction()" data-toggle="tooltip" title="查看"><i class="glyphicon glyphicon-eye-open"></i></a>　'
                ].join('');
            }

            // 查看单条记录            
            function viewAction() {
                var rows = $table.bootstrapTable('getSelections');
                if (rows.length != 1) {
                    $.confirm({
                        title: false,
                        content: '请选择一条记录！',
                        autoClose: 'cancel|3000',
                        backgroundDismiss: true,
                        buttons: {
                            cancel: {
                                text: '取消',
                                btnClass: 'waves-effect waves-button'
                            }
                        }
                    });
                } else {
                    window.open('${basePath}/manage/task/taskinfo?sourceid=5&taskId=' + rows[0].taskId);
                    //window.open('${basePath}/manage/task/taskinfo');
                }
            }


            //折叠查询条件
            $('#collapseone').collapse('hide');

            function search() {

                // 刷新表格  
                $('#table').bootstrapTable('refresh');

            }

            //初始化搜索框
            $('#txt_search_key_placeholder').text("任务编号、任务名称");
        </script>

问题解决了，不愿意独享，特分享大家，避免走弯路。