jQuery table分页插件

所属分类:导航-分页

 67879  465  查看评论 (81)
分享到微信朋友圈
X
jQuery table分页插件 ie兼容6

更新时间:2018/1/10 下午5:49:58

更新说明:修改双击效果失败的bug


更新时间:2018/1/3 下午5:20:02

更新说明:

$(e.$element.selector).find("input[name='checkList']").removeAttr('checked');
var x = $(this).index('.cjjTable-remove');
$(e.$element.selector).find("input[name='checkList']").get(x).checked = true;
$(e.$element.selector).find("input[name='checkBoth']").removeAttr('checked');

添加$(e.$element.selector),防止所有的input[name='']变化


更新时间:2018/1/2 下午4:15:55

更新说明:新增了前后端分页的删除跟批量删除功能

前台分页的样子

$('#histroyBox').CJJTable({
    title: ["装点", "卸点", "运输货物", "下单日期", "作者"], //thead中的标题 必填
    body: ["taskCode", "startAddr", "endAddr", "varietiesTypeName", "createDate", "customerName"], //tbody td 取值的字段 必填
    display: [1, 1, 1, 1, 2, 1], //隐藏域,1显示,2隐藏 必填
    pageNUmber: 10, //每页显示的条数 选填
    pageLength: data.length, //选填
    url: data, //数据源 必填
    operation: 1, //操作单行 1操作 0不操作
    dbTrclick: function(e, ar) { //双击tr事件
    },
    buttonSave: function(ar) {
        alert(JSON.stringify(ar))
    },
    buttonRemove: function(ar) {
        console.log(ar)
        $('#histroyBox').CJJReload();
    }
});

后台分页的样子

$('#histroyBox').CJJTable({
    title: ["装点", "卸点", "运输货物", "下单日期"], //thead中的标题 必填
    body: ["contactName", "contactMobliePhone", "carrierName", "taskNum", "taskCustomerExpectPrice", "taskCustomerBudgetFreight"], //tbody td 取值的字段 必填
    display: [1, 1, 1, 1, 2, 2], //隐藏域,1显示,2隐藏 必填
    pageJson: {
        taskId: 528710,
        pageSize: 10, //ajax请求参数中的每页展示数量 选填
        token: "yJUmunFeG3REqisYAmCfeA"
    },
    url: '/api/quoted/quotedList', //数据源 必填
    operation: 1, //操作单行 1操作 0不操作
    dbTrclick: function(e, ar) { //双击tr事件
        alert(JSON.stringify(ar))
    },
    buttonSave: function(e) {
        alert(JSON.stringify(e))
    },
    buttonRemove: function(ar) {
        console.log(ar)
        $('#histroyBox').CJJReload();
    }
});

更新时间:2017/12/27 11:11:00

更新说明:新增操作单行的数据的修改保存

//前台分页的样子
$('#histroyBox').CJJTable({
    title: ["装点", "卸点", "运输货物", "下单日期", "作者"], //thead中的标题 必填
    body: ["taskCode", "startAddr", "endAddr", "varietiesTypeName", "createDate", "customerName"], //tbody td 取值的字段 必填
    display: [1, 1, 1, 1, 1, 2], //隐藏域,1显示,2隐藏 必填
    pageNUmber: 10, //每页显示的条数 选填
    pageLength: data.length, //选填
    url: data, //数据源 必填
    operation: 1, //操作单行 1操作 0不操作
    dbTrclick: function(e) { //双击tr事件
        alert(e.find('.taskCode').html())
    },
    buttonSave: function(e) {
        console.log(e)
    }
});
//后台分页的样子
/*$('#histroyBox').CJJTable({
    title:["装点","卸点","运输货物","下单日期"],//thead中的标题 必填
    body:["contactName","contactMobliePhone","carrierName","taskNum","taskCustomerExpectPrice","taskCustomerBudgetFreight"],//tbody td 取值的字段 必填
    display:[1,1,1,1,2,2],//隐藏域,1显示,2隐藏 必填
    pageJson:{
        taskId:528710,
        pageSize:10,//ajax请求参数中的每页展示数量 选填
        token:"yJUmunFeG3REqisYAmCfeA"
    },
    url:'/api/quoted/quotedList',//数据源 必填
    operation:1,//操作单行 1操作 0不操作
    dbTrclick:function(e){ //双击tr事件
        alert(e.find('.contactName').html())
    },
    buttonSave:function(e){
        console.log(e)
    }
});*/
相关插件-分页

实用美观的jquery 分页

代码简单,运行速度快,兼容所有浏览器
  分页
 40997  453

jquery分页插件

堪称完美jquery分页插件
  分页
 52806  403

jquery分页插件

jQuery分页插件兼容ie6,代码注释全。
  分页
 37018  336
  分页
 72751  369

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

    泛音 0
    2021/1/24 12:06:15
    这个项目目前还在维护吗?
    reload方法的参数传什么
    回复
    七柒 0
    2019/10/24 16:29:05
    样式还有很大的提升空间 回复
    E。生 0
    2019/6/13 16:01:22
    我显示的数据都是undefined是什么原因,有大神解答一下吗
    回复
    E。生 0
    2019/6/13 14:31:17
    我从后台获取的json数据赋值给一个var dat ,用dat替换其中的data 修改对应参数后,为什么不能显示。请问是不是直接把data数据导入就行了是吗,其他不用修改 回复
    E。生 0
    2019/6/13 13:55:40
    作者在吗,可以私聊一下我吗,遇到一点小问题,非常急
    回复
    E。生 0
    2019/6/13 13:50:43
    histroyBox是在哪里的 回复
    十年好唱不好等y 0
    2019/5/17 17:17:37
    隐藏域具体是什么? 回复
    健忘。 0
    2019/2/15 15:17:32
    编辑能不能改成折叠样式,空白看着好突兀,希望大神解决 回复
    lvjunhao 0
    2019/1/16 14:13:59
    希望能加入排序
        CぁJぁJ3
        2019/1/18 15:20:04
        var list = [{
            a: 3,
            b: 2,
            c: "A",
        }, {
            a: 1,
            b: 2,
            c: "C",
        }, {
            a: 1,
            b: 1,
            c: "B",
        }, {
            a: 4,
            b: 2,
            c: "G",
        }, {
            a: 1,
            b: 3,
            c: "E",
        }]
        
        function listSecond(arr, pri) {  
            var len = arr.length;
            for (var z = 0; z < pri.length; z++) {
                for (var i = 0; i < len; i++) {
                    for (var x = i + 1; x < len; x++) {
                        if (z > 0) {
                            if (arr[i][pri[z - 1]] == arr[x][pri[z - 1]]) {
                                if (arr[i][pri[z]] > arr[x][pri[z]]) {
                                    var tem = arr[x];
                                    arr[x] = arr[i];
                                    arr[i] = tem;
                                }
                            } else {
                                break;
                            }
                        } else {
                            if (arr[i][pri[z]] > arr[x][pri[z]]) {
                                var tem = arr[x];
                                arr[x] = arr[i];
                                arr[i] = tem;
                            }
                        }
                    }
                }
            }
            return arr;
        }
        console.log(listSecond(list, ["c", "a", "b"])) //前端排序,优先级,后端的让后端的人去排序
        np0
        2019/2/22 21:22:03
        看不明白
    回复
    嗯嗯嗯嗯 0
    2019/1/10 8:48:07
    请问这个怎么用啊
        嗯嗯嗯嗯0
        2019/1/10 16:21:06
        请问我这个url 使用后台serlvet中的数据 该怎么使用
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复