Node.js中Bootstrap-table的两种分页的使用方法

1 Bootstrap-table使用

---

• github:https://github.com/wenzhixin/bootstrap-table
• 官方文档：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

bootstrap-table是一个基于bootstrap的表格插件，在使用上有点类似于easyui中的datagrid，但是样式上要比easyui美观一些，而且更加符合现代网站或者系统的前端要求。

不仅如此，bootstrap-table在使用中还有诸多独特之处：

• 自带前端搜索功能，还能定制搜索
• 前端列表详情展示，不仅仅是表格的形式
• 分页更加自由、更加多样化。可以根据不同的需求选择不同的分页方式。

bootstrap-table的使用通过查看官方文档就可掌握，现在主要记录bootstrap-table中独特的、强大的分页功能。

注意： 文中后台逻辑使用Node.js实现，数据库为mongodb

2 bootstrap-table中两种分页

---

bootstrap-table的分页方式是有bootstrap-table中sidePagination属性决定，此属性有两个值，client,server，分别代表前端分页和服务器后端分页。默认值为client 前端分页。

首先在页面中引入必须的插件包，如下：

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<-- 本地化js -->
<script src="bootstrap-table-zh-CN.js"></script>

2.1 前端分页

前端页面代码如下：

$("#gridList").bootstrapTable({
            url:'/user/getUserList',//url获取数据
            method:'get',//方法
            cache:false,//缓存
            pagination:true,//分页
            sidePagination:'client',//指定在前端客户端分页
            pageNumber:1,//页号
            pageSize:10,//页面数据条数
            pageList:[10,20,30,40,50],//分页列表
            uniqueId:'_id',//唯一id
            toolbar:'#toolbar',//工具栏
            showColumns:true,//显示选择列
            showRefresh:true,//显示刷新按钮
            showToggle:true,//显示切换视图：列表和详情视图切换
            search:true,//显示搜索框
            columns:[
                {checkbox:true},
                {field:'user_no',title:'用户编码',width:'10%'},
                {field:'user_name',title:'用户姓名',width:'20%'
                },
                {field:'user_sex',title:'用户性别',width:'8%',align:'center',
                    formatter:function(value,row,index){
                        if(value == '1'){
                            return '男';
                        }else{
                            return '女';
                        }
                    }},
                {field:'user_account',title:'登录账号',width:'10%'},
                {field:'user_role',title:'所属角色',width:'10%'},
                {field:'user_sys',title:'所属系统',width:'10%'},
                {field:'create_time',title:'创建时间',width:'20%',
                    formatter:function(value,row,index){
                        return dateTimeFormatter(value,'yyyy-MM-dd hh:mm:ss');
                    }
                }
            ]
        });

注意： 在前端页面分页中，sidePagination 必须设置为client

部分后台逻辑代码如下：

/******user_route.js*********/
/**
 * 获取用户列表
 */
router.get('/getUserList',function(req,res){
    userServices.getUserList(req,res,function(err,users){
        if(err){
            res.send({success:false,msg:err,data:null});
        }else{
            res.send({'success':true,'msg':"获取用户列表成功",'total':users.length,'data':users});
        }
    });
});

/*******user_services.js********/
/**
 * 获取用户列表
 * @param req
 * @param res
 * @param callback
 */
exports.getUserList = function(req,res,callback){
    userModel.$user.find(function(err,users){
        if(err){
            callback('获取用户列表失败！',null);
        }else{
            callback(null,users);
        }
    })
}

注意： 返回到前端的数据中，必须有 data 参数，bootstrap-table会根据返回的data参数，设置前端分页。data参数值须为一个数组，数组中包含返回的数据。

前端分页在数据较少的时候非常适用，可以减少浏览器请求数，数据库访问此数，从而提高系统性能。但是不适合非常庞大的万级数据量，返回的数据会放在内存中保存，庞大的数据量会消耗不少内存。

2.2 后端分页

前端页面js:

$("#gridList").bootstrapTable({
            url:'/user/getUserListPagination',//设置后台分页，必须设置URL获取数据，或是重写ajax方法
            method:'get',
            cache:false,
            pagination:true,
            sidePagination:'server',//设置为后台服务器分页
            pageNumber:1,
            pageSize:10,
            pageList:[10,20,30,40,50],
            queryParamsType:'',//请求参数类型，默认为`limit`，使用默认值不会向后台出入分页所需的页号，页数据数等必须值，所以需要设置为空串
            queryParams:function(params){//向后台传输参数。params为bootstrap-table的options.
                var param = {
                    page:params.pageNumber,//获取页号
                    size:params.pageSize//获取页面数据量大小
                }
                return param;
            },
            uniqueId:'_id',
            toolbar:'#toolbar',
            showColumns:true,
            showRefresh:true,
            showToggle:true,
            search:true,
            columns:[
                {checkbox:true},
                {field:'user_no',title:'用户编码',width:'10%'},
                {field:'user_name',title:'用户姓名',width:'20%'
                },
                {field:'user_sex',title:'用户性别',width:'8%',align:'center',
                    formatter:function(value,row,index){
                        if(value == '1'){
                            return '男';
                        }else{
                            return '女';
                        }
                    }},
                {field:'user_account',title:'登录账号',width:'10%'},
                {field:'user_role',title:'所属角色',width:'10%'},
                {field:'user_sys',title:'所属系统',width:'10%'},
                {field:'create_time',title:'创建时间',width:'20%',
                    formatter:function(value,row,index){
                        return dateTimeFormatter(value,'yyyy-MM-dd hh:mm:ss');
                    }
                }
            ]
        });

注意： 代码中注释不分为在后台分页中所必须设置的

后端逻辑代码：

/********user_route.js*******/
/**
 * 后台分页获取数据列表
 */
router.get('/getUserListPagination',function(req,res){
    var queryParams = req.query;
    var params= {
        page:queryParams.page,
        size:queryParams.size
    };
    userServices.getUserListPagination(params,function(err,users){//根据分页条件查询数据条数
        if(err){
            res.send({success:false,msg:err,data:null});
        }else{
            userServices.getUserList(req,res,function(err,allUsers){//查询所有数据总条数
                if(err){
                    res.send({success:false,msg:err,data:null});
                }else{
                    res.send({'success':true,'msg':"获取用户列表成功",'total':allUsers.length,'rows':users});
                }
            });
        }
    });
});

/**********user_services.js********/
/**
 * 分页查询
 * @param params
 * @param callback
 */
exports.getUserListPagination = function(params,callback){

    var index = (params.page-1)*params.size;//设置分页起点下标
    var size = parseInt(params.size);
    //设置分页条件
    var query = userModel.$user.find({});
    query.limit(size);//条数
    query.skip(index);//下标

    //执行查询
    query.exec(function(err,users){
        callback(err,users);
    });
}

注意： 选择后台分页，返回到前台的数据必须包含 total rows 两个参数，total为数据总数；rows为返回的数据数，也是一个数组对象