首页
所有分类
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.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 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
innoDB(3) C/C++(1) 经纬度(1) 间隙锁(2) Anaconda(2) dll(1) 历史记录(1) ctypes(1) MVCC(4) html标准库(1)
You might like
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
PHP中常用数组处理方法实例分析
2008/08/30 PHP
php中通过Ajax如何实现异步文件上传的代码实例
2011/05/07 PHP
php获取新浪微博数据API实例
2013/11/12 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
PHP开发中常见的安全问题详解和解决方法（如Sql注入、CSRF、Xss、CC等）
2014/04/21 PHP
禁止F5等快捷键的JS代码
2007/03/06 Javascript
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
JavaScript Array扩展实现代码
2009/10/14 Javascript
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
Bootstrap每天必学之日期控制
2016/03/07 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
Python内置函数dir详解
2015/04/14 Python
Python常见格式化字符串方法小结【百分号与format方法】
2016/09/18 Python
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
python让函数不返回结果的方法
2020/06/22 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
无谷物狗粮：Pooch & Mutt
2018/05/23 全球购物
电子信息专业自荐书
2014/02/04 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
民主评议党员个人总结
2015/02/13 职场文书
工作岗位职责范本
2015/02/15 职场文书
高端收音机+蓝牙音箱，JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电