JQUERY dataTable 参数说明

最新推荐文章于 2021-08-27 21:52:16 发布

zzyhjm

最新推荐文章于 2021-08-27 21:52:16 发布

阅读量2.7k

点赞数 2

dataTable 参数说明

下面是一些常用的参数列表,比较常用或者有价值的标示为绿色.

功能参数(Features)

参数名	说明	参考值	默认值
autoWidth	定义是否由控件自动控制列宽	Boolean	true
deferRender	定义在render时是否仅仅render显示的dom,在显示大量数据的情况下强烈建议设为true,显示少量数据或者真翻页方案可以设为false,注意在设为true时无法通过函数获取所有行的dom对象—因为它们并不存在.	Boolean	false
info	控制总数信息(标准界面右下角显示总数和过滤条数的控件)的显隐	Boolean	true
lengthChange	控制是否能够调整每页的条数,如果设为false,标准的每页条数控制控件也会被隐藏.	Boolean	true
ordering	全局控制列表的所有排序功能.	Boolean	true
paging	全局控制列表的翻页功能,如果设为false,所有的默认翻页控件会被隐藏	Boolean	true
processing	控制是否在数据加载时出现”Processing”的提示,一般在远程加载并且比较慢的情况下才会出现. 样式需要定义,否则比较丑.	Boolean	false
scrollX	控制在列过多过宽是,是否出现水平滚动条.注意使用这个参数时最好关闭响应式设计	Boolean	false
scrollY	定义一个高度,当列表内容超过这个高度时,显示垂直滚动条,这个高度不算表头和翻页搜索等工具条的空间.支持数字或者css写法比如: 200或者’200px’	Number / String	无
searching	控制控件的搜索功能,如果为false,控件的搜索功能被完全禁用,而且默认搜索组件会被隐藏.	Boolean	true
serverSide	当设为true时,列表的过滤,搜索和排序信息会传递到Server端进行处理,实现真翻页方案的必需属性.反之,所有的列表功能都在客户端计算并执行	Boolean	false

数据参数(Data)

参数名	说明	参考值
data	以Javascript数组对象方式设定列表显示数据	数组对象
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属性中,这个属性不太建议修改.

配置参数(Options)

参数名

说明

参考值

默认值

deferLoading

这个参数只有在ServerSide为Ture的时候才有作用,主要是针对列表已经通过HTML显示了一部分数据,而通知远程加载可以忽略这部分数据,在实际使用中这种情况并不常见.

Number /Array

false

destroy

设为ture时通知dataTable函数完全重新建立一个新的控件实例,在一个页面内反复对同一个控件加载dataTable函数并且想重新建立控件时使用.

Boolean

false

displayStart

列表初始显示的行索引,根据给出的行索引会自动翻页,比如一个每页10个的列表,那么给出20可以让其翻到第二页

Number

无

dom

比较复杂的配置项,简言之就是通过一个自定义的字符串来定义DataTables里面所有组件的显示,位置和显隐.

具体请详见:

http://datatables.net/reference/option/dom

String

“lfrtip”

lengthMenu

定义页面长度组件里面的选项.

Array

[ 10, 25, 50]

orderCellsTop

当然表头有多层td组成的时候,必须定义哪一个td的数据用于排序,false表示底部td,true表示顶部td. 比如以下情况:

1	2.1
	2.2

true的时候排序会用2.1, false的时候排序会用2.2.

Boolean

false

orderClasses

定义是否排序的列进行高亮显示

Boolean

true

order

定义列表的初始排序设定,为一个2维数组,子数组包括2个值,列索引和排序方向(asc/desc): 例如

"order": [[ 0, 'asc' ], [ 1, 'asc' ]]

Array

[[0, 'asc']]

orderMulti

控制是否支持多重排序,如果为true,可以通过shift+点击列头实现多重排序,或者通过API实现,否则禁用该功能.

Boolean

true

orderFixed

自定义固定的排序策略,该策略在任何排序操作中总是起效.可以通过对一个列的固定排序(可以是隐藏的列)来定义列表默认的排序策略.

数组方式,定义优先排序策略,如:

"orderFixed": [ 0, 'asc' ]

