DataTable初始化参数的详细说明

我会带着你远行 2022-10-01 02:48 386阅读 0赞

DataTables是一个可高度配置化的类库，可以在生成HTML tables过程中的所有方面实现定制。所有特性可以通过打开、关闭或者定制来满足你对表格所有的要求。 定制要先定义一个options，然后传入`$().DataTable()`构造函数，通过定制options的内容来实现定制。 - 例如下面的代码scrollY和paging选项用来允许滚动和禁止分页：

$('#myTable').DataTable( {
            scrollY: 300,
            paging: false
        } );

参数列表：

searching: false 屏蔽datatales的查询框
       pagingType: "simple_numbers" 设置分页控件的模式 
       aLengthMenu: [ 10, 25, 50]  设置每页显示条数 
       lengthChange: true 是否允许显示tables的一页展示多少条记录的下拉列表 
       paging: true 全局控制列表的翻页功能,如果设为false,所有的默认翻页控件会被隐藏
       info : true 控制总数信息(标准界面右下角显示总数和过滤条数的控件)的显隐
       ordering : true 全局控制列表的所有排序功能
       processing : true 控制是否在数据加载时出现”Processing”的提示,一般在远程加载并且比较慢的情况下才会出现. 样式需要定义,否则比较丑 
       serverSide : true 服务器端分页
       drawCallback ： function() 表格生成后回调方法 
       language : {} 对表格国际化 
       dom : 定义表格控件在页面的显示顺序,还可以在控件元素外添加DIV和Class
       data : { } 以Javascript数组对象方式设定列表显示数据 
       ajax : {} ajax数据请求 
       columns ： {} 列的初始状态的定义,该参数一个是对象数组,每一个对象元素定义一个列.注意,不需定义的列也必须以null占位 
       columnDefs ：｛｝ 和columns设置非常类似,但可以通过targets属性可以根据灵活的选择需要设定的列.比columns更加灵活

language 详细属性

{  
       "emptyTable":     "表中没有可用数据",  
       "info":           "当前第 _START_ - _END_ 条　共计 _TOTAL_ 条",  
       "infoEmpty":      "没有记录",  
       "infoFiltered":   "(从 _MAX_ 条记录中过滤)",  
       "infoPostFix":    "",  
       "thousands":      ",",  
       "lengthMenu":     "每页显示 _MENU_条",  
       "loadingRecords": "加载中...",  
        "processing":     "处理中...",  
        "search":         "搜索:",  
        "zeroRecords":    "没有找到符合条件的数据",  
        "paginate": {  
            "first":      "首页",  
            "last":       "尾页",  
            "next":       "下一页",  
            "previous":   "上以页"  
        },  
        "aria": {  
            "sortAscending":  ": activate to sort column ascending",  //当一列被按照升序降序的时候添加到表头的ARIA标签，注意列头是这个字符串的前缀
    
            "sortDescending": ": activate to sort column descending"  //当一列被按照升序降序的时候添加到表头的ARIA标签，注意列头是这个字符串的前缀
        }  
    }  
    还可以通过url参数的方式加载
    url: ".../dataTables/language.txt"    
    将以上配置卸载一个文件中通过url加载。

dom详细属性

datatables默认会打开部分特性，比如搜索框，分页显示等等，或许你不喜欢datatables这样去布局，可能你想把分页按钮放在底部的中间，搜索框放在顶部的左上角，不用担心datatables考虑到这个问题，使用dom选项就可以灵活配置各个特性的位置 
    
    
    datatables定义了10个字符表示不同的组件
    •l - Length changing 每页显示多少条数据选项
    •f - Filtering input 搜索框
    •t - The Table 表格
    •i - Information 表格信息
    •p - Pagination 分页按钮
    •r - pRocessing 加载等待显示信息
    •< and > - div elements 一个div元素
    •<"#id" and > - div with an id 指定id的div元素
    •<"class" and > - div with a class 指定样式名的div元素
    •<"#id.class" and > - div with an id and class 指定id和样式的div元素

ajax详细属性

ajax String模式: 直接传入一个string作为远程ajax请求路径 String   对象模式: 支持JQuery.ajax函数的参数设置,支持type,url等标准参数. 例如: $('#example').dataTable( { "ajax": {     "url": url,     "type": "POST"    } } ); JQuery ajax 函数对应参数 ajax.data 和标准JQuery.ajax的data参数作用类似,但效果有所不同.仅当serverSide参数为true的时候,参数属性才有意义,当serverSide开启,DataTables组件会自行封装一个信息类发送给服务端,而ajax.data仅仅是对这个信息类进行调整和添加.   添加方式, ajax.data可以直接赋值一个对象,这个对象的属性会添加到原信息类里面去一起发送到服务端.例如:   $('#example').dataTable( {     "ajax": {       "url": "data.json",       "data": {           "user_id": 451     }   } } );   另外一种选择是传入一个方法,方法的参数就是当前发送到服务器的信息类,在方法中可以修改这个信息类.   $('#example').dataTable( {   "ajax": {     "url": "data.json",     "data": function ( d ) {         d.extra_search = $('#extra').val();     }   } } ); 对象或者方法 ajax.dataSrc 定义服务器返回对象里面保存数据的属性名称,默认为data,也即是说,在返回的Json数据中,所有列表数据保存在data属性中,这个属性不太建议修改.

columns详细属性

列的初始状态的定义,该参数一个是对象数组,每一个对象元素定义一个列.注意,不需定义的列也必须以null占位,比如: "columns": [     {   "searchable": false },     null, null  ] 
     
      
       columns.data 列的数据名,对应数据里面的属性名 String 无 columns.name 给列设置独立的名称,目前看意义不大 String 无 columns.orderable 设置列是否允许排序 Boolean true columns.searchable 设置列是否允许过滤 Boolean true columns.type 通过设置列的类型让控件在排序和过滤这个列是能更好的处理这个列的数据,比如日期,货币等.具体种类很多请参考这里: http://datatables.net/reference/option/columns.type String 无 columns.visible 设置列的可见性,true为显示 Boolean true columns.width 强行设置列的宽度,支持数字和任何CSS写法,比如20%. String 无 columns.render 非常有用的函数,自定义列的内容.该属性比较常见的用法是函数用法,通过这个函数可以自定义改造列的任何内容,如果要在列中显示比较复杂的内容,这是一个比较好的选择.比如在列中加入功能按钮. 例如: "render": function ( data, type, row,   meta ) {       return   '<a href="'+data+'">Download</a>'; } 4个属性的意思是: data : 当前单元格的数据 type: 当前列的类型 row: 当前行完整的数据对象 meta: 为一个子对象,包含3个属性    row: 当前行的索引    col: 当前列的索引    settings: 当前DataTables控件的setttings对象 Function 无

columnDefs详细属性

"columnDefs": [ {         "targets": 0,         "searchable": false } ] targets可以有多种写法: 0或者正整数(可用数组): 表示正向列的索引 负数(可用数组): 表示反向列的索引 字符串: 匹配th的class来选择列. "_all":    所有列,也是默认值.