基于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相关内容感兴趣的读者可查看本站专题:《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》及《jquery常用操作技巧汇总》

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

(0)

相关推荐

  • 基于jquery实现表格无刷新分页

    本文实例讲解了基于jquery实现表格无刷新分页功能,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <title>面向对象的无刷新表格分页</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <link rel="stylesheet" hre

  • 基于Jquery实现表格动态分页实现代码

    当页面点击分页图标时,程序会自动去后台获取对应页数的记录. 关键代码如下: 需要引入的css和js文件有: 复制代码 代码如下: <link rel="stylesheet" type="text/css" href="<%=basePath %>css/theme/default/css/jpage.css"></link> <link ID="skin" rel="sty

  • 基于jquery实现的表格分页实现代码

    具体代码如下: 引用js和css文件有: 复制代码 代码如下: <link ID="skin" rel="stylesheet" type="text/css" href="css/config.css"> <script type="text/javascript" src="js/config.js"></script> <script ty

  • 利用jQuery实现一个简单的表格上下翻页效果

    前言 本文主要介绍的是利用jQuery实现一个简单的表格上下翻页效果,注:实现原理与轮播图相似.下面话不多说,来看看详细的 实现方法吧. html: <div class="popup day02-popup04"> <div class="group-caption"> <span>日期</span><span>参与团购场次</span><span class="result&

  • 扩展jquery实现客户端表格的分页、排序功能代码

    下载代码和示例:jqueryPaging.rar 使用方法如下: 复制代码 代码如下: <script language="javascript" type="text/javascript"> $("#myTable").tablePaging({ pageSize: 5, sorting: true, sortSelector: ".js-Order", sortType: "number"

  • jquery 表格分页等操作实现代码(pagedown,pageup)

    没什么技术含量,先上图: 思路: 1:获取按键 2:判断当前表格行的位置 HTML结构: 复制代码 代码如下: <div id="formdiv" align="center"> firstname:<input type="text" id="firstname"/> lastname:<input type="text" id="lastname"/&g

  • jQuery给表格添加分页效果

    本文实例为大家分享了jQuery表格添加分页的具体代码,供大家参考,具体内容如下 1. 新建一个Table,添加十行数据 <table cellspacing="0"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> </tr> </thead> <tbody> <tr> <t

  • JQuery页面的表格数据的增加与分页的实现

    复制代码 代码如下: var countPage; var nowPag = 1; var pageSize; var countSize; var starIndex; var endIndex; // 用户提交信息 var name; var sex; var age; // 定义行号 var num = 1; $(document).ready(function() { // 注册添加用户的事件 $("#submit").click(function() { // 获取用户提交的

  • 基于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

  • 基于jquery ajax 用户无刷新登录方法详解

    Ajax框架就是提供模块化实现Ajax功能的集合,Ajax框架可以是各种语言实现的(比如SAJAX有各种语言的实现),Ajax只是jquery中的一部分, 实例1 复制代码 代码如下: $.ajax({ type:'post',//可选get url:'action.php',//这里是接收数据的PHP程序 data:'data='dsa',//传给PHP的数据,多个参数用&连接 dataType:'text',//服务器返回的数据类型 可选XML ,Json jsonp script html

  • 基于jquery实现ajax无刷新评论

    jquery实现ajax无刷新评论需要用的技术:(本次试验用的是"jquery-1.4.2.js"版本的jquery) $.post("一般处理程序路径",{以字典的形式传递参数},function(data,status){``````}); jquery中的基本选择器操作: 首先创建数据库"T_article": 主键设置自增: 然后创建一个强类型的DataSet. 接着创建一个"无刷新评论.aspx"页面: 页面代码如下

  • jQuery JSON实现无刷新三级联动实例探讨

    复制代码 代码如下: <asp:DropDownList ID="ddl1" runat="server" Width="100px" ></asp:DropDownList> <asp:DropDownList ID="ddl2" runat="server" Width="100px" ></asp:DropDownList> <

  • jQuery实现ajax无刷新分页页码控件

    这段时间在做公司项目的时候需要用到ajax进行分页(点击页码也是无刷新的显示上一页或下一页的内容,不是一般的选择跳转),但是在网上找了一下,大部分分页插件都是直接刷新跳转的,感觉和我的需求差距比较大,就自己动手写了一个可以实现自己需要的功能的js来实现这个控件,实现的效果如下: 因为业务需要,我需要在一个页面创建多个这样的页码控件(有些是在ajax中生成的),显然为每一个控件写一个专属的js是不现实的,所以,我将公共部分提取出来,然后通过传入的选择器不同,对不同的控件进行相应方法的调用. 下面是

  • Jquery基于Ajax方法自定义无刷新提交表单Form实例

    本文实例讲述了Jquery基于Ajax方法自定义无刷新提交表单Form的方法.分享给大家供大家参考.具体实现方法如下: Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法: 如Form代码如下: 复制代码 代码如下: <form id="Form1" action="action.aspx" method="pos

  • jQuery实现form表单基于ajax无刷新提交方法实例代码

    本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

  • 用AJAX实现的无刷新的分页实现代码(asp.net)

    之前,服务器返回的数据都是用xml的形式传给客户端的,但是xml传一个类的对象的数据会很长,流量大,所以现在都是改用json来传数据,复杂数据用json,简单数据用string.所有AJAX中的x已经失去了它原来的意义. 大家都知道JQuery,是一个Javascript的封装库,当然JQuery也实现了对AJAX的封装,这里将分页就是直接用JQuery框架来讲哈,比较简单. 首先讲一下原理:分页有两个要点:1.有多少页,2.每页有多少条记录.总页数和每页数据都是要从服务器端返回的.所以我们就先

  • tp5框架基于Ajax实现列表无刷新排序功能示例

    本文实例讲述了tp5框架基于Ajax实现列表无刷新排序功能.分享给大家供大家参考,具体如下: 在后台管理的时候我们有时需要对数据进行排序,以控制数据在模板显示的顺序,排序的原理就是修改数据库,然后更新视图.我们可以单独写一个方法来实现排序的功能,成功后刷新页面,也可以利用Ajax技术,实现数据的局部请求,也就是无刷新排序的功能. 现在想要达到的效果是在排序的input框中输入数值,点击排序实现无刷新排序的功能. 首先是表格(cate.html)这一块我们要单独摘出来,放入到一个单独页面当中,方便

  • 基于Ajax技术实现无刷新用户登录功能

    代码如下: // JScript 文件 function usersLogon() { var userName = document.getElementById("txtuserName").value; var password = document.getElementById("txtpassword").value; var checkCode = document.getElementById("txtCheckCode").val

随机推荐