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


Posted in Javascript onJanuary 07, 2016

本文实例讲解了基于jquery实现表格无刷新分页功能,分享给大家供大家参考,具体内容如下

效果图:

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

具体代码:

<html>
<head>
  <title>面向对象的无刷新表格分页</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
  <link rel="stylesheet" href="css/king-table.css"/>
  <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="js/king-table.js"></script>
</head>
<body>
<table id="cs_table" class="data-table"></table>
<br/>
<table id="cs_table2" class="data-table"></table>
<script type="text/javascript">
  var data = [];
  for(var i=0;i<103;i++){
    data[i] = {id:i+1,name:"jason"+(i+1),gender:"男",age:i+1,address:"成都"};
  }
  var cs = new table({
    "tableId":"cs_table",  //必须 表格id
    "headers":["序号","姓名","性别","年龄","地址"],  //必须 thead表头
    "data":data,     //必须 tbody 数据展示
    "displayNum": 10,  //必须  默认 10 每页显示行数
    "groupDataNum":5,   //可选  默认 10 组数
    "display_tfoot":true, // true/false 是否显示tfoot --- 默认false
    "bindContentTr":function(){ //可选 给tbody 每行绑定事件回调
      this.tableObj.find("tbody").on("click",'tr',function(e){
        return false;
        var tr_index = $(this).data("tr_index");    // tr行号 从0开始
        var data_index = $(this).data("data_index");  //数据行号 从0开始
      })
    },
    sort:true,  // 点击表头是否排序 true/false --- 默认false
    sortContent:[
      {
        index:0,//表头序号
        compareCallBack:function(a,b){ //排序比较的回调函数
          var a=parseInt(a.id,10);
          var b=parseInt(b.id,10);
          if(a < b)
            return -1;
          else if(a == b)
            return 0;
          else
            return 1;
        }
      },
      {
        index:3,//表头序号
        compareCallBack:function(a,b){ //排序比较的回调函数
          var a=parseInt(a.age,10);
          var b=parseInt(b.age,10);
          if(a < b)
            return -1;
          else if(a == b)
            return 0;
          else
            return 1;
        }
      }
  ],
    specialRows:[
      {
        row:4,
        cssText:{
           "color":"#FFCF17"
        }
      }
    ],
    search:true  // 默认为false 没有搜索
  });
</script>
</body>
</html>
html,body{margin: 0;padding:0}
a:focus {outline: none;}
h3.head_title {border-bottom: 1px solid #d5ddeb;color: #1c7493;display: block;font-size: 14px;height: 30px;line-height: 30px;margin-bottom: 10px;}
/* 通用表格显示 */
table, th, td {font: 12px Arial,Helvetica,sans-serif,'宋体';margin: 0;padding: 0}
table{border-spacing: 0;border-collapse: collapse;empty-cells: show}
.data-table {width: 100%;border-style: none;background-color: #fff;/*margin-bottom: 20px;*/text-align: left;}
.data-table th, .data-table td { padding: 5px;line-height: 30px}
.data-table thead th {background-color: #eee;margin: 0;text-align: left;border-top: 1px solid #cfcfcf;border-bottom: 1px solid #cfcfcf;font-weight: 500}
.data-table tbody td {background-color: #fff;border-bottom: 1px dotted #ddd;table-layout:fixed;word-break:break-all;border-collapse:collapse;font-weight: 400}
.data-table tbody tr.evenrow td {background-color: #f4f4f4;}
.data-table tfoot td {background-color: #fafafa;text-align: right;border-bottom: 1px solid #cfcfcf;}
/*表格分页列表*/
.data-table td.paging a {border: 1px solid #eee; color: #444; margin: 4px; padding: 2px 7px; text-decoration: none; text-align:center;}
/*表格分页当前页*/
.data-table td.paging a.current {background: #eee; border: 1px solid #CFCFCF; color: #444; font-weight: bold;}
.data-table td.paging input{border:1px solid #4D90BB;font-family:Arial,sans-serif,Tahoma; font-size:12px; padding:0 5px;outline: none}
.data-table td.paging .search-txt{height:30px;line-height:30px;width: 100px }
.data-table td.paging .search-btn{height: 32px;border-left:none;cursor: pointer;_filter:chroma(color=#000000);_border:none;}
/*表格排序*/
.data-table thead th.bg{background:#eee url("../images/bg.gif") right center no-repeat;cursor: pointer}
.data-table thead th.asc{background: url("../images/asc.gif") right center no-repeat;cursor: pointer}
.data-table thead th.desc{background: url("../images/desc.gif") right center no-repeat;cursor: pointer}

以上就是基于jquery实现表格无刷新分页功能的详细代码,希望对大家的学习有所帮助。

Javascript 相关文章推荐
使用prototype.js 的时候应该特别注意的几个问题.
Apr 12 Javascript
json跟xml的对比分析
Jun 10 Javascript
jQuery 全选效果实现代码
Mar 23 Javascript
讨论javascript(一)工厂方式 js面象对象的定义方法
Dec 15 Javascript
JS实现自适应高度表单文本框的方法
Feb 25 Javascript
JavaScript  event对象整理及详细介绍
Oct 10 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
javascript function(函数类型)使用与注意事项小结
Jun 10 Javascript
vue获取data数据改变前后的值方法
Nov 07 Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 Javascript
javascript实现移动端上传图片功能
Aug 18 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 08 Javascript
js密码强度检测
Jan 07 #Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
Jan 07 #Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 #Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
Jan 07 #Javascript
JavaScript设计模式初探
Jan 07 #Javascript
JavaScript类型系统之Object详解
Jan 07 #Javascript
7个去伪存真的JavaScript面试题
Jan 07 #Javascript
You might like
PHP分页显示制作详细讲解
2006/12/05 PHP
深入PHP异步执行的详解
2013/06/03 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
php如何控制用户对图片的访问 PHP禁止图片盗链
2016/03/25 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
Vue.js简易安装和快速入门(第二课)
2017/10/17 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
MySQL最常见的操作语句小结
2015/05/07 Python
python集合用法实例分析
2015/05/30 Python
Python有序字典简单实现方法示例
2017/09/28 Python
python3 pillow模块实现简单验证码
2019/10/31 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
股东合作协议书范本
2014/04/14 职场文书
计算机毕业生求职信
2014/06/10 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
借条如何写
2015/05/26 职场文书
庆七一主持词
2015/06/29 职场文书
竞选稿之小学班干部
2019/10/31 职场文书
MySQL的join buffer原理
2021/04/29 MySQL
Mysql表数据比较大情况下修改添加字段的方法实例
2022/06/28 MySQL
mysql拆分字符串作为查询条件的示例代码
2022/07/07 MySQL