该参数说明无论如何排序,永远先进行第一列的正向排序.

对象方式,可以利用关键字pre或post来定义这个规则是优先生效还是置后生效.

"orderFixed": {

"pre": [ 0, 'asc' ],

"post": [ 1, 'asc' ]

}

Array/Object

无

pageLength

定义初始的页长

Number

pagingType

定义翻页组件的样式(有4个选择):

simple - 只有上一页和下一页2个按钮

simple_numbers – 上一页,下一页和页码

full – 首页,末页,上一页,下一页4个按钮

full_numbers – 全部按钮和页面

String

simple_numbers

scrollCollapse

在设置了一定的scrollY值后起效,为true时,当列表内容不足以撑满scrollY的设定值时,列表高度会自动适应内容.

Boolean

false

定义列表的初始搜索/过滤条件

Search对象可以有以下属性:

Object

无

search.search

过滤字符串,注意在默认设置下,所有列的数据都会参与过滤.比如当这个属性为”a”的时候,任何一个列只要包含”a”的行就会被显示.为空表示全部

String

无

search.caseInsensitive

搜索是是否忽略大小写,true为忽略

Boolean

true

search.regex

定义搜索字符串是否为一个正则表达式

Boolean

fasle

search.smart

禁用获取启用DataTables控件内置的只能过滤算法,这个算法会把搜索字符串进行分割并只能搜索,关闭这个算法仅仅实现简单的字符串查找,false为关闭

Boolean

true

searchCols

分别定义每个列的过滤条件.该参数是一个对象数组,每个对象有2个属性:

search: 搜索字符串

escapeRegex: 是否是正则表达式

注意不需要设置过滤的列也需要用null占位,比如:

"searchCols": [

null,

{ "search": "My filter" },

null,

{ "search": "^[0-9]", "escapeRegex": false }

]

Array

无

stripeClasses

定义一个字符串数组,在显示行的时候依次使用里面的字符串作为行的class

Array

‘odd’ & ‘even’

列定义参数(Columns)

参数名	说明	参考值	默认值
columns	列的初始状态的定义,该参数一个是对象数组,每一个对象元素定义一个列.注意,不需定义的列也必须以null占位,比如: "columns": [ { "searchable": false }, null, null ]	Array	无
columnDefs	和columns设置非常类似,但可以通过targets属性可以根据灵活的选择需要设定的列.比columns更加灵活.比如: "columnDefs": [ { "targets": 0, "searchable": false } ] targets可以有多种写法: 0或者正整数(可用数组): 表示正向列的索引负数(可用数组): 表示反向列的索引字符串: 匹配th的class来选择列. "_all": 所有列,也是默认值.
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	无

可以看到,DataTables的Options设置还是比较全面和丰富的,当然Options仅仅能在控件初始化的时候对控件进行控制和影响,如果要在控件使用过程中对它进行控制和变化,就需要用到DataTables的函数库(API).

Jquery DataTable基本使用

2017-12-22 18:02 by xiashengwang, 2022 阅读, 0 评论, 收藏, 编辑

1，首先需要引用下面两个文件

2，DataTable支持的数据类型

https://www.datatables.net/manual/data/

2.1 数组

vardata = [
    [
        "Tiger Nixon",
        "System Architect",
        "Edinburgh",
        "5421",
        "2011/04/25",
        "$3,120"
    ],
    [
        "Garrett Winters",
        "Director",
        "Edinburgh",
        "8422",
        "2011/07/25",
        "$5,300"
    ]
]

2.2 对象

[
    {
        "name":       "Tiger Nixon",
        "position":   "System Architect",
        "salary":     "$3,120",
        "start_date": "2011/04/25",
        "office":     "Edinburgh",
        "extn":       "5421"
    },
    {
        "name":       "Garrett Winters",
        "position":   "Director",
        "salary":     "$5,300",
        "start_date": "2011/07/25",
        "office":     "Edinburgh",
        "extn":       "8422"
    }
]

2.3 自定义实例（本质和2.2一样）

functionEmployee ( name, position, salary, office ) {
    this.name = name;
    this.position = position;
    this.salary = salary;
    this._office = office;
    this.office = function() {
        returnthis._office;
    }
};   

