jQuery table分页插件

所属分类:导航-分页

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分页效果

简单分页效果
  分页
 28296  65

基于Vue的分页插件pagination.js

基于jQuery的分页插件大家都用过很多了吧,今天分享一下基于Vue的分页插件pagination.js
  分页
 20111  30

官网分页特效

官网分页特效
  分页
 13788  82
  分页
 20069  50

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

    ╁花开半夏、乱了流年メ 0
    2018/1/18 10:26:39
    じ☆唯她命☆じ 0
    2018/1/12 15:06:57

    谢谢楼主了

        ┵.微笑丶掩饰泪水0
        2018/1/15 22:31:45

        你好,你有呃个能发我一份么?

    回复
    文艺小武 0
    2018/1/10 12:03:32

    双击tr没反应 求大神解决

    dbTrclick:function(e,ar){//双击tr事件
          alert(JSON.stringify(ar));
    },
        CぁJぁJ0
        2018/1/10 17:50:57

        不好意思,上次换了一个方法没去校验,最新上传了一个版本上面已经修改完毕

    回复
    文艺小武 0
    2018/1/8 20:41:49

    不知道大家发现没有,批量删除时,选中的数据都是重复一条数据:

    回复
    等。 0
    2018/1/8 10:52:29

    怎么获取当前页码呢?各位大神求教了

        CぁJぁJ1
        2018/1/8 13:08:49

        $(id+ ' .tfootRight input').val();

    回复
    文艺小武 0
    2018/1/5 13:50:02

    后台分页,试了半天 就是不进后台

    //后台分页的样子
        $('#histroyBox').CJJTable({
       title:["标题","账号","手机号","邮箱","日期","文本"],//thead中的标题 必填
       body:["titles","userName","phone","email","date","texTarea"],//tbody td 取值的字段 必填
       display:[1,1,1,1,1,1],//隐藏域,1显示,2隐藏 必填
       pageJson:{
       taskId:528710,
       pageSize:10,//ajax请求参数中的每页展示数量 选填
       token:"yJUmunFeG3REqisYAmCfeA"
       },
       url:'<%=path%>/layui/demo/queryjQueryPate.action',
       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();
          }
    });
        CぁJぁJ1
        2018/1/5 15:36:51

        里面对应的后台返回的参数要一致,我给你的对应的返回值

        {
            "message": "",
            "success": "",
            "errorCode": "",
            "responseTime": "",
            "total": 22,
            "list": [{
                "carrierName": "杭州昊晨运输有限公司",
            }]
        }

        具体的你看下是什么错误

        CぁJぁJ0
        2018/1/5 15:56:02

        主要是list跟total

    回复
    qquser 0
    2018/1/5 10:14:46

    后台分页,前台如何做

        文艺小武1
        2018/1/5 13:59:45

        body里面字段和后台实体类字段对应上,并且后台返回数据格式是JSON 如下:

        [ {
            "id" : "1231",
            "name" : "小张",
            "sex" : "男",
            "age" : "22",
          }, {
          "id" : "1234",
            "name" : "小李",
            "sex" : "男",
            "age" : "21",
          }]
        南起。0
        2018/1/12 11:08:46
        这个也需要做后台分页吗
    回复
    CぁJぁJ 0
    2018/1/3 16:34:09

    修改了部分点击修改数据后的完成按钮,出现的bug,会在审核通过后改号,还需要什么功能,请在评论区提一下

    回复
    CぁJぁJ 0
    2018/1/3 9:47:27

    修改了部分点击修改数据后的完成按钮,出现的bug

    回复
    bianyingshan 0
    2018/1/2 20:12:34
取消回复