基于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 相关文章推荐
mailto的使用技巧分享
Dec 21 Javascript
js实现上传图片之上传前预览图片
Mar 25 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
javascript日期计算实例分析
Jun 29 Javascript
jquery遍历函数siblings()用法实例
Dec 24 Javascript
JS简单获取及显示当前时间的方法
Aug 03 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
详解Vue 单文件组件的三种写法
Feb 19 Javascript
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
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 adodb操作mysql数据库
2009/03/19 PHP
PHP+ajax 无刷新删除数据
2010/02/20 PHP
PHP怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
PHP生成唯一订单号
2015/07/05 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
自制PHP框架之设计模式
2017/05/07 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
window.onload使用指南
2015/09/13 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
基于 webpack2 实现的多入口项目脚手架详解
2017/06/26 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
pytorch SENet实现案例
2020/06/24 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
植物选择:Botanic Choice
2017/02/15 全球购物
什么是测试驱动开发(TDD)
2012/02/15 面试题
电脑租赁公司创业计划书
2014/01/08 职场文书
效能风暴心得体会
2014/09/04 职场文书
迎新生欢迎词
2015/01/23 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
慈善募捐倡议书
2015/04/27 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
nginx 添加http_stub_status_module模块
2022/05/25 Servers