$('#example').DataTable( {
    data: [
        newEmployee( "Tiger Nixon", "System Architect", "$3,120", "Edinburgh"),
        newEmployee( "Garrett Winters", "Director", "$5,300", "Edinburgh")
    ],
    columns: [
        { data: 'name'},
        { data: 'salary'},
        { data: 'office'},
        { data: 'position'}
    ]
} );

2.4 datatable的数据来源

1）DOM

如果没有指定data，ajax选项，则DataTable会将当前table的html标签上内容转换成对应的数据（Array数据形式）。

2）Html5

Data-* 标签上可以指定不同的值，用于排序和查找，td内部标签的值对应当前单元格的数据。

<td data-search="21st November 2016 21/11/2016" data-order="1479686400">
    21st November 2016
</td>

3）javascript

通过data配置，指定数据源。可以通过DataTables API row.add() row().remove()操作行数据。

4）Ajax

通过服务器端分页的方式，取得数据。返回的数据只能是json数组或对象（上面的2.1和2.2）.

3，有两种分页方式

3.1 客户端分页

这种方式，代码最简单，整个数据量在10000条以内可以考虑。假设已经有了下面的table：

<table id="table1" class="table table-condensed">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Score</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td>
            <td>zhang</td>
            <td>98</td>
        </tr>
        <tr>
            <td>002</td>
            <td>wang</td>
            <td>99</td>
        </tr>
    </tbody>
</table>

简单调用一句话（使用默认设置），就可以使table具有排序，查找，分页的基本功能。

$(function () {
$("#table1").DataTable({
});
});

3.2 服务器端分页

这种方式针对大数据量的table（10万条以上），每次只读取当前的一页数据，分页在后台做。代码相对复杂，不过页面响应更快，

服务器端的分页一般要求我们先定义thead表头，tbody可以不写。

4，配置参数

这些配置参数可以通过javascript进行设置，也可以直接用HTML5标签data-* 的方式写在table的标签中。

