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


Posted in jQuery onAugust 23, 2019

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

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

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

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

html代码

<div class="am-g">
  <div class="am-u-sm-12" 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 class="am-form" id="listContainer">' +
            '<table class="am-table am-table-striped am-table-hover table-main" id="newsList">' +
            '<thead>' +
            '<tr>' +
            '<th class="table-id">ID</th><th class="table-title">标题</th><th class="table-type">类别</th><th class="table-author am-hide-sm-only">作者</th><th class="table-date am-hide-sm-only">修改日期</th><th class="table-set">操作</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 class="am-hide-sm-only">'+data[i].author+'</td>' +
              '<td class="am-hide-sm-only">'+data[i].time+'</td>' +
              '<td>' +
              '<div class="am-btn-toolbar"><div class="am-btn-group am-btn-group-xs">' +
              '<a href="<{$urlParent}>/newsUpdate?id='+data[i].id+'>" rel="external nofollow" class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 编辑</a> ' +
              '<a href="<{$urlParent}>/newsDel?id='+data[i].id+'>" rel="external nofollow" class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 删除</a> ' +
              '</div></div>' +
              '</td>' +
              '</tr>';
        }
        content += '</tbody></table>' +
            '<div class="am-cf">' +
            '共 '+newsTotalNum+' 条记录 / '+pageNum+'页' +
            '<div class="am-fr">' +
            '<ul class="am-pagination" id="page">';
        //判断前面是否还有页面
        if(page == 1){
          content += '<li class="am-disabled"><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 class="am-active"><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 class="am-disabled"><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程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jquery仿微信聊天界面
May 06 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
jQuery实现朋友圈查看图片
Sep 11 jQuery
jQuery表单选择器用法详解
Aug 22 #jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 #jQuery
jquery树形插件zTree高级使用详解
Aug 16 #jQuery
jQuery zTree树插件的使用教程
Aug 16 #jQuery
jQuery zTree插件快速实现目录树
Aug 16 #jQuery
jQuery zTree插件使用简单教程
Aug 16 #jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 #jQuery
You might like
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
linux iconv方法的使用
2011/10/01 PHP
探讨PHP删除文件夹的三种方法
2013/06/09 PHP
简单实用的.net DataTable导出Execl
2013/10/28 PHP
php下载excel无法打开的解决方法
2013/12/24 PHP
php出现web系统多域名登录失败的解决方法
2014/09/30 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
JS判断用户用的哪个浏览器实例详解
2018/10/09 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
vue中activated的用法
2021/01/03 Vue.js
python如何把嵌套列表转变成普通列表
2018/03/20 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
Flask框架配置与调试操作示例
2018/07/23 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
python代码如何注释
2020/06/01 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
python对execl 处理操作代码
2020/06/22 Python
对python中list的五种查找方法说明
2020/07/13 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
python IP地址转整数
2020/11/20 Python
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
2014年工人工作总结
2014/11/25 职场文书
公司开业致辞
2015/07/29 职场文书
golang import自定义包方式
2021/04/29 Golang