基于jQuery实现的无刷新表格分页实例


Posted in Javascript onFebruary 17, 2016

本文实例讲述了基于jQuery实现的无刷新表格分页。分享给大家供大家参考,具体如下:

效果图如下:

基于jQuery实现的无刷新表格分页实例

html结构:

<table id="cs_table" class="datatable"></table>

css样式:

html,body{margin: 0;padding:0}
a:focus {outline: none;}
/* 通用表格显示 */
table, th, td {font: 12px Arial,Helvetica,sans-serif,'宋体';margin: 0;padding: 0}
table{border-spacing: 0;border-collapse: collapse;}
.datatable {width: 100%;border-style: none;background-color: #fff;margin-bottom: 20px;text-align: left;}
.datatable th, .datatable td { padding: 5px;line-height: 30px}
.datatable thead th {background-color: #eee;margin: 0;text-align: left;border-top: 1px solid #cfcfcf;border-bottom: 1px solid #cfcfcf;font-weight: 500}
.datatable tbody td {background-color: #fff;border-bottom: 1px solid #ddd;table-layout:fixed;word-break:break-all;font-weight: 400}
.datatable tbody tr.evenrow td {background-color: #f4f4f4;}
.datatable tfoot td {background-color: #fafafa;text-align: right;border-bottom: 1px solid #cfcfcf;}
/*表格分页列表*/
.datatable td.paging a {border: 1px solid #eee; color: #444; margin: 4px; padding: 2px 7px; text-decoration: none; text-align:center;}
/*表格分页当前页*/
.datatable td.paging a.current {background: #eee; border: 1px solid #CFCFCF; color: #444; font-weight: bold;}
.datatable td.paging a.current{border: 0;cursor: auto;background:none}

javascript封装代码:

/**
 * 抽象化表格
 */
function abstractTable(){
  // ---------内容属性
  this.id = null;     // 每个表格都有唯一的一个id
  this.tableobj = null; //表格对象
  this.rowNum = 0;    //行数
  this.colNum = 0;   //列数
  this.header = [];   //表头数据
  this.content = [];  //body数据
  // ----------提供外部使用获得表格内部数据
  this.currentClickRowID = 0;  //当前点击的行数据
  // --- 通过表头来获得这张表的列数
  this.getColNum = function(){
    this.colNum = this.header.length;
    return  this.colNum;
  }
  // ----------- 表格自我构建行为
  this.clearTable = function(){};
  this.showHeader = function(){};
  this.showContent = function(begin,end){};
  this.showFoot = function(){};
  // --------- 分页功能属性
  this.allDataNum = 0; // 总数据条数
  this.displayNum = 10; // 每页显示条数
  this.maxPageNum = 0; // 最大页码值
  this.currentPageNum =1;// 当前页码值
  //tfoot分页组
  this.groupDataNum = 10; //每组显示10页
  this.groupNum = 1;    //当前组
  // -------- 分页功能行为
  this.paginationFromBeginToEnd = function(begin,end){}
  this.first = function(){}//首页
  this.last = function(){}//最后一页
  this.prev = function(){}//上一页
  this.next = function(){}//下一页
  this.goto = function(){} //跳到某页
  // ----------- 表格初始化
  this.init = function(begin,end){}
}
/*
 表格对象模板
 */
function tableTemplet(table_id){
  abstractTable.call(this);
  this.id = table_id;
}
/**
 * 表格对象
 * @param options
 */
function table(options){
  if(!options){return;}
  if(!$.isPlainObject(options)){return;}
  tableTemplet.call(this,options.tableId);
  //得到表格对象
  this.tableobj = $("#"+this.id);
  //清空表格内容
  this.clearTable = function(){
    this.tableobj.html(" ");
  }
  // 实现分页行为
  this.paginationFromBeginToEnd= function(x,y){
    this.maxPageNum = Math.ceil(this.allDataNum/this.displayNum);
    var arrPage = [];
    for(var i= x;i<y;i++){
      arrPage.push(this.content[i]);
    }
    return arrPage;
  }
  this.showHeader = function(){
    if(this.header != null){
      var $thead = $("<thead>"),
        $tr = $("<tr>"),
        $th;
      for(var i=0;i<this.colNum;i++){
        $th = $("<th>").html(this.header[i]);
        $th.appendTo($tr);
      }
      $tr.appendTo($thead);
      $thead.appendTo(this.tableobj)
    }
  }
  //初始化tbody
  this.showContent = function(begin,end){
    if(this.content != null){
      var $tbody = $("<tbody>"),
        $tr,
        $td;
      var tempDaTa = this.paginationFromBeginToEnd(begin,end),
        len = tempDaTa.length;
      // 循环创建行
      for(var i=0;i<len;i++){
        $tr = $("<tr>").appendTo($tbody);
        if(i%2==1){
          $tr.addClass("evenrow");
        }
        // 循环创建列 取得对象中的键
        for(var key in tempDaTa[i]){
          $td = $("<td>").html(tempDaTa[i][key]).appendTo($tr);
        }
      }
      this.tableobj.append($tbody);
    }
  }
  //初始化tfoot
  this.showFoot = function(){
    var $tfoot = $("<tfoot>"),
      $tr = $("<tr>"),
      $td = $("<td>").attr("colspan",this.colNum).addClass("paging");
      $tr.append($td);
      $tfoot.append($tr);
      this.tableobj.append($tfoot);
      this.pagination($td);
  }
  //表格分页
  this.pagination = function(tdCell){
    var $td= typeof(tdCell) == "object" ? tdCell : $("#" + tdCell);
    //首页
    var oA = $("<a/>");
    oA.attr("href","#1");
    oA.html("首页");
    $td.append(oA);
    //上一页
    if(this.currentPageNum>=2){
      var oA = $("<a/>");
      oA.attr("href","#"+(this.currentPageNum - 1));
      oA.html("上一页");
      $td.append(oA);
    }
    //普通显示格式
    if(this.maxPageNum <= this.groupDataNum){ // 10页以内 为一组
      for(var i = 1;i <= this.maxPageNum ;i++){
        var oA = $("<a/>");
        oA.attr("href","#"+i);
        if(this.currentPageNum == i){
          oA.attr("class","current");
        }
        oA.html(i);
        $td.append(oA);
      }
    }else{//超过10页以后(也就是第一组后)
       if(this.groupNum<=1){//第一组显示
         for(var j = 1;j <= this.groupDataNum ;j++){
           var oA = $("<a/>");
           oA.attr("href","#"+j);
           if(this.currentPageNum == j){
             oA.attr("class","current");
           }
           oA.html(j);
           $td.append(oA);
         }
       }else{//第二组后面的显示
         var begin = (this.groupDataNum*(this.groupNum-1))+ 1,
           end ,
           maxGroupNum = Math.ceil(this.maxPageNum/this.groupDataNum);
         if(this.maxPageNum%this.groupDataNum!=0&&this.groupNum==maxGroupNum){
           end = this.groupDataNum*(this.groupNum-1)+this.maxPageNum%this.groupDataNum
         }else{
           end = this.groupDataNum*(this.groupNum);
         }
         for(var j = begin;j <= end ;j++){
           var oA = $("<a/>");
           oA.attr("href","#"+j);
           if(this.currentPageNum == j){
             oA.attr("class","current");
           }
           oA.html(j);
           $td.append(oA);
         }
       }
    }
    //下一页
    if( (this.maxPageNum - this.currentPageNum) >= 1 ){
      var oA = $("<a/>");
      oA.attr("href","#" + (this.currentPageNum + 1));
      oA.html("下一页");
      $td.append(oA);
    }
    //尾页
    var oA = $("<a/>");
    oA.attr("href","#" + this.maxPageNum);
    oA.html("尾页");
    $td.append(oA);
    var page_a = $td.find('a');
    var tempThis = this;
    page_a.unbind("click").bind("click",function(){
      var nowNum = parseInt($(this).attr('href').substring(1));
      if(nowNum>tempThis.currentPageNum){//下一组
        if(tempThis.currentPageNum%tempThis.groupDataNum==0){
          tempThis.groupNum += 1;
          var maxGroupNum = Math.ceil(tempThis.maxPageNum/tempThis.groupDataNum);
          if(tempThis.groupNum>=maxGroupNum){
            tempThis.groupNum = maxGroupNum;
          }
        }
      }
      if(nowNum<tempThis.currentPageNum){//上一组
        if((tempThis.currentPageNum-1)%tempThis.groupDataNum==0){
          tempThis.groupNum -= 1;
          if(tempThis.groupNum<=1){
            tempThis.groupNum = 1;
          }
        }
      }
      if(nowNum==tempThis.maxPageNum){//直接点击尾页
        var maxGroupNum = Math.ceil(tempThis.maxPageNum/tempThis.groupDataNum);
        tempThis.groupNum = maxGroupNum;
      }
      if(nowNum==1){
        var maxGroupNum = Math.ceil(tempThis.maxPageNum/tempThis.groupDataNum);
        tempThis.groupNum = 1;
      }
      tempThis.currentPageNum = nowNum;
      tempThis.init((tempThis.currentPageNum-1)*tempThis.displayNum,
        tempThis.currentPageNum*tempThis.displayNum);
      return false;
    });
  }
  //初始化
  this.init = function(begin,end){
    this.header = options.headers;
    this.colNum = this.header.length;
    this.content = options.data;
    this.allDataNum = this.content.length;
    if(options.displayNum){
      this.displayNum = options.displayNum;
    }
    if(options.groupDataNum){
      this.groupDataNum = options.groupDataNum;
    }
    this.clearTable();
    this.showHeader();
    this.showContent(begin,end);
    this.showFoot();
  }
  this.init(0,options.displayNum);
}

调用方式:

<script type="text/javascript">
  var data = [];
  for(var i=0;i<334;i++){
    data[i] = {id:i+1,name:"jason"+(i+1),gender:"男",age:26,address:"成都"};
  }
  var cs = new table({
    "tableId":"cs_table",  //必须
    "headers":["序号","姓名","性别","年龄","地址"],  //必须
    "data":data,    //必须
    "displayNum": 6,  //必须  默认 10
    "groupDataNum":9 //可选  默认 10
});
</script>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
[JS源码]超长文章自动分页(客户端版)
Jan 09 Javascript
js中top/parent/frame概述及案例应用
Feb 06 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
Aug 28 Javascript
Asp.Net alert弹出提示信息的几种方法总结
Jan 29 Javascript
js事件监听器用法实例详解
Jun 01 Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 Javascript
又一款js时钟!transform实现时钟效果
Aug 15 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
Oct 14 Javascript
vue-router命名视图的使用讲解
Jan 19 Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 Javascript
jQuery实现伪分页的方法分享
Feb 17 #Javascript
jQuery simplePage+AJAX plus分页插件用法实例
Feb 17 #Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 #Javascript
纯JavaScript代码实现文本比较工具
Feb 17 #Javascript
JavaScript实现身份证验证代码
Feb 17 #Javascript
AngularJS 最常用的功能汇总
Feb 17 #Javascript
AngularJS身份验证的方法
Feb 17 #Javascript
You might like
用php获取远程图片并把它保存到本地的代码
2008/04/07 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
鼠标事件延时切换插件
2011/03/12 Javascript
JS定时器实例
2013/04/17 Javascript
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
12个非常有用的JavaScript技巧
2017/05/17 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
JS数组中对象去重操作示例
2019/06/04 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
全面了解python中的类,对象,方法,属性
2016/09/11 Python
Python之列表实现栈的工作功能
2019/01/28 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
python如何制作英文字典
2019/06/25 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
临床医学应届生求职信
2013/11/06 职场文书
电子商务网站的创业计划书
2014/01/05 职场文书
高中生期末评语
2014/01/28 职场文书
小学生安全演讲稿
2014/04/25 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
人代会简报
2015/07/21 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
linux下安装redis图文详细步骤
2021/12/04 Redis