mongoose、ajax、express、pagination分页插件实现分页效果

1.首先下载pagination分页插件，下载地址：JQuery分页插件

2.下载后在页面中引入插件包括CSS与JS文件：HTML部分与JS部分代码如下

<link rel="stylesheet" href="/public/css/pagination.css"/>

<div class="page">
    <div class="m-style M-box11"></div>
</div>

//引入插件
<script src="/public/js/jquery-3.4.1.min.js"></script>
<script src="/public/js/jquery.pagination.js"></script>
<script>
     $('.M-box11').pagination({
         mode: 'fixed'
      });
</script>

完成上述操作后，可以在页面上看到分页的按钮效果，当然，分页插件中有好几种分页按钮，大家根据自己的需要选取。

3.我们知道mongoose中有一个语法，能帮我们非常快速地完成分页的效果，即Model.skip(num1).limit(num2).....这个语句的意思是跳过num1条数据，获取num2条数据，比如我们一页显示8条数据，我们要获取第三页的8条数据，那么我们就可以写为Model.skip(2*8).limit(8).exec(...)。有了这样的方法，对于我们来说十分方便。现在，我们需要做的就是将第几页、一页显示多少条数据这两个参数传递给后台，后台会按上述的方法去数据库获取相应数据。

4.根据pagination插件，获取两个参数（pageNum:第几页，pageSize:一页显示几条数据）。我们更新JS部分的代码，如下：

<script type="text/javascript">
		
$('.M-box11').pagination({
	mode: 'fixed',
	totalData: 20, //数据总条数，总条数需要后台获取得到{{count}}，这里为方便展示直接使用数字。
	showData: 8, //每页显示的条数
	pageCount: {{count%showData==0?count/showData:count/showData+1}}, //总页数
	callback:function(api){ //当用户点击页码时会调用callback函数
		var currentNum = api.getCurrent() //当前页码
		getList(currentNum,this.showData) //将当前页码与每页显示的条数作为参数
	}
},function(){ //该函数是页面加载进来就会执行
	getList(1,8) //页面加载进来，先显示第一页的8条数据
});
		
function getList(pageNum,pageSize){
	$.ajax({
		url:'/article/'+pageNum+'/'+pageSize,
		dataType:"JSON",
		success:function(result){  //接受后台返回的数据
                var aa =""
		    for(var i = 0 ;i<result.articleList.length;i++){
			    var $value = result.articleList[i]
			    var $time = new Date(new Date($value.add_time) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '') //格式化时间
			aa+=`
			<li class="article-item">
				<a href="/article/detail?id=`+$value._id.toString()+`">
					<h2 class="p-title">`+$value.title+`</h2>
					<p class="p-abbr"> `+ $value.content.replace(/<\/?[^>]*>/g,'')+`</p>
					<div class="p-info clearfix">
						<p class="fl">
							<span class="time">时间：`+ $time +`</span>
						</p>
						<p class="fr">
							<span class="click">浏览次数：`+$value.visit+`</span>
						</p>
					</div>
				</a>
			</li>`
			}
				$("#articleUl").html(aa) //将aa这段html代码，加到页面上显示
			  }
			})
		}
	</script>

5.上述代码中，Ajax请求的url为：'/article/'+pageNum+'/'+pageSize,在后台接受这样的请求，我的后台是express框架搭建的。router.js中的代码如下：

router.get('/article/:pageNum/:pageSize', function(req,res){
    const pageNum = parseInt(req.params.pageNum)
	const pageSize = parseInt(req.params.pageSize)
	Article.findAll(pageNum,pageSize,function(err,data){
		if(err){
			return res.status(500).send('Server error.')
		}else{
				res.send({
					articleList: data,
				})
			}
		})
	})
})

6.上述代码中的 findAll是我自己封装的方法，在Article的模式定义中，为其添加一个静态方法，如下

// 查询文章 分页查询
articleSchema.static('findAll',function(pageNum,pageSize,callback){
    this.find()
	.sort({add_time:-1}) //按数据排序
	.skip((pageNum-1)*pageSize)
	.limit(pageSize) //若最后一页剩余文章数不足pageSize个数时，只显示剩余的，不会报错。
    .exec(function(err, ret){
        callback(err,ret)
    })
})

这样我们就利用mongoose、express、ajax完成了分页功能。

———————这是分界线，上面已经完成了分页功能，下面其他方法———————————

其他思考：

在ajax请求后，我们得到success中后台返回的数据：可以使用art-template模板将数据更新在页面上，而不是用字符串拼接成html代码。

$.ajax({
	url:'/article/'+pageNum+'/'+pageSize,
	dataType:"JSON",
	success:function(result){
	    var json = { 
		    articleList2: result.articleList,
	    };
	    var aa = template('tmp', json);
        $("#articleUl").html(aa)
})

<script src="/node_modules/art-template/lib/template-web.js">
<script id="tmp" type="text/art-template">
	<div>
	{{each articleList2}}
	<li class="article-item">
		<a href="/article/detail?id={{$value._id.toString()}}">
			<h2 class="p-title"><i class="iconfont icon-wenzhang_huaban" style="color: #5555ff;"></i>{{$value.title}}</h2>
			<p class="p-abbr"> {{$value.content.replace(/<\/?[^>]*>/g,'')}} </p>
		</a>
	</li>
	{{ /each }}
</div>
</script>

引入art-template模板引擎后，我们可以使用上述的方法完成，我觉得这种方法更好一些，但是我单独引入art-template.js文件后，模板引擎不生效，还未找出问题在哪，是因为我在项目中引入了express-art-template，现在又单独引入了art-template.js引起的问题吗？还在思考中。。。。