Guns之——关于bootstrap的分页

一、Bootstrap-table分页有两种：客户端（client）分页和服务端分页

区别：客户端分页是一次性将所有的数据加载到浏览器的缓存中，因此无需服务端进行计算总页数。好处是对于少量数据操作方便。但是对于大数据时，需要用服务端分页，或者客户端联合服务端进行分页。

 

默认是客户端分页，服务端分页要指明是服务端，添加属性如下：

sidePagination : "server",

 

服务端分页：

responseHandler: function(data){
    return data.response;
},

客户端分页，需要指定到rows：

sidePagination : "client",
responseHandler: function(data){
     return data.response.rows;
},

二、使用Bootstrap分页会出现搜索查询分页出现查询为空的情况

原因：会记住上次缓存的页码currentPage

解决：法一：修改bootstrap-table-object.js

/**
 * 刷新 bootstrap 表格
 * Refresh the remote server data,
 * you can set {silent: true} to refresh the data silently,
 * and set {url: newUrl} to change the url.
 * To supply query params specific to this request, set {query: {foo: 'bar'}}
 */
refresh: function (params) {
    if(params !=null&&typeof params!="undefined"){
        this.btInstance.bootstrapTable("refreshOptions",{pageNumber:1});
        this.btInstance.bootstrapTable('refresh',params);
    }else {
        this.btInstance.bootstrapTable('refresh');
        if(this.btInstance.bootstrapTable("getData").length==0&&this.btInstance.bootstrapTable("getOptions").pageNumber!=1){
            this.btInstance.bootstrapTable("prevPage");
            this.btInstance.bootstrapTable('refresh');
        }
    }
}

笔记：1、关于refresh、refreshOptions方法

<table id="event_table"></table>
...
<script>
    $("#event_table").bootstrapTable('refresh', {url: new_url });

    $("#event_table").bootstrapTable('refreshOptions', {url:new_url});
</script>

refresh：从server端重新获取数据。

refreshOptions：更新bootstrapTable options，并从server端获取数据。与refresh的区别在于，refreshOptions设置的option，会被作为下次请求server数据的默认option使用。另外，使用refreshOptions时，注意bootstrapTable的版本，一些老版本不支持该方法。

2、关于修改了refresh之后，我的菜单、部门搜索不生效了。

如上图所示，你可以看到菜单管理是树形的，我从一开始的时候，尝试找对应的refresh进行修改，改了tree-table-object.js中的refresh，emm……然后现在就不生效了，所以，刚刚我又把它改回去了。幸好我机智，在此做个记录……

原tree-table-object.js中的refresh方法：做记录

  /**
         * 刷新表格
         */
        refresh: function (parms) {
            if (typeof parms != "undefined") {
                this.btInstance.bootstrapTreeTable('refresh', parms.query);// 为了兼容bootstrap-table的写法
            } else {
                this.btInstance.bootstrapTreeTable('refresh');
            }
        }
    };

 

原bootstrap的方法：做记录

 

/**
* 刷新 bootstrap 表格
* Refresh the remote server data,
* you can set {silent: true} to refresh the data silently,
* and set {url: newUrl} to change the url.
* To supply query params specific to this request, set {query: {foo: 'bar'}}
*/
refresh: function (parms) {
if (typeof parms != "undefined") {
this.btInstance.bootstrapTable('refresh', parms);
} else {
this.btInstance.bootstrapTable('refresh');
}
}
};

 

法二：搜索的时候，修改搜索的方法（红色部分代码）

 

/**
* 查询表单提交参数对象
* @returns {{}}
*/
OptLog.formParams = function() {
var queryData = {};

queryData['logName'] = $("#logName").val();
queryData['beginTime'] = $("#beginTime").val();
queryData['endTime'] = $("#endTime").val();
queryData['logType'] = $("#logType").val();
queryData['order'] = "desc";
queryData['offset'] = "0";
queryData['limit'] = "10";
return queryData;
}queryData['order'] = "desc";
queryData['offset'] = "0";
queryData['limit'] = "10";
return queryData;
}

 

 

 搜索时候参考的网页：https://blog.csdn.net/Hu_Yanke/article/details/70670314

欢迎加入 CSDN技术交流群：（点击即可加群）QQ群:681223095，方便问题讨论。本博主不一定长期在线，但是qq群里会有很多热心的小伙伴，大家一起讨论解决问题。
关注公众号，更多学习内容给予推送，争取每日更新