DataTable_配置参数

本文详细介绍了jQuery DataTable插件的高级配置选项,包括显示记录数、禁用自适应宽度、重新初始化表格、显示加载进度、服务器端数据导入等功能,以及国际化配置和列值设置,适合需要深入定制数据表格展示效果的开发者。
摘要由CSDN通过智能技术生成
$('#dataTable_ID1').dataTable({
    //"aaSorting" : [[1, "asc"]], //默认的排序方式,第1+1列,升序排列
    "aLengthMenu" : [5, 10, 25, 50, 100], //更改显示记录数选项(默认:[10,25,50,100])
    "bAutoWidth" : false, // 禁用自适应宽度(默认:true)
    //"bDeferRender":false,//推迟创建表元素每个元素,直到它们都创建完成(默认:false)
    "bDestroy" : true,//重新初始化表格,未匹配到表格则新建 (默认:false)
    "bFilter" : false,// 不适用搜索框过滤(默认:true)
    //"bInfo" : true, //显示页脚信息,左下角显示记录数(默认:true)
    //"bJQueryUI" : false, //不使用使用 jQury的UI theme(默认:false)
    "bLengthChange" : true,//显示每页几条数据的显示框(默认:true)
    //"bPaginate" : true, //显示(应用)分页器,不开启全显示(默认:true)
    "bProcessing" : true,//加载进度提示(默认:false)
    //"bScrollInfinite" : true, //启动初始化滚动条(默认:false)
    //"bRetrieve":false,//使用指定的选择器检索表格,注意,如果表格已经被初始化,该参数会直接返回已经被创建的对象,并不会顾及你传递进来的初始化参数对象的变化,将该参数设置为true说明你确认已经明白这一点,如果你需要的话,bDestroy可以用来重新初始化表格(默认:false)
    "bServerSide" : true,//启动服务器端数据导入(默认:false)
    "bSort" : true,//启用字段可排序(默认:true) TODO:单个列排序可禁用
    //"bStateSave" : true,//开启状态缓存,如分页信息,展示长度,开启后在ajax刷新纪录的时候不会将个性化设定重置为初始化状态,如: 会导致默认的aaSorting设置失效(默认:false)
    //"bScrollCollapse" : true, //开启高度自适应,当数据条数不够分页数据条数的时候,插件高度随数据条数而改变
    //"bScrollAutoCss":true,//指明滚动的标题元素是否被允许设置内边距和外边距等(默认:true)
    //"bScrollCollapse":false,//当垂直滚动被允许的时候,不强制强制表格视图在任何时候都是给定的高度(默认:false)
    //"bSortCellsTop":false,//允许使用底部的单元格,true为顶部(默认:false)
    //"iCookieDuration":7200,//cookie储存时长(单位:s)(默认:7200)
    //"iDeferLoading":null,//延时加载(type:int)(默认:null)
    //"iDisplayLength":10,//每页显示几条数据(默认:10)
    //"iDisplayStart":0,//当前页开始的记录序号(默认:0)
    //"iScrollLoadGap":100,//当前页面还有多少条数据可供滚动时自动加载新的数据(默认:100)
    "sDom": '<"top"l>rt<"bottom_left"i><"bottom_right"p><"clear">',//布局定义
        //格式指定:包括分页,显示多少条数据和搜索等
        //The following options are allowed:
        //    'l' - 左上角按个下拉框,10个,20个,50个,所有的哪个
        //    'f' - 快速过滤框
        //    't' - 表格本身
        //    'i' - 分页信息
        //    'p' - 分页按钮
        //    'r' - 现在正在加载中……
        //The following constants are allowed:
        //    'H' - jQueryUI theme "header" classes ('fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix')
        //    'F' - jQueryUI theme "footer" classes ('fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix')
        //The following syntax is expected:
        //    '<' and '>' - div 元素
        //    '<"class" and '>' - 给div加clasa
        //    '<"#id" and '>' - 给div加上id
        //Examples:
        //    '<"wrapper"flipt>'
        //    '<lf<t>ip>'
        //例子:
        //'<"top"i>rt<"bottom"flp><"clear">'
        //解析结果:
        //    <div class="top">
        //    i
        //    </div>
        //    rt
        //    <div class="bottom">
        //    flp
        //    </div>
        //    <div class="clear"></div>
    "sPaginationType" : "full_numbers",//全页数显示 || "two_button":显示两个按钮(默认:two_button)
    "sAjaxSource" : mediaHost+'/wxUsers/getDataTable1',
    //"sAjaxDataProp" : "aaDataName",//指定返回的数据对象名称(默认:aaData)
    //"sScrollX" : 720, //DataTables的宽,可以是css设置,或者一个数字(单位:px),大于则开启水平滚动(默认:"blank string - i.e. disabled")
    //"sScrollY" : 480, //DataTables的高,可以是css设置,或者一个数字(单位:px),大于则开启垂直滚动(默认:"blank string - i.e. disabled")
    //"sCookiePrefix" : "SpryMedia_DataTables_",//指定cookie前缀(默认:"SpryMedia_DataTables_")


    //初始化过滤状态
    //"oSearch":{
    //    "sSearch":"value",
    //    "bRegex":false, //value不当成正则式
    //    "bSmart":true //灵活匹配策略
    //},

    //数据表列值
    "aoColumns" : [ {
        "mDataProp" : "data_properties0",
        "sClass" : "center",
        "bSortable" : false
        //"sDefaultContent":"",//此列默认值为"",防数据无值报错
        //"bVisible" : false //不显示此列
        }, {
            "mDataProp" : "data_properties1",
            "sClass" : "center",
            "bSortable" : false
        },  {
            "mDataProp" : "data_properties2",
            "sClass" : "center",
            "bSortable" : false
        }, {
            "mDataProp" : "data_properties2",
            "sClass" : "center",
            "bSortable" : false
        },
    ],

    //国际化配置
    "oLanguage" : {
        "sProcessing" : "正在加载数据,请稍后...",
        "sLengthMenu" : "每页显示 _MENU_ 条记录",
        "sZeroRecords" : "没有数据!",
        "sEmptyTable" : "表中无数据存在!",
        "sInfo" : "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录",
        "sInfoEmpty" : "显示0到0条记录",
        "sInfoFiltered" : "数据表中共有 _MAX_ 条记录",
        //"sInfoPostFix": "",
        //"sSearch": "搜索:",
        //"sUrl": "",
        //"sLoadingRecords": "载入中...",
        //"sInfoThousands": ",",
        "oPaginate" : {
            "sFirst" : "首页",
            "sPrevious" : "上一页",
            "sNext" : "下一页",
            "sLast" : "末页"
        }
        //"oAria": {
        //    "sSortAscending": ": 以升序排列此列",
        //    "sSortDescending": ": 以降序排列此列"
        //}
    },
    /**
     *
     * @param nRow 当前行内容
     * @param aaData 当前数据对象
     * @param iDisplayIndex 当前行索引,从0开始
     * @param iDisplayIndexOfAadata 当前对象所在对象数组的索引,从0开始
     * @returns {*}
     */
    "fnRowCallback" : function(nRow, aaData, iDisplayIndex, iDisplayIndexOfAadata) {

        //修改第一列为多选框内容
        var firstTDHtml = '<label>firstTDHtml</label>';
        $('td:eq(0)', nRow).html(firstTDHtml);

        //修改第二列为序号
        var secondTDHtml = iDisplayIndex+1;
        $('td:eq(1)', nRow).html(secondTDHtml);

        return nRow;
    },
    "fnDrawCallback" : function(oSettings) {
        // jAlert( 'DataTables 重绘了' );
    },
    "fnFooterCallback" : function(nFoot, aData, iStart, iEnd, aiDisplay) {
        // jAlert("FooterCallback");
    },
});

转自:https://www.jianshu.com/p/51ea2f828c57

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值