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 validata插件实现方法
Jun 25 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jquery实现进度条状态展示
Mar 26 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
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
php下统计用户在线时间的一种尝试
2010/08/26 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
Linux下编译redis和phpredis的方法
2016/04/07 PHP
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
Python脚本实现网卡流量监控
2015/02/14 Python
Python fileinput模块使用实例
2015/05/28 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
Python urllib.request对象案例解析
2020/05/11 Python
python 调用API接口 获取和解析 Json数据
2020/09/28 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
计算机专业学生求职信分享
2013/12/15 职场文书
船舶专业个人求职信范文
2014/01/02 职场文书
学生操行评语大全
2014/04/24 职场文书
2014年预备党员学习新党章思想汇报
2014/09/15 职场文书
人身意外保险授权委托书
2014/10/01 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
继承公证书格式
2015/01/26 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL