首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

jQuery实现页码跳转式动态数据分页

Posted in jQuery onDecember 31, 2017

我们这次给大家带来的是用jQuery实现页码跳转式动态数据分页这个效果，这个效果最明显的就是没有数据加载和刷新页面这个过程，再做小型数据的加载也多级网页加载的时候很有效。我们先来看下实际效果：

jQuery实现页码跳转式动态数据分页

下面我们给出全部效果代码：

HTML全部代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery实现页码跳转式动态数据分页-三水点靠木</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<!-- <script type="text/javascript" src="back-endPage.js"></script> --> <!-- 后台分页 -->
<script type="text/javascript" src="js/front-endPage.js"></script><!-- 前台分页 -->
<script type="text/javascript" src="js/shujv2.js"></script>
<link rel="stylesheet" type="text/css" href="css/table.css" rel="external nofollow" >
</head>
<body>
<div id="histroyBox"></div>
<script type="text/javascript">
  //前台分页的样子
  $('#histroyBox').CJJTable({
    'title':["装点","卸点","运输货物","下单日期","作者"],//thead中的标题 必填
    'body':["taskCode","startAddr","endAddr","varietiesTypeName","createDate","customerName"],//tbody td 取值的字段 必填
    'display':[1,1,1,1,1,2],//隐藏域，1显示，2隐藏 必填
    'pageNUmber':10,//每页显示的条数 选填
    'pageLength':data.length,//选填
    'url':data,//数据源 必填
    dbTrclick:function(e){//双击tr事件
    alert(e.find('.taskCode').html())
    }
  });
  //后台分页的样子
  /*$('#histroyBox').CJJTable({
    'title':["装点","卸点","运输货物","下单日期"],//thead中的标题 必填
    'body':["contactName","contactMobliePhone","carrierName","taskNum","taskCustomerExpectPrice","taskCustomerBudgetFreight"],//tbody td 取值的字段 必填
    'display':[1,1,1,1,2,2],//隐藏域，1显示，2隐藏 必填
    'pageJson':{
      "taskId":528710,
      "pageSize":100,//ajax请求参数中的每页展示数量 选填
      "token":"yJUmunFeG3REqisYAmCfeA"
    },
    'url':'api/quoted/quotedList',//数据源 必填
    dbTrclick:function(that){ //双击tr事件
      alert(that.find('.contactName').html())
    }
  });*/
</script>
</body>
</html>

其中<script type="text/javascript" src="js/shujv2.js"></script>是数据JS内容，大家在实际操作的时候可以用JS获取json达到要的数据格式：

shujv2.js代码：

var data = [ {
  "warehouseID" : "3750",
  "warehouseCode" : "CK20140825061813777127447",
  "province" : "上海",
  "endProvince" : "江苏省",
  "provinceId" : "310000",
  "cityId" : "310100",
  "areaId" : "310109",
  "endProvinceId" : "320000",
  "endCityId" : "320600",
  "endAreaId" : "320612",
  "materialId" : "0",
  "material" : "",
  "specId" : "0",
  "productNId" : "0",
  "varietiesId" : "8",
  "varietiesTypeId" : "621",
  "taskCode" : "T1611230481",
  "customerID" : "20147",
  "customerName" : "三水点靠木",
  "createDate" : "2016-11-23 18:41:40",
  "wareHouseName" : "找钢仓库",
  "city" : "上海市",
  "area" : "虹口区",
  "startAddr" : "逸仙路25号",
  "endCity" : "南通市",
  "endArea" : "通州区",
  "endAddr" : "1",
  "varietiesTypeName" : "钢材",
  "varieties" : "线材",
  "productN" : "",
  "spec" : "",
  "weight" : "1",
  "num" : "1",
  "receiver" : "",
  "receiverPhone" : "1",
  "remark" : "",
  "label" : "",
  "startAddrNumber" : "1",
  "varietiesNumber" : "1",
  "contactsId" : "22494",
  "contactsName" : "刘宇测试"
 } ]

front-endPage.js是分页加载的效果实现。代码为：

;(function($, window, document,undefined) {
 var cjjTable = function(ele,opt){
    this.$element = ele,
    this.defaults ={
       title:null,
       body:null,
       display:null,
       pageNUmber:8,
       pageLength:0,
       url:null,
       dbTrclick:function(that){
       }
    }
    this.options = $.extend({},this.defaults,opt)
 }
 cjjTable.prototype = {
    start:function(){
      var _this = this;
      var titlelistBox="";
      var titlesmall="";
      for(var i=0;i<_this.options.title.length;i++){
        titlesmall+="<th>"+_this.options.title[i]+"</th>";
        titlelistBox = titlesmall;
      }
      var json = "";
      var maxpagenumberBox = 7;//选择项最多的数量
      var json = this.options.url;
      var histroy_DDBox = "";
      var histroy_DD = "";
      var firstPageNumber=_this.options.pageLength>_this.options.pageNUmber?_this.options.pageNUmber:_this.options.pageLength;
      for (var i = 0; i <firstPageNumber; i++) {
        var bodyBigBox="";
        var bodyBox="";
        for(var x=0;x<_this.options.body.length;x++){
          var type = _this.options.body[x];
          var display = "table-cell";
          if(_this.options.body.length>_this.options.title.length&&_this.options.display[x]!=undefined){
            display = _this.options.display[x]*1==1?"table-cell":"none";
          }
          bodyBox+="<td class='"+type+"' style='display:"+display+"'>"+json[i][type]+"</td>";
          bodyBigBox = bodyBox;
        }
        histroy_DD +="<tr class='new_productBox'>"+bodyBigBox+"</tr>";
        histroy_DDBox = histroy_DD;
      }
      $( _this.$element.selector+" table tfoot").html("");
      if (Math.ceil(_this.options.pageLength/ _this.options.pageNUmber) == 1) {
        $( _this.$element.selector+" .nextPage").css("display", "none");
        $(_this.$element.selector+" .endPage").css("display", "none");
      }
      var maxpagenumberBoxBigbox = "";
      var maxpagenumberBoxBig = "";
      if (Math.ceil(_this.options.pageLength/ _this.options.pageNUmber) < maxpagenumberBox) {
        for (var i = 0; i < Math.ceil(_this.options.pageLength/ _this.options.pageNUmber); i++) {
          var className = "";
          if(i==0){
            className = "pagenumberBoxLi";
          }
          maxpagenumberBoxBig += '<li class="'+className+'">' + (i * 1 + 1) + '</li>';
          maxpagenumberBoxBigbox = maxpagenumberBoxBig;
        }
      } else {
        for (var i = 0; i < maxpagenumberBox; i++) {
          var className = "";
          if(i==0){
            className = "pagenumberBoxLi";
          }
          maxpagenumberBoxBig += '<li class="'+className+'">' + (i * 1 + 1) + '</li>';
          maxpagenumberBoxBigbox = maxpagenumberBoxBig;
        }
      }
      var buttonTfoot = "<tr>"+
      "<td colspan='"+_this.options.title.length+"'>"+
        "<div style='float:right;margin-left:10px;' class='tfootRight'>"+
          "<input placeholder='输入页码' type='text'>"+
          "<button>确定</button>"+
          "</div>"+
          "<div style='float:right'>"+
            "<span class='firstPage' style='margin-right:10px;cursor: pointer;float:left;display: none;margin-left:10px;'>首页</span>"+
            "<span class='lastPage' style='margin-right:10px;cursor: pointer;float:left;display: none;'>上一页</span>"+
            "<ul class='pagenumberBox'>"+maxpagenumberBoxBigbox+"</ul>"+
            "<input class='typeNumber' type='text' value='1' onfocus='this.blur()' style='display:none;width:20px;height:20px;text-align:center;line-height:20px;border:1px solid #666;margin-right:5px;float:left;margin-top:2.5px;'>"+
            "<span class='nextPage' style='margin-right:10px;float:left;cursor: pointer;'>下一页</span>"+
            "<span class='endPage' style='cursor: pointer;float:left;'>尾页</span>"+
          "</div>"+
          "<div style='float:right'>"+
             "<select><option value='5'>5</option><option value='10'>10</option><option value='20'>20</option><option value='50'>50</option><option value='100'>100</option><option value='200'>200</option><option value='500'>500</option></select>"
          "</div>"+
        "</div>"+
      "<td>"+
      "<tr>";
      _this.$element.html("<table class='CJJ-Table'><thead>"+titlelistBox+"</thead><tbody>"+histroy_DDBox+"</tbody><tfoot>"+buttonTfoot+"</tfoot></table>");
      $(_this.$element.selector+ ' select').val(_this.options.pageNUmber);
      if(Math.ceil(_this.options.pageLength/_this.options.pageNUmber)<2){
        $(_this.$element.selector+ ' .endPage').hide();
        $(_this.$element.selector+ ' .nextPage').hide();
      }
      $(_this.$element.selector+ ' .tfootRight input').unbind('keyup').keyup(function(){
        _this.inputKeyup(_this,maxpagenumberBox,json);
      })
      $(_this.$element.selector+ ' .tfootRight button').unbind('click').click(function(){
         _this.button(_this,maxpagenumberBox,json);
      });
      $(_this.$element.selector+ ' .firstPage').unbind('click').click(function(){
         _this.firstPage(_this,maxpagenumberBox,json);
      });
      $(_this.$element.selector+ ' .endPage').unbind('click').click(function(){
         _this.endPage(_this,maxpagenumberBox,json);
      });
      $(_this.$element.selector+ ' .nextPage').unbind('click').click(function(){
         _this.nextPage(_this,maxpagenumberBox,json);
      });
      $(_this.$element.selector+ ' table tfoot ul li').unbind('click').click(function(){
         _this.nextTableLi(_this,maxpagenumberBox,json,$(this));
      });
      $(_this.$element.selector+ ' .lastPage').unbind('click').click(function(){
         _this.lastPage(_this,maxpagenumberBox,json);
      });
      $(_this.$element.selector+ ' select').unbind('change').change(function(){
         _this.select(_this,maxpagenumberBox,json,$(this));
      });
      $(_this.$element.selector+ ' tbody tr').unbind('dblclick').dblclick(function(){
         _this.options.dbTrclick($(this));
      });
    },
    inputKeyup:function(e,maxpagenumberBox,json){
      var val = $(e.$element.selector+ " .tfootRight input").val();
      if (val == 0) {
        var val2 = val.replace(0, "");
      } else if (val > 0 && val <= Math.ceil(e.options.pageLength / e.options.pageNUmber)) {
        var val2 = val.replace(/[^0-9]/g, "");
      } else if (val > Math.ceil(e.options.pageLength/ e.options.pageNUmber)) {
        var val2 = Math.ceil(e.options.pageLength / e.options.pageNUmber);
      }
      $(e.$element.selector+ ' .tfootRight input').val(val2);
    },
    button:function(e,maxpagenumberBox,json){
      var val = $(e.$element.selector+ ' .tfootRight input').val();
      $(e.$element.selector+ " .typeNumber").val(val);
      if (val != "") {
        e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
      }
    },
    firstPage:function(e,maxpagenumberBox,json){
      $(e.$element.selector+ " .typeNumber").val(1);
      e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
    },
    endPage:function(e,maxpagenumberBox,json){
      $(e.$element.selector+ " .typeNumber").val(Math.ceil(e.options.pageLength / e.options.pageNUmber));
      e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
    },
    nextPage:function(e,maxpagenumberBox,json){
      var number = $(e.$element.selector+ " .typeNumber").val();
      $(e.$element.selector+ " .typeNumber").val(number * 1 + 1);
      e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
  
    },
    nextTableLi:function(e,maxpagenumberBox,json,that){
      var val = that.html();
      $(e.$element.selector+ " .typeNumber").val(val);
      e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
    },
    lastPage:function(e,maxpagenumberBox,json){
      var number = $(e.$element.selector+ " .typeNumber").val();
      if (number > 1) {
        $(e.$element.selector+ " .typeNumber").val(number * 1 - 1);
        e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
      }
    },
    select:function(e,maxpagenumberBox,json,that){
      var select = that.find("option:selected").val();
      $(e.$element.selector+ " .typeNumber").val(1); 
      e.options.pageNUmber = select;
      e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
    },
    page:function(Pagenumber, pageNUmber, maxpagenumberBox,json,that,e) {
      var histroy_DDBox = "";
      var histroy_DD = "";
      var lastPage=Pagenumber<Math.ceil(e.options.pageLength / pageNUmber)?Pagenumber*pageNUmber:e.options.pageLength;
      for (var i =(Pagenumber-1)*pageNUmber; i < lastPage; i++) {
        var bodyBigBox="";
        var bodyBox="";
        for(var x=0;x<e.options.body.length;x++){
          var type = e.options.body[x];
          var display = "table-cell";
          if(e.options.body.length>e.options.title.length&&e.options.display[x]!=undefined){
            display = e.options.display[x]*1==1?"table-cell":"none";
          }
          bodyBox+="<td class='"+type+"' style='display:"+display+"'>"+json[i][type]+"</td>";
          bodyBigBox = bodyBox;
        }
        histroy_DD +="<tr class='new_productBox'>"+bodyBigBox+"</tr>";
        histroy_DDBox = histroy_DD;
      }
      $(that.selector+" table tbody").html(histroy_DD);
      var maxpagenumberBoxBigbox = "";
      var maxpagenumberBoxBig = "";
      if (Math.ceil(e.options.pageLength/ e.options.pageNUmber) < maxpagenumberBox) {
        for (var i = 0; i < Math.ceil(e.options.pageLength/ e.options.pageNUmber); i++) {
          var className = "";
          if(i==0){
            className = "pagenumberBoxLi";
          }
          maxpagenumberBoxBig += '<li class="'+className+'">' + (i * 1 + 1) + '</li>';
          maxpagenumberBoxBigbox = maxpagenumberBoxBig;
        }
      } else {
        for (var i = 0; i < maxpagenumberBox; i++) {
          var className = "";
          if(i==0){
            className = "pagenumberBoxLi";
          }
          maxpagenumberBoxBig += '<li class="'+className+'">' + (i * 1 + 1) + '</li>';
          maxpagenumberBoxBigbox = maxpagenumberBoxBig;
        }
      }
      $(that.selector+" table tfoot ul").html(maxpagenumberBoxBigbox);
      if (Pagenumber == 1) {
        $(that.selector+" .firstPage,"+that.selector+" .lastPage").hide();
      } else {
        $(that.selector+" .firstPage,"+that.selector+" .lastPage").show();
      }
      if (Pagenumber == Math.ceil(e.options.pageLength / pageNUmber)) {
        $(that.selector+" .endPage,"+that.selector+" .nextPage").hide();
      } else {
        $(that.selector+" .endPage,"+that.selector+" .nextPage").show();
      }
      if (Math.ceil(e.options.pageLength/ pageNUmber) > maxpagenumberBox) {
        if (Pagenumber > 0 && Pagenumber < Math.ceil(maxpagenumberBox / 2) * 1 + 1) {
          maxpagenumberBoxBigbox = "";
          maxpagenumberBoxBig = "";
          for (var i = 0; i < maxpagenumberBox; i++) {
            maxpagenumberBoxBig += '<li>' + (i * 1 + 1) + '</li>';
            maxpagenumberBoxBigbox = maxpagenumberBoxBig;
          }
          $(that.selector+" .pagenumberBox").html(maxpagenumberBoxBigbox);
          $(that.selector+' .pagenumberBox li').eq(Pagenumber - 1).addClass('pagenumberBoxLi');
        } else if (Pagenumber >= Math.ceil(maxpagenumberBox / 2) * 1 + 1 && Pagenumber < Math.ceil(e.options.pageLength / pageNUmber) - Math.ceil(maxpagenumberBox / 2) + 2) {
          maxpagenumberBoxBigbox = "";
          maxpagenumberBoxBig = "";
          for (var i = Pagenumber - Math.ceil(maxpagenumberBox / 2) + 1; i < Pagenumber * 1 + Math.ceil(maxpagenumberBox / 2) * 1; i++) {
            maxpagenumberBoxBig += '<li>' + (i) + '</li>';
            maxpagenumberBoxBigbox = maxpagenumberBoxBig;
          }
          $(that.selector+" .pagenumberBox").html(maxpagenumberBoxBigbox);
          $(that.selector+' .pagenumberBox li').eq(Math.ceil(maxpagenumberBox / 2) - 1).addClass('pagenumberBoxLi');
        } else if (Pagenumber >= Math.ceil(e.options.pageLength / pageNUmber) - Math.ceil(maxpagenumberBox / 2) + 2 && Pagenumber <= Math.ceil(e.options.pageLength / pageNUmber)) {
          maxpagenumberBoxBigbox = "";
          maxpagenumberBoxBig = "";
          for (var i = Math.ceil(e.options.pageLength / pageNUmber) - maxpagenumberBox; i < Math.ceil(e.options.pageLength / pageNUmber); i++) {
            maxpagenumberBoxBig += '<li>' + (i * 1 + 1) + '</li>';
            maxpagenumberBoxBigbox = maxpagenumberBoxBig;
          }
          $(that.selector+" .pagenumberBox").html(maxpagenumberBoxBigbox);
          $(that.selector+' .pagenumberBox li').eq(Pagenumber - Math.ceil(e.options.pageLength/ pageNUmber) + maxpagenumberBox * 1 - 1).addClass('pagenumberBoxLi');
        }
      } else {
        if (Pagenumber <= Math.ceil(e.options.pageLength / pageNUmber)) {
          $(that.selector+' .pagenumberBox li').removeClass('pagenumberBoxLi');
          $(that.selector+' .pagenumberBox li').eq(Pagenumber - 1).addClass('pagenumberBoxLi');
        }
      }
      $(that.selector+ ' table tfoot ul li').unbind('click').click(function(){
         e.nextTableLi(e,maxpagenumberBox,json,$(this));
      });
      $(that.selector+ ' tbody tr').unbind('dblclick').dblclick(function(){
         e.options.dbTrclick($(this));
      });
    }  

 }
 $.fn.CJJTable = function(options){
     var cjj = new cjjTable(this,options);
     return cjj.start();
 }
})(jQuery, window, document);

