jQuery Datatables常用配置

最新推荐文章于 2022-08-09 09:05:05 发布

转载最新推荐文章于 2022-08-09 09:05:05 发布 · 132 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/AnymoreCoder/blog/801298

文章标签：

#javascript #python #大数据 #ViewUI

本文详细介绍了Datatables的各种配置选项，包括如何实现数据的异步加载、自定义数据源、设置表格样式、翻页功能等。此外，还提供了针对特定列的操作方法及语言设置示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

官网：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返回给该行的所有数据）
            });
        }
    });

转载于:https://my.oschina.net/AnymoreCoder/blog/801298