用jq和ajax实现分页功能

在平时工作中，我们经常会遇到要做分页的小功能。此文章写的是用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>