jQuery Datatables常用配置
博客专区 > Anymore 的博客 > 博客详情
jQuery Datatables常用配置
Anymore 发表于1年前
jQuery Datatables常用配置
  • 发表于 1年前
  • 阅读 294
  • 收藏 2
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

摘要: 最近做后台管理平台用得比较多,目前贴上来的都是用过的,后续有用到更好的再添加。

官网:Datatables官网 中文网:Datatables中文网

我用过的一些配置:

    var table=$('#tableId').dataTable({
        "destroy": true,//是否需要重复渲染表格,若是则true.
        "data": data,//数据来源,data来自上文ajax请求回掉函数中的data或定义在本地的data
        //ajax与上句的data有任何一个就可以了
        "ajax":{//datatable中的ajax
            async: true,//同步false异步true
            url:simMonitor.domain+"sim/searchSimBindState",
            dataSrc://dataSrc相当于success,在datatable里面不能用success方法,会覆盖datatable内部回调方法
                    function(data){
                        //data即服务器返回的数据
                        return data;//自定义数据源,默认为data
                    },
            type:"post",
            data:formData//ajax请求提交给服务器端的数据,一般是表单数据
        },
        "createdRow": function ( row, data, index ) {//该函数可对某指定行做操作,一般用于增加某种效果
            /* 设置表格中的内容居中 */
            $('td', row).attr("class","text-center");//所有行,text-center的属性需自己在相关css中自己写
            $('td:nth-child(3)', row).attr("class","textLeft");//第3列
            $('td:nth-child(10)', row).attr("class","textLeft");//第10列
        },
        "bStateSave": false,//状态保存,使用了翻页或者改变了每页显示数据数量,会保存在cookie中,下回访问时会显示上一次关闭页面时的内容。这个数据是记录在cookies中的,
        //打开了这个记录后,即使刷新一次页面,或重新打开浏览器,之前的状态都是保存下来的,并且当值为true时aoColumnDefs不能隐藏列
        "ordering":false,//排序功能
        "bAutoWidth":false,//宽度自适应。一般禁止,使用不当容易造成报错。(目前我还没有使用过)
        "searching":false,//右上角搜索框的显示与否
        "bLengthChange": true,//左上角改变每页显示数据数量的显示与否
        "sScrollX":true,//x轴滚动条,若是此项设置导致thead与tbody有间隙,可设置margin消除或在table的html中设置width="100%" cellspacing="0"
        "bInfo": true,//页脚信息的显示与否
        "bPaginate" : true,//翻页功能的显示与否
        "sCharSet":"utf-8",//设置编码格式
        "deferRender": true,//当处理大数据时,延迟渲染数据,有效提高Datatables处理能力
        "oLanguage": {//设置语言
            "sLengthMenu": "每页显示 _MENU_ 条记录",
            "sZeroRecords": "抱歉, 没有找到",
            "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
            "sInfoEmpty": "没有数据",
            "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "前一页",
                "sNext": "后一页",
                "sLast": "尾页"
            },
            "sProcessing": true//"加载中...."的显示与否
        },
        "columns":[//渲染列,一列一列将数据填充进去,thead中标识有多少列此处就写多少列,并且将数据填充进去,数据来源于上文的data,函数中的row即data
            {"data":function(row){
                cellData=(row.operator == "" || row.operator == null) ? "--":row.operator;
                return cellData;
            },
                "type" : "string"
            }
            //其他列data省略....
        ],
        "rowCallback": function( row, data ) {//行的回调函数
            $(row.cells[13]).click(function(){
                console.log(data);
                //每行的第13个子元素(列)被点击之后,会打印出该行的所有值(不仅仅是显示的,而是data返回给该行的所有数据)
            });
        }
    });
标签: DataTables
共有 人打赏支持
粉丝 4
博文 54
码字总数 25101
×
Anymore
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: