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 21 jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
jquery轮播图插件使用方法详解
Jul 31 jQuery
jQuery实现简单弹幕制作
Dec 10 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 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
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
php实现求相对时间函数
2015/06/15 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
AngularJS中的promise用法分析
2017/05/19 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
python进程类subprocess的一些操作方法例子
2014/11/22 Python
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
在Python的Django框架中编写编译函数
2015/07/20 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
Django单元测试工具test client使用详解
2019/08/02 Python
解决python运行启动报错问题
2020/06/01 Python
浅谈对python中if、elif、else的误解
2020/08/20 Python
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
廉政教育心得体会
2014/01/01 职场文书
企业介绍信范文
2015/01/30 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang