分页功能的简单实现。使用模板引擎
思路:页面上动态生成 上一页(i-1), i - 2,i - 1 ,i, i + 1,, i +2 ,下一页(i+1) 。7个按钮。其中 i 是当前页码。
在模板中判断 i - 1 ,i - 2 是否小于0 ,是则不生成按钮。同理判断 i + 1 ,i + 2 是否大于最大页码。
在按钮中自定义属性 date - page存储页码。根据页码发送ajax请求 获取数据。
代码:
<script src="../static/assets/vendors/jquery/jquery.js"></script> <script src="../static/assets/vendors/art-template/template-web.js"></script> //引入模板引擎 <script type = "text/template" id = "pageList"> {{if(currentPage - 1 > 0)}}<li data-page="{{currentPage - 1}}"><a href="#">上一页</a></li> {{/if}} {{if(currentPage - 2 > 0)}}<li data-page="{{currentPage - 2}}"><a href="#">{{currentPage - 2}}</a></li>{{/if}} {{if(currentPage - 1 > 0)}}<li data-page="{{currentPage - 1}}"><a href="#">{{currentPage - 1}}</a></li>{{/if}} <li class = "active" data-page="{{currentPage}}"><a href="#" >{{currentPage}}</a></li> {{if(currentPage + 1 <= maxPage)}}<li data-page="{{currentPage + 1}}"><a href="#">{{currentPage + 1}}</a></li>{{/if}} {{if(currentPage + 2 <= maxPage)}}<li data-page="{{currentPage + 2}}"><a href="#">{{currentPage + 2}}</a></li>{{/if}} {{if(currentPage + 1 <= maxPage)}}<li data-page="{{currentPage + 1}}"><a href="#">下一页</a></li>{{/if}} </script> $(function(){ //页面初始化 var currentPage = 1; var pageSize = 20; //参数1(页码)参数2(每页数据条数) function getPostData(currentPage,pageSize){ $.ajax({ type:"post", url:"./api/getPosts.php", data:{ currentPage:currentPage, pageSize:pageSize }, dataType:"json", success:function(res){ if(res.code == 1){ var maxPage = Math.ceil(res.count/pageSize); //res.count 后台返回的数据总条数 var page_html = template("pageList",{currentPage:currentPage,maxPage:maxPage}); //调用模板引擎生成 html 结构 $(".pagination").html(page_html); //注意 不能使用 appendTo()追加。html() 相当于局部刷新 } } }); } getPostData(currentPage,pageSize); $(".pagination").on("click","li",function(){
//如果点击当前页码 return false if(currentPage == parseInt( $(this).attr("data-page"))){ return false; }else{ currentPage = parseInt( $(this).attr("data-page")); } getPostData(currentPage,pageSize); }); }); </script>