nodejs+bootstrap Table 实现后端服务器分页

最新推荐文章于 2021-12-23 13:27:20 发布

十丶安

最新推荐文章于 2021-12-23 13:27:20 发布

阅读量984

点赞数

分类专栏： html 文章标签： html nodejs bootstrap table Sequelize

本文链接：https://blog.csdn.net/qq_29232955/article/details/88643343

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前提：本地安装好nodejs，下载好需要的库：jquery 、bootstrap 、bootstrap Table

先看实现结果：

很简单只完成了信息展示和分页功能，此页面主要时用来记录公司网页访问情况，因为访问量会比较大，因此在分页功能上采用了服务器分页，避免了一次获取大量数据，造成服务器获取数据缓慢。

在功能实现上主要分为两部分：服务器、前端

服务器：

技术选型：nodejs+Sequelize、数据库：sqlite

Sequelize框架主要用来完成对数据库表的创建以及数据的增删改查主要代码如下：

//创建accessLog表
AccessLog = sequelize.define('accessLog', {

        loginTime: Sequelize.DATE,
        loginName: Sequelize.STRING,
        loginIp: Sequelize.STRING,
        loginResult: Sequelize.BOOLEAN,
        loginMsg: Sequelize.STRING,

    }, {
        freezeTableName: true
    });
//同步数据库模型
  sequelize.sync({
        alter: true
     }).then(function () {
        console.log('同步数据库模型');
  });

//查询全部账号的访问记录（分页获取）（十分重要！！！）
module.exports.findAllLog = function (curpage,pagesize) {
 
    console.log("pagesize"+pagesize);
    console.log("curpage"+curpage);
    return AccessLog.findAndCountAll({
        order:[
            ['loginTime','DESC'],
        ],
        where: "", //为空，获取全部，也可以自己添加条件
        offset: (curpage - 1) * pagesize, //开始的数据索引，比如当page=2 时offset=10 ，而pagesize我们定义为10，则现在为索引为10，也就是从第11条开始返回数据条目
        limit: pagesize //每页限制返回的数据条数

    })
}

这里就完成了与数据库的基本操作，下面进行服务器的搭建：

由于主要技术采用nodejs，对于nodejs的写法就不做详细描述，有兴趣的同学可以自行百度，下面代码也仅为核心部位代码，

//展示所有账号访问记录
    app.get('/show_log', function (req, res) {
        var queryParams = req.query;
      //获取前端传入的信息展示条件，（场景：例如点击第二页、下一页等等）
        let rows = queryParams.page;
        let page = queryParams.size;
      
        if (req.session.logInfo && req.session.logInfo.login) {
            dbOp.findAllLog(rows,page).then(accessLog => {
                if (accessLog != null) {
                    res.send(accessLog);
                }
              
            })
        }
    })

到这里服务端功能基本完成，下面进行前端部分：

前端

首先在网页对应位置引入所需要的库，然后在<body>标签内确定表格显示位置：

	<table id="log_table"></table>

下面进行最为重要的操作，获取想要展示的数据：

$("#log_table").bootstrapTable({
			url: "/show_log",
			cache: false,
			striped: true,
			pagination: true, // 在表格底部显示分页组件，默认false
			showRefresh: true, //是否显示刷新按钮
			pageSize: 10, // 页面数据条数
			pageNumber: 1, // 首页页码
			queryParamsType: '',
			sidePagination: 'server', // 设置为服务器端分页

			queryParams: function queryParams(params) {
				var param = {
					page: params.pageNumber, //获取页号
					size: params.pageSize //获取页面数据量大小
				}
				return param;

			},
			responseHandler: function (res) {
				//将服务端你的数据转换成bootstrap table 能接收的类型
				return {
					"total": res.count, //总页数
					"rows": res.rows //数据
				};
			},
			columns: [{
					checkbox: true, // 显示一个勾选框
					align: 'center' // 居中显示
				}, {

					title: '访问时间',
					align: 'center',
					valign: 'middle',

					formatter: function (value, row, index) {
						//console.log();
						return UTC(row.loginTime)
					}
				}, {
					field: 'loginName',
					title: '访问账户',
					align: 'center',
					valign: 'middle'
				}, {
					field: 'loginIp',
					title: 'IP地址',
					align: 'center',
					valign: 'middle'
				}, {
					field: 'loginResult',
					title: '访问结果',
					align: 'center',
					valign: 'middle'
				}, {
					field: 'loginMsg',
					title: '信息',
					align: 'center',
					valign: 'middle'
				}

			],
			onLoadSuccess: function () { //加载成功时执行
				console.info("加载成功");
			},
			onLoadError: function () { //加载失败时执行
				console.info("加载数据失败");
			}

		});

这样就完成了bootstrap table 的服务器分页显示。

以上代码仅为主要部分代码，不是全部实例，欢迎各位提出意见或见解~