所有的配置选项：https://www.datatables.net/reference/option/

 $(function () {

        $("#table1").DataTable({
            // 是否允许检索
            "searching": false,
            // 是否允许排序
            "ordering": true,
            // 初期排序列
            //"order": [[0,'asc'],[1,'desc']],
            // 是否显示情报 就是"当前显示1/100记录"这个信息
            "info": false,
            // 是否允许翻页，设成false，翻页按钮不显示
            "paging": false,
            // 水平滚动条
            "scrollX": false,
            // 垂直滚动条
            "scrollY": false,
            // 件数选择功能 默认true
            "lengthChange": false,
            // 件数选择下拉框内容
            "lengthMenu": [10, 25, 50, 75, 100],
            // 每页的初期件数 用户可以操作lengthMenu上的值覆盖
            "pageLength": 50,
            //翻页按钮样式
            // numbers:数字
            // simple:前一页，后一页
            // simple_numbers:前一页，后一页，数字
            // full:第一页，前一页，后一页，最后页
            //full_numbers:第一页，前一页，后一页，最后页，数字
            //first_last_numbers:第一页，最后页，数字
            "pagingType": "full_numbers",
            // 行样式应用 指定多个的话，第一行tr的class为strip1，第二行为strip2，第三行为strip3.
            // 第四行以后又开始从strip1循环。。。 如果想指定成斑马条状，这里的class必须指定为2个。
            "stripeClasses": ['strip1', 'strip2', 'strip3'],
            // 自动列宽
            "autoWidth": true,
            // 是否表示 "processing" 加载中的信息，这个信息可以修改
            "processing": true,
            // 每次创建是否销毁以前的DataTable,默认false
            "destroy": false,
            // 控制表格各种信息的表示位置（比较复杂） 默认:lfrtip
            // 具体参考：https://datatables.net/reference/option/dom
            "dom": 'lrtip',
            "language": {
                "processing": "DataTables is currently busy",
                // 当前页显示多少条
                "lengthMenu": "Display _MENU_ records",
                // _START_（当前页的第一条的序号） ,_END_（当前页的最后一条的序号）,_TOTAL_（筛选后的总件数）,
                // _MAX_(总件数),_PAGE_(当前页号),_PAGES_（总页数）
                "info": "Showing page _PAGE_ of _PAGES_",
                // 没有数据的显示（可选），如果没指定，会用zeroRecords的内容
                "emptyTable": "No data available in table",
                // 筛选后，没有数据的表示信息，注意emptyTable优先级更高
                "zeroRecords": "No records to display",
                // 千分位的符号，只对显示有效，默认就是","  一般不要改写
                //"thousands": "'",
                // 小数点位的符号，对输入解析有影响，默认就是"." 一般不要改写
                //"decimal": "-",
                // 翻页按钮文字控制
                "paginate": {
                    "first": "First page",
                    "last": "Last page",
                    "next": "Next page",
                    "previous": "Previous page"
                },
                // Client-Side用，Server-Side不用这个属性
                "loadingRecords": "Please wait - loading..."
            },
            // 默认是false
            // 如果设为true，将只渲染当前也的html，速度会很快，但是通过API就访问不到所有页的数据，有利有弊
            //"deferRender": false,
            // 服务器端处理方式
            "serverSide": true,

            // ajax选项 可以直接简单指定成请求的文件
            //"ajax": "data.json",
            // 也可以用对象来配置，更加灵活
            "ajax": {
                // url可以直接指定远程的json文件，或是MVC的请求地址 /Controller/Action
                url: "data.json",
                type: 'POST',
                // 传给服务器的数据，可以添加我们自己的查询参数
                data: function (param) {
                    param.opportunityNO = $('#txtSearch').val();
                    return param;
                },
                //用于处理服务器端返回的数据。 dataSrc是DataTable特有的
                dataSrc: function (myJson) {
                    if (myJson.timeout) {
                        return "";
                    }
                    return myJson;
                }
            },
            //指定用于行ID的属性名 默认是：DT_RowId
            "rowId": 'staffId',
            // 列定义
            "columns": [            
            {
                // data 可以是属性名，或嵌套属性（WORKTM1.ID）,数组ArrOne[,] 用中括号中的字符连接数组后返回。
                "data": "WORKTM1",
                // 这里的class会应用到td上面
                "className": "dt-body-right",
                // 列宽
                "width": 40,
                // 很灵活，描绘每个单元格
                // data：当前cell的data，这个data和type有关
                // type：filter,display,type,sort
                // row:当前行数据
                // https://datatables.net/reference/option/columns.render
                "render": function (data, type, row, meta) {
                    return type === 'display' && data.length > 40 ?
                    '<span title="' + data + '">' + data.substr(0, 38) + '...</span>' : data;

                },
                // 是否可排序 默认值：true
                "orderable": true,
                // 指定当前列排序操作的时候，用哪一列（几列）的数据进行真正的排序（通常是隐藏的）
                "orderData": [0, 1],
                // 这个属性 和type属性相似，指定排序时候这一列该怎么转换数据,
                //需要用到其他的插件 详细： https://datatables.net/plug-ins/sorting/
                "orderDataType": "dom-text",
                // 是否显示当前列 默认值：true
                "visible": false,
                // 是否允许搜索此列 默认值：true
                "searchable": false,
                //这个属性仅Client-Side有效， Server-Side在服务器端排序 
                //主要用于排序和筛选，指定当前列作为什么类型进行解析
                //内置值：date，num，num-fmt，html-num，html-num-fmt，html，string
                // 还可以用其他插件提供的类型 ：详细： https://datatables.net/plug-ins/sorting/
                // 有html开头的，都会讲html标签先移除后进行数据处理
                "type": "html",
                // 列头文字，如果没有指定thead，则会生成。如何指定了thead，则会覆盖当前列头文字
                "title": "My column title",
                // defaultContent:默认值，属性值为null或undefined就会用这个值
                "defaultContent": "<i>Not set</i>",
                // 单元格类型："th","td"
                "cellType" : "td",
                // 单元格创建完后的回调，可以作为render的补充
                // cell:TD的dom
                // cellData:原始的单元格数据，如何render中进行了格式化，用$(cell).html()来取格式化后的数据
                // rowData:行数据
                // row:行号
                // col:列号
                "createdCell": function (cell, cellData, rowData, row, col) {
                    if ( cellData < 1 ) {
                        $(td).css('color', 'red')
                    }
                }
            },
            { "data": "WORKTM2", "className": "dt-body-right", "width": 40 },
            { "data": "WORKTM3", "className": "dt-body-right", "width": 40 },
            { "data": "WORKTM4", "className": "dt-body-right", "width": 40 },
            { "data": "RESTDAY1", "className": "dt-body-right", "width": 40 },
            { "data": "RESTDAY2", "className": "dt-body-right", "width": 40 },
            { "data": "RESTDAY3", "className": "dt-body-right", "width": 40 },
            { "data": "RESTDAY4", "className": "dt-body-right", "width": 40 },
            { "data": "RESTDAY5", "className": "dt-body-right", "width": 40 }
            ],
            // 和上面的columns类似，columns可以定义的属性，都可以在这里定义，
            // 另外增加targets属性用于指定列范围（可以多列）
            // 优先级：上面的columns高于columnDefs
            columnDefs: [
            {
                targets: [0, 2],
                render: function (data, type, row, meta) {
                    if (type === 'display') {
                        var ctemp = $(".dayinfo").children().eq(meta.col).attr("class");
                        var cname = ctemp ? ctemp : "";
                        var readonly = $(".dayinfo").children().eq(meta.col).attr("data-fixed") == "fixed" ? "readonly" : "";
                        return '<input type="input" class="form-control dt-body-center ' + cname + '" ' + readonly + ' value="' + data + '">';
                    }
                    return data;
                },
            }],
            // 每一行创建完调用的函数
            "createdRow": function (row, data, dataIndex) {
                // row : tr dom
                // data: row data
                // dataIndex:row data's index
                if (data[4] == "A") {
                    $(row).addClass('important');
                }
            },
            // 每一行被创建，但还没有被加载到document中，这个函数优先于createdRow
            // 个人觉得用createdRow更好
            "rowCallback": function (row, data, index) {
                // row : tr dom
                // data: row data
                // index:row data's index
                if ( data[4] == "A" ) {
                    $('td:eq(4)', row).html( '<b>A</b>' );
                }
            },
            //thead被描画后调用
            "headerCallback": function (thead, data, start, end, display) {
                //thead:dom， data:原始的datatable数据，display：当前显示排序好的datatable数据（有可能经过排序）
                // start end ：当前dispaly数据的开始结束序号
                $(thead).find('th').eq(0).html( 'Displaying '+(end-start)+' records' );
            },
            // tfoot被描画后调用，通常可用于计算合计值
            "footerCallback": function (tfoot, data, start, end, display) {
                //tfoot:dom， data:原始的datatable数据，display：当前显示排序好的datatable数据（有可能经过排序）
                // start end ：当前dispaly数据的开始结束序号
                var api = this.api();
                $( api.column( 5 ).footer() ).html(
                    api.column( 5 ).data().reduce( function ( a, b ) {
                        return a + b;
                    }, 0 )
                );
            },
            // 初始化，描画都已经完成，常用于ajax
            "initComplete": function( settings, json ) {
                $('div.loading').remove();
            },
            // 每次DataTable描画后都要调用，调用这个函数时，table可能没有描画完成，
            // 所以不要在里面操作table的dom，要操作dom应放在initComplete
            "drawCallback": function( settings ) {
                var api = this.api();
 
                // Output the data for the visible rows to the browser's console
                console.log( api.rows( {page:'current'} ).data() );
            },
            // 这个函数可以改写数字的格式化方式
            // 默认DataTable用 language.thousands来解析数字，“，”
            "formatNumber": function ( toFormat ) {
                return toFormat.toString().replace(
                  /\B(?=(\d{3})+(?!\d))/g, "'"
                );
            }
        });
    });

