基于jQuery实现的无刷新表格分页实例_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程序设计有所帮助。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索jquery
， 无刷新
， 表格分页
JQuery分页
jquery实现无刷新分页、jquery ajax分页实例、jquery无刷新分页、jquery 分页 实例、jquery无刷新分页插件，以便于您获取更多的相关知识。

时间： 2024-08-04 13:57:05

基于jQuery实现的无刷新表格分页实例_jquery的相关文章

pagination插件无刷新的分页实例

pagination插件无刷新的分页实例 我们要准备的文件有:jquery.js,jquery.pagination.js,pagination.css教程,还有一个就是经常用的table布局的css文件.这些文件都会在后面的文件中包含. 先把要用到的文件依次进入进来: <script src="common/jquery.js" type="text/网页特效"></script> <script src="common/j

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

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 用户无刷新登录详解介绍

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

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

jQuery+ajax实现无刷新级联菜单示例_jquery

前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例 下面是做的一个前台用JQUERY,AJAX调用后台方法做的无刷新级联菜单 CasMenu.aspx页面: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CasMenu.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC &quo

基于jQuery实现Ajax验证用户名是否存在实例_jquery

本文章向大家分享基于jQuery实现的Ajax 验证用户名是否存在的实现代码,需要的码农朋友可以参考一下本文的源代码. jQuery.ajax概述 HTTP 请求加载远程数据. 通过jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息.详

jQuery实现的可编辑表格完整实例_jquery

本文实例讲述了jQuery实现的可编辑表格.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; cha

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

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

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

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