小程序分销商城_jquery完成的分页显示功用示例

2021-01-08 09:49 admin
jquery实现的分页显示功能示例       这篇文章主要介绍了jquery实现的分页显示功能,涉及jQuery的ajax交互及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下

本文实例讲述了jquery实现的分页显示功能。分享给大家供大家参考,具体如下:

我们在显示文章列表的时候,通常需要分页显示。

一种方式是通过SQL查询的limit进行分页,即只查询该页面的数据。

另外一种方式是查询出所有的数据,传递给前段,然后用jquery控制只显示我们想看到的分页。

html代码

 div 
 div id="listTag" 
 /div 
 /div 

js代码

$(function(){
 showPage(1);
 function showPage(page){
 $.ajax({
 type:"GET",
 url:" {$urlParent} /newsManageList cid=all",
 dataType:"json",
 success:function(data){
 var newsTotalNum = data.length; //新闻记录的总条数
 var pageNum = Math.ceil(newsTotalNum/ {$newsPageNum} //分页的总页数
 var content = ' form id="listContainer" ' +
 ' table id="newsList" ' +
 ' thead ' +
 ' tr ' +
 ' th ID /th th 标题 /th th 类别 /th th 作者 /th th 修改日期 /th th 操作 /th ' +
 ' /tr ' +
 ' /thead ' +
 ' tbody 
 for(var i=((page-1)* {$newsPageNum} i (page* {$newsPageNum} ) i newsTotalNum;i++){
 content += ' tr ' +
 ' td '+(i+1)+' /td ' +
 ' td a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" '+data[i].title+' /a /td '+
 ' td '+data[i].name+' /td ' +
 ' td '+data[i].author+' /td ' +
 ' td '+data[i].time+' /td ' +
 ' td ' +
 ' div div ' +
 ' a href=" {$urlParent} /newsUpdate id='+data[i].id+' " rel="external nofollow" span /span 编辑 /a ' +
 ' a href=" {$urlParent} /newsDel id='+data[i].id+' " rel="external nofollow" span /span 删除 /a ' +
 ' /div /div ' +
 ' /td ' +
 ' /tr 
 content += ' /tbody /table ' +
 ' div ' +
 '共 '+newsTotalNum+' 条记录 / '+pageNum+'页' +
 ' div ' +
 ' ul id="page" 
 //判断前面是否还有页面
 if(page == 1){
 content += ' li a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" /a /li 
 }else{
 content += ' li a href="javascript:showPage('+(page-1)+')" rel="external nofollow" /a /li 
 for(var i=1;i =pageNum;i++){
 if(i == page){
 content += ' li a href="javascript:showPage('+i+')" rel="external nofollow" rel="external nofollow" '+i+' /a /li 
 }else{
 content += ' li a href="javascript:showPage('+i+')" rel="external nofollow" rel="external nofollow" '+i+' /a /li 
 //判断后面是否还有页面
 if(page == pageNum){
 content += ' li a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" /a /li 
 }else{
 content += ' li a href="javascript:showPage('+(page+1)+')" rel="external nofollow" /a /li 
 content += ' /ul ' +
 ' /div ' +
 ' /div hr ' +
 ' /form 
 $("#listTag").empty();
 $("#listTag").append(content);

显示效果:

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》及《》

希望本文所述对大家jQuery程序设计有所帮助。