5，服务器端的参数

    // 发送到服务器端的数据
    // draw：计数器，返回数据的时候用这个值设定
    // start:开始记录（0 besed index）
    // length:每页条数
    // search[value]：检索文字
    // order[i][column]：int 排序列的序号 例如：2，代表第3列排序 i代表有几个排序，一个的话服务器端这样写“order[0][column]”
    // order[i][dir]：排序的方式"desc","asc"
    // 下面comuns中的i取值从0~columns.length，所有的columns信息都发送到了服务器
    // columns[i][data]：columns上定义的data属性值
    // columns[i][name]：columns上定义的name属性值
    // columns[i][searchable]：列能不能检索
    // columns[i][orderable]：列能不能排序
    // columns[i][search][value]：列的检索值 string

    // 服务器返回的数据
    // draw：和Request的draw设定成一样的值
    // recordsTotal：所有的总件数
    // recordsFiltered：筛选后的总件数
    // data：返回的数据
    //   每一行数据上面，可以包含这几个可选项
    //   DT_RowId：加在行上的ID值
    //   DT_RowClass：加在行上的Class
    //   DT_RowData：加在行上的额外数据（object）
    //   DT_RowAttr：加在行上的属性（object）
    // error:如果有错误，就设定这个值，没有错误，不要包含这个值

