在平时工作中,我们经常会遇到要做分页的小功能。此文章写的是用ajax+jquery实现分页效果

步骤:

1、下载pagination的js和css文件(jquery中下载)
2、设置分页结构,放在需要的地方

   <!-- 分页代码 结构-->
   <div id="pagination" class="page"></div>

3、将下面js代码复制

 //点击页码的时候会跳转页码,但对应的内容不会改变,因为这只是准备
 $("#pagination").pagination({
                currentPage: now,	//当前页
                totalPage: total,	//总页数
                count: 10,	//显示10页
                callback: function(current) {
                    //current  点击的页码
                    data.page = current;
                    get_article();
                }
            });

此时,结构搭建完毕,下面是js功能代码

 //准备工作:
  
1、获取文章的接口:config.js
				var api = {
					article_get: baseUrl+'/admin/search'
				}
				
2、封装的ajax功能:article.js
			var article = {
			    get: function(data,callback){
			        $.get(api.article_get, data, function(res){
			            callback(res);  //将获取的数据返出去
			        })
			    }
			  }

3、真正的代码:
	<script>
        var data = {
            page:1 //默认获取第一页
        };

        //获取文章列表
        function get_article(){
            article.get(data,function(res){
                if(res.code===200){
                    var str = template('article',{'data':res.data}); //通过模板引擎渲染(获取到的数据)
                }
                $('tbody').html(str);   //将拼接好的html结构放在tbody中

                console.log(res);
                pagination(res.page, res.totalPage);	//获取文章的时候默认显示第一页
                
            })
        }
        get_article();
        

        //分页功能
        function pagination(now,total){
            $("#pagination").pagination({
                currentPage: now,
                totalPage: total,
                count: 10,
                callback: function(current) {
                    //current  点击的页码
                    data.page = current; //点击改变页码,重新获取页码的数据
                    get_article();
                }
            });
        }
        
    </script>

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