以上就是这个效果的全部内容，有兴趣的朋友测试一下，需要注意的就是在数据JS中，数据格式和重要，需要增加附加数据一定要确保ID名唯一。感谢你对三水点靠木的支持。

jQuery实现页码跳转式动态数据分页

- Author -

laozhang

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
jQuery Validate格式验证功能实例代码（包括重名验证）
Jul 18 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 #jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 #jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 #jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 #jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 #jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 #jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 #jQuery
菲律宾购物网站(13) 智利购物网站(5) 新西兰购物网站(42) 匈牙利购物网站(11) 巴基斯坦购物网站(2) 捷克购物网站(26) 北美洲购物网站(1) 卡塔尔购物网站(3) 秘鲁购物网站(1) 沙特阿拉伯购物网站(9)
You might like
php Http_Template_IT类库进行模板替换
2009/03/19 PHP
PHP 中执行排序与 MySQL 中排序
2009/04/21 PHP
请离开include_once和require_once
2013/07/18 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
判断iframe里的页面是否加载完成
2014/06/06 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
JavaScript实现图片DIV竖向滑动的方法
2015/04/25 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
python中base64加密解密方法实例分析
2015/05/16 Python
numpy中索引和切片详解
2017/12/15 Python
Python 25行代码实现的RSA算法详解
2018/04/10 Python
使用celery执行Django串行异步任务的方法步骤
2019/06/06 Python
Python Pandas分组聚合的实现方法
2019/07/02 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
Python常用类型转换实现代码实例
2020/07/28 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
LUISAVIAROMA德国官网：时尚奢侈品牌购物网站
2020/11/12 全球购物
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
护士2014年终工作总结
2014/11/11 职场文书
2016年“9.22”世界无车日活动小结
2016/04/05 职场文书
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js
java设计模式--三种工厂模式详解
2021/07/21 Java/Android
用Python可视化新冠疫情数据
2022/01/18 Python
nginx之queue的具体使用
2022/06/28 Servers