例子：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Configuration;
using AppBlock;
using System.Data.SqlClient;
using Newtonsoft.Json;

namespace alfest.Ajax
{
  public partial class Category : System.Web.UI.Page
  {
    string mode, option, user, limit, start, searchKey, orderByColumn, orderByDir, estMstSrno, pnlsrno, draw, jsonString;
    CommonClass cmnCls = new CommonClass();
    protected void Page_Load(object sender, EventArgs e)
    {
      mode = Request.QueryString["mode"] == null ? "" : Request.QueryString["mode"].ToString();
      option = Request.QueryString["option"] == null ? "" : Request.QueryString["option"].ToString();
      limit = Request.QueryString["length"] == null ? "" : Request.QueryString["length"].ToString();
      start = Request.QueryString["start"] == null ? "" : Request.QueryString["start"].ToString();
      user = Request.QueryString["user"] == null ? "" : Request.QueryString["user"].ToString();
      searchKey = Request.QueryString["search[value]"] == null ? "" : Request.QueryString["search[value]"].ToString();
      orderByColumn = Request.QueryString["order[0][column]"] == null ? "" : Request.QueryString["order[0][column]"].ToString();
      orderByDir = Request.QueryString["order[0][dir]"] == null ? "" : Request.QueryString["order[0][dir]"].ToString();
      estMstSrno = Request.QueryString["estMstSrno"] == null ? "" : Request.QueryString["estMstSrno"].ToString();
      pnlsrno = Request.QueryString["pnlsrno"] == null ? "" : Request.QueryString["pnlsrno"].ToString();
      draw = Request.QueryString["draw"] == null ? "" : Request.QueryString["draw"].ToString();

      if (option == "GetAllAdminCategory")
      {

       // Cls_Category CatgObj = new Cls_Category();
       // CatgObj.orderColumn = Convert.ToInt32(orderByColumn);
       // CatgObj.limit = Convert.ToInt32(limit);
       // CatgObj.orderDir = orderByDir;
       // CatgObj.start = Convert.ToInt32(start);
       // CatgObj.searchKey = searchKey;
       // CatgObj.option = "GetAllAdminCategory";

      // or user your own method to get data (just fill the dataset)

      //  DataSet ds = cmnCls.PRC_category(CatgObj);

        dynamic newtonresult = new
          {
            status = "success",
            draw = Convert.ToInt32(draw == "" ? "0" : draw),
            recordsTotal = ds.Tables[1].Rows[0][0],
            recordsFiltered = ds.Tables[1].Rows[0][0],
            data = ds.Tables[0]
          };
        jsonString = JsonConvert.SerializeObject(newtonresult);

        Response.Clear();
        Response.ContentType = "application/json";
        Response.Write(jsonString);

      }
    }
  }
}

6，DataTable常用事件

    //常用事件
    // init：初始化和数据都加载完成，和 initComplete配置等价
    $('#example')
    .on('init.dt', function () {
        console.log('Table initialisation complete: ' + new Date().getTime());
    })
    .dataTable();

    // error：处理数据出错 errMode必须为“none”，才会触发error事件
    $.fn.dataTable.ext.errMode = 'none'; // alert,throw,none, a function
    $('#example')
        .on('error.dt', function (e, settings, techNote, message) {
            console.log('An error has been reported by DataTables: ', message);
        })
        .DataTable();

    // xhr：ajax加载数据完成后调用，这时数据并没有被描画，等价于 ajax.dataSrc
    $('#example')
    .on('xhr.dt', function (e, settings, json, xhr) {
        for (var i = 0, ien = json.aaData.length ; i < ien ; i++) {
            json.aaData[i].sum = json.aaData[i].one + json.aaData[i].two;
        }
        // Note no return - manipulate the data directly in the JSON object.
    })
    .dataTable({
        ajax: "data.json"
    });

