DataTable使用详解

《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》，点击传送门，即可获取！

• 默认为false

• 当表格在处理的时候（比如排序操作）是否显示“处理中…”

• 当表格的数据中的数据过多以至于对其中的记录进行排序时会消耗足以被察觉的时间的时候，该选项会有些用处

*/

“bProcessing”:false,

/*

• 默认为false

• 是否开启不限制长度的滚动条（和sScrollY属性结合使用），不限制长度的滚动条意味着当用户拖动滚动条的时候DataTable会不断加载数据

• 当数据集十分大的时候会有些用处，该选项无法和分页选项同时使用，分页选项会被自动禁止，注意，额外推荐的滚动条会优先与该选项

*/

“bScrollInfinite”:false,

/*

• 默认为false

• 配置DataTable使用服务器端处理，注意，sAjaxSource参数必须指定，以便给DataTable一个为每一行获取数据的数据源

*/

“bServerSide”:false,

/*

• 默认为true

• 是否开启列排序，对单独列的设置在每一列的bSortable选项中指定

*/

“bSort”:true,

/*

• 默认为true

• 是否在当前被排序的列上额外添加sorting_1,sorting_2,sorting_3三个class，当该列被排序的时候，可以切换其背景颜色

• 该选项作为一个来回切换的属性会增加执行时间（当class被移除和添加的时候）

• 当对大数据集进行排序的时候你或许希望关闭该选项

*/

“bSortClasses”:true,

/*

• 默认为false

• 是否开启状态保存，当选项开启的时候会使用一个cookie保存表格展示的信息的状态，例如分页信息，展示长度，过滤和排序等

• 这样当终端用户重新加载这个页面的时候可以使用以前的设置

*/

“bStateSave”:false,

/*

• 默认为空字符串，即：无效

• 是否开启水平滚动，当一个表格过于宽以至于无法放入一个布局的时候，或者表格有太多列的时候，你可以开启该选项

• 从而在一个可横向滚动的视图里面展示表格，该属性可以是css设置，或者一个数字（作为像素量度来使用）

*/

“sScrollX”:“100%”,

/*

• 默认为空字符串，即：无效

• 是否开启垂直滚动，垂直滚动会驱使DataTable设置为给定的长度，任何溢出到当前视图之外的数据可以通过垂直滚动进行察看

• 当在小范围区域中显示大量数据的时候，可以在分页和垂直滚动中选择一种方式，该属性可以是css设置，或者一个数字（作为像素量度来使用）

*/

“sScrollY”:“100%”,

/*

• 自定义语言设置

*/

