jquery翻页表格插件

所属分类:UI,导航-图表,分页

 50472  364  查看评论 (27)
分享到微信朋友圈
X
jquery翻页表格插件 ie兼容10

更新时间:2017/12/22 下午1:50:54

更新说明:

1. 如果翻页输入框是显示状态,表格数据更新之后,翻页输入框中的页码随之变更

2. 如果有设定每页显示数据可变更,则变更每页显示数据数目后,表格刷新的数据为首页数据


使用范例请查看压缩包的index.js

这里放出插件的可用参数:

{
    'showInfo': true,
    /*是否显示每页信息*/ 'tbodyRow': {
        'zebra': true,
        /*斑马行*/ 'selected': false,
        /*选中行*/ 'hover': false,
        /*行hover效果*/ 'write': function(d) { /*表格生成每行数据的方法*/
            var r = '<tr>'
            $.each(d, function(i, val) {
                r += '<td>' + val + '</td>';
            });
            r += '</tr>';
            return r;
        }
    },
    'paginate': {
        'enabled': true,
        /*是否分页*/ 'visibleGo': false,
        /*是否开启直接翻至某页功能*/ 'type': 'numbers',
        /*默认按钮样式递增(numbers只有数字按钮,updown增加上下页按钮,full增加首尾页按钮)*/ 'displayLen': 10,
        /*每页显示条数*/ 'currentPage': 1,
        /*当前页码(初始页码)*/ 'changeDisplayLen': false,
        /*改变每页显示数目*/ 'displayLenMenu': [10, 20, 30, 50] /*改变每页显示数目时的可选值*/
    },
    'tbodyData': {
        'enabled': false,
        /*是否传入表格数据*/ 'source': [] /*传入的表格数据*/
    },
    'serverSide': false,
    /*是否从服务器获取数据*/ /*ajax参数*/ 'ajaxParam': {
        'url': '',
        /*url地址*/ 'type': 'GET',
        /*ajax传输方式*/ 'dataType': 'json',
        /*ajax传送数据格式*/ 'jsonp': null,
        /*dataType是jsonp的时候,传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名*/ 'jsonpCallback': null,
        /*dataType是jsonp的时候,自定义的jsonp回调函数名称*/ 'data': {},
        /*传到服务器的数据*/ 'timeout': 10 * 1000 /*响应最久时间限制,毫秒*/
    },
    'errFlag': false,
    /*出错标记,false无错误,true出错*/ 'errMsg': '',
    /*出错信息*/ 'sendDataHandle': function(d) {
        return d;
    },
    /*传递到服务器的数据预处理方法*/ 'backDataHandle': function(d) {
        return d;
    },
    /*预处理从服务器的接收数据或者js传入的数据*/ 'beforeShow': function() {},
    /*显示之前的额外处理事件*/ 'afterShow': function() {} /*显示之后的额外处理事件*/
}
相关插件-图表,分页

原生js表格插件systable

原生js表格插件systable,代码注释全
  图表
 43213  382

ets实现汽车动态仪表盘

通过ets实现汽车动态仪表盘,包括速度,转速等的实时数据更新
  图表
 17293  207

canvas绘制心电图

Canvas绘制心电图
  图表
 46594  366

jquery甘特图实例

JQUERY甘特图实例
  图表
 54791  344

讨论这个项目(27)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    美凌格 0
    2019/3/5 19:06:30
    如果我的表格一行有多列 翻页显示就有问题了 这个怎么解决
        玉貔貅0
        2019/3/6 17:01:46
        本表格插件没有显示列的配置,每行中的数据怎么显示,通过定义tbodyRow的write函数实现。根据不同格式的数据,自己来确定如何显示每行数据。甚至一条数据显示多行都可以。
    回复
    rolanto 0
    2018/5/21 15:42:00
    作者在吗?想找你帮忙,有偿,我的q:13949892 回复
    歪歪侯123 0
    2017/12/22 11:16:57

    怎么使用ajax 获取数据啊 

        玉貔貅1
        2017/12/22 13:49:37

        首先serverSide要置成true

        其次,设定ajaxParam中的各个配置

        歪歪侯1230
        2017/12/25 10:37:49

        有点问题 想请教一下 我qq 1214992694 看到 麻烦 联系一下 万分感谢

    回复
    左晓慧 0
    2017/12/7 10:24:26

    请问$page是什么

        歪歪侯1230
        2017/12/22 12:50:08

        你好 请问怎么用ajax 请求自己的数据呢 

        玉貔貅0
        2017/12/22 14:06:35

        与本插件无关。是我自己写代码的时候使用的,用以获取当前子页面的一个变量。

    回复
    summer 0
    2017/11/11 17:05:38

    付款完了,还是不能下载,这是最坑的...

        西瓜0
        2017/11/11 20:33:54

        我这里刚测试,可以正常下载。

    回复
    渐入微凉 0
    2017/9/27 18:03:47
    这个插件能不能每点击一个页面就向后台发起一次请求,就是点击不同的页面向后台调这一页的数据 回复
    展云 0
    2017/9/14 19:43:44
    显示查询后的数据,在插件里如何写删除tbody里的数据呢???
        王伟0
        2017/11/3 19:46:20

        不知道

        歪歪侯1230
        2017/12/26 14:49:39

        同问 请问这个问题解决了吗

        玉貔貅0
        2017/12/26 16:15:20

        表格本身并没有删除行的功能。通常,对表格进行增删改后,使用refresh刷新表格

        $(table).yhhDataTable('refresh')

    回复
    徒生&眼泪℃ 0
    2017/9/1 11:26:43

    有没有下载好的,

    回复
    ?光不老,我?不散。 0
    2017/8/29 10:09:22

    看着不错,就是没有j币

    回复
    外向的孤独患者 0
    2017/8/23 17:41:53

    挺好的,就是没jq币

        玉貔貅0
        2017/8/25 13:53:54

        个人中心连续签到3天得1JQ币

        不倒翁的brother0
        2017/10/16 15:17:57

        多谢,2B的我直接充钱了,但是现在要兼容ie678,想哭

        素丝莲芯0
        2017/11/6 16:16:33
        这个插件能不能每点击一个页面就向后台发起一次请求,就是点击不同的页面向后台调这一页的数据?
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复