7，Datatable常用Api

    //全部参考 https://datatables.net/reference/api/
    // 1，获取API的方式
    // 注意 $(selector).dataTable()得到的是table的jquery对象
    // 而api对象只能通过：api.$(select) 返回查找到的jquery对象。
    $(selector).DataTable();
    $(selector).dataTable().api();
    new $.fn.dataTable.Api(selector);

    // 2，得到一个api对象
    var table = $('#example').DataTable();

    //3，描画 draw( [paging] ) 取值：true 全部重画，false 全部重画（保持当前的页面），
   // "page" 不重取数据，只描画当前页
    $('#myFilter').on('keyup', function () {
        table.search(this.value).draw();
    });

    // Sort by column 1 and then re-draw
    table.order([[1, 'asc']]).draw(false);
    table.page('next').draw('page');

    // data() 获取全表数据
    // Increment a counter for each row
    table.data().each(function (d) {
        d.counter++;
    });

    // 4，column().data() 获取列数据
    // cloumn的第一个参数 可以是序号，或jquery支持的选择器
    // cloumn的第二个参数 是一个 selector-modifier  对象，取值如下
    //{
    //    // DataTables core
    //    order:  'current',  // 'current', 'applied', 'index',  'original'
    //    page:   'all',      // 'all',     'current'
    //    search: 'none',     // 'none',    'applied', 'removed'

    //    // Extension - KeyTable (v2.1+) - cells only
    //    focused: undefined, // true, false, undefined

    //    // Extension - Select (v1.0+)
    //    selected: undefined // true, false, undefined
    //}
    table.column(3, { order: 'current' }).data();

    //5，row().data() 获取行数据
    $('#example tbody').on('click', 'tr', function () {
        console.log(table.row(this).data());
    });

    // 6，row().node() 获取行dom对象
    $(table.row('#row-4').node()).addClass('ready');

    // 7，row().remove(); 删除当前行
    table.row('#row-4').remove();

    // 8， row.add() 加一行数据
    // rows.add() 加多行数据
    table.row.add({id:"1",name:"li"});

    // 9， table().body() 获取tbody dom 对象 
    // table().header() 获取theader dom 对象 
    // table().footer() 获取tfooter dom 对象 
    // table().node() 获取table dom 对象 
    $(table.table().footer()).addClass('highlight');

    // 10，destroy() 销毁table true：连同html一起销毁
    table.destroy(false)

    // 11，on 绑定table的事件
    table.on('xhr', function (e, settings, json) {
        console.log('Ajax event occurred. Returned data: ', json);
    });
    // 12，page.len(10) 设置一页显示的条数
    $('#_10').on('click', function () {
        table.page.len(10).draw();
    });

8，其他

8.1 重新加载数据

第二个参数为false的话，会保持当前的选中页。

vartable = $('#example').DataTable();

table.ajax.reload( function( json ) {

    $('#myInput').val( json.lastInput );

} , true);

8.2 改变url，再加载

table.ajax.url( 'newData.json').load();

8.3 获取服务器返回的json数据

vartable = $('#example').DataTable();

table.on( 'xhr', function() {

    varjson = table.ajax.json();

    alert( json.data.length +' row(s) were loaded');

} );

zzyhjm

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
JQUERY dataTable 参数说明

dataTable 参数说明下面是一些常用的参数列表,比较常用或者有价值的标示为绿色.功能参数(Features)参数名说明参考值默认值autoWidth定义是否由控件自动控制列宽BooleantruedeferRender定义在render时是否仅仅render显示的dom,在显示大量数据的情况下强烈建议设为true,显示少量数据或者真翻页方案可以设为false,注意在设为true时无法通过函数...
复制链接

扫一扫