jquery实现的分页显示功能示例

前端  /  管理员 发布于 5年前   611

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

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

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

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

html代码

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 = ' 
' +            '' +            '' +            '' +            ' ' +            '' +            '' +            '';        for(var i=((page-1)*<{$newsPageNum}>);i<(page*<{$newsPageNum}>)&&i'+(i+1)+'' +              ''+              '' +              '' +              '' +              '' +              '';        }        content += '
ID
标题
类别
作者
修改日期
操作
'+data[i].title+'
'+data[i].name+'
'+data[i].author+'
'+data[i].time+'
' +              '
' +              ' 编辑 ' +              ' 删除 ' +              '' +              '
' +            '
' +            '共 '+newsTotalNum+' 条记录 / '+pageNum+'页' +            '
' +            '
';        //判断前面是否还有页面        if(page == 1){          content += '
«
';        }else{          content += '
«
';        }        for(var i=1;i<=pageNum;i++){          if(i == page){            content += '
'+i+'
';          }else{            content += '
'+i+'
';          }        }        //判断后面是否还有页面        if(page == pageNum){          content += '
»
';        }else{          content += '
»
';        }        content += '
' +              '' +              '
' +              '';        $("#listTag").empty();        $("#listTag").append(content);      }    });  }

显示效果：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

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

您可能感兴趣的文章:

• JQuery+Ajax无刷新分页的实例代码
• 基于JQuery的Pager分页器实现代码
• Jquery简单分页实现方法
• jquery pagination插件实现无刷新分页代码
• jquery+json实现数据列表分页示例代码
• jquery dataTable 后台加载数据并分页实例代码
• jquery分页插件jquery.pagination.js使用方法解析
• JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现
• jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
• 基于Jquery实现表格动态分页实现代码
• jquery分页优化操作实例分析