“oLanguage”:{

“oAria”:{

/*

• 默认值为activate to sort column ascending

• 当一列被按照升序排序的时候添加到表头的ARIA标签，注意列头是这个字符串的前缀（？）

*/

“sSortAscending”: " - click/return to sort ascending",

/*

• 默认值为activate to sort column ascending

• 当一列被按照升序降序的时候添加到表头的ARIA标签，注意列头是这个字符串的前缀（？）

*/

“sSortDescending”: " - click/return to sort descending"

},

“oPaginate”: {

/*

• 默认值为First

• 当使用全数字类型的分页组件的时候，到第一页按钮上的文字

*/

“sFirst”: “First page”,

/*

• 默认值为Last

• 当使用全数字类型的分页组件的时候，到最后一页按钮上的文字

*/

“sLast”: “Last page”,

/*

• 默认值为Next

• 当使用全数字类型的分页组件的时候，到下一页按钮上的文字

*/

“sNext”: “Next page”,

/*

• 默认值为Previous

• 当使用全数字类型的分页组件的时候，到前一页按钮上的文字

*/

“sPrevious”: “Previous page”

},

/*

• 默认值activate to sort column ascending为

• 当表格中没有数据（无视因为过滤导致的没有数据）时，该字符串年优先与sZeroRecords显示

• 注意这是个可选参数，如果没有指定，sZeroRecrods会被使用（既不是默认值也不是给定的值）

*/

“sEmptyTable”: “No data available in table”,

/*

• 默认值为Showing START to END of TOTAL entries

• 该属性给终端用户提供当前页面的展示信息，字符串中的变量会随着表格的更新被动态替换，而且可以被任意移动和删除

*/

“sInfo”: “Got a total of TOTAL entries to show (START to END)”,

/*

• 默认值为Showing 0 to 0 of 0 entries

• 当表格中没有数据时展示的表格信息，通常情况下格式会符合sInfo的格式

*/

“sInfoEmpty”: “No entries to show”,

/*

• 默认值为(filtered from MAX total entries)

• 当用户过滤表格中的信息的时候，该字符串会被附加到信息字符串的后面，从而给出过滤器强度的直观概念

*/

“sInfoFiltered”: " - filtering from MAX records",

/*

• 默认值为空字符串

• 使用该属性可以很方便的向表格信息字符串中添加额外的信息，被添加的信息在任何时候都会被附加到表格信息组件的后面

• sInfoEmpty和sInfoFiltered可以以任何被使用的方式进行结合

*/

“sInfoPostFix”: “All records shown are derived from real information.”,

/*

• 默认值为’,’

• DataTable有内建的格式化数字的工具，可以用来格式化表格信息中较大的数字

• 默认情况下会自动调用，可以使用该选项来自定义分割的字符

*/

“sInfoThousands”: “'”,

/*

• 默认值为Show MENU entries

• 描述当分页组件的下拉菜单的选项被改变的时候发生的动作，'MENU’变量会被替换为默认的10，25，50，100

• 如果需要的话可以被自定义的下拉组件替换

*/

“sLengthMenu”: “Display MENU records”,

/*

• 默认值为Loading…

• 当使用Ajax数据源和表格在第一次被加载搜集数据的时候显示的字符串，该信息在一个空行显示

• 向终端用户指明数据正在被加载，注意该参数在从服务器加载的时候无效，只有Ajax和客户端处理的时候有效

*/

“sLoadingRecords”: “Please wait - loading…”,

/*

• 默认值为Processing…

• 当表格处理用户动作（例如排序或者类似行为）的时候显示的字符串

*/

“sProcessing”: “DataTables is currently busy”,

/*

• 默认为Search:

• 描述用户在输入框输入过滤条件时的动作，变量’INPUT’,如果用在字符串中

• DataTable会使用用户输入的过滤条件替换_INPUT_为HTML文本组件，从而可以支配它（即用户输入的过滤条件）出现在信息字符串中的位置

• 如果变量没有指定，用户输入会自动添加到字符串后面

*/

“sSearch”: “Apply filter INPUT to table”,

/*

• 默认值为空字符串，即：无效

• 所有语言信息可以被存储在服务器端的文件中，DataTable可以根据该参数指定的URL去寻找

• 必须保存语言文件的URL信息，必须是JSON格式，对象和初始化中使用的oLanguage对象具有相同的属性

• 请参考示例文件来了解该参数是如何工作的

*/

“sUrl”: “http://www.sprymedia.co.uk/dataTables/lang.txt”,

/*

• 默认值为No matching records found

• 当对数据进行过滤操作后，如果没有要显示的数据，会在表格记录中显示该字符串

• sEmptyTable只在表格中没有数据的时候显示，忽略过滤操作

*/

“sZeroRecords”: “No records to display”

}

});

});

/------------------------------------------------Options------------------------------------------------/

/*

• bDestroy

• 默认为false

• 使用传递的新的初始化对象中的属性构造一个新的表格，并替换一个匹配指定的选择器的表格

• 如果没有匹配到表格，新的表格会被作为一个普通表格被构建

*/

$(‘selector’).dataTable({

“bFilter”: false,

“bDestroy”: true

});

/*

• bRetrieve

• 默认为false

• 使用指定的选择器检索表格，注意，如果表格已经被初始化，该参数会直接返回已经被创建的对象

• 并不会顾及你传递进来的初始化参数对象的变化，将该参数设置为true说明你确认已经明白这一点

• 如果你需要的话，bDestroy可以用来重新初始化表格

*/

$(document).ready(fun