jQuery.datatables.js插件用法及美国石油学会(美国石油协会)实例详解

时间：2021-09-13 来源：互联网编辑：宝哥软件园浏览：次

1、数据表的默认配置

$(文档)。ready(function() {$('#example ')).dataTable()；} );示例：http://www .国克斯。com/html/DataTables/Zero-配置。超文本标记语言

2、数据表的一些基础属性配置

“BPA ginte”: true，//翻页功能"混合变更“:真，//改变每页显示数据数量“bFIlter”: true，//过滤功能“OuRt”: false，//排序功能“bInfo”: true，//页脚信息“Bautowidth”: true//自动宽度

示例：http://www .国克斯。com/html/DataTables/启用了功能。超文本标记语言

3、数据排序

$(文档)。ready(function() {$('#example ')).dataTable({“aaSorting”:[[4，' desc ']]})；} );从第0列开始，以第四列倒序排列

示例：http://www .国克斯。com/html/DataTables/Sorting-数据。超文本标记语言

4、多列排序

示例：http://www .国克斯。com/html/DataTables/多列排序。超文本标记语言

5、隐藏某些列

$(文档)。ready(function() {$('#example ')).dataTable({ " aoColumnDefs " :[{ ' bSearchable ' : false，' bVisible': false，' aTargets': [ 2 ] }，{ "bVisible": false，" Atargets " :[3]}]})；} );示例：http://www .国克斯。com/html/DataTables/隐藏列。超文本标记语言

6、改变页面上元素的位置

$(文档)。ready(function() {$('#example ')).dataTable({"SDom":"top "调戏“底”p“清”})；} );//l-每页显示数量//f过滤输入//t表单表//我信息//p翻页//rPROCESSing//和div元素//“类”和div带类//示例s 3360“包装器”flipt，lftip示例：http://www .国克斯。com/html/DataTables/DOM-定位。超文本标记语言

7、状态保存，使用了翻页或者改变了每页显示数据数量，会保存在甜饼干中，下回访问时会显示上一次关闭页面时的内容。

$(文档)。ready(function() {$('#example ')).dataTable({“bStateSave”: true })；} );示例：http://www .国克斯。com/html/DataTables/状态保存。超文本标记语言

8、显示数字的翻页样式

$(文档)。ready(function() {$('#example ')).dataTable({“sPaginationType”:“full _ numbers”})；} );示例：http://www .国克斯。com/html/DataTables/Alternative-分页样式。超文本标记语言

9、水平限制宽度

$(文档)。ready(function() {$('#example ')).dataTable({“sScrollX”:“100%”、“sScrollXInner”:“110%”、“bScrollCollapse”: true })；} );示例：http://www .国克斯。com/html/DataTables/水平。超文本标记语言

10、垂直限制高度

示例：http://www .国克斯。com/html/DataTables/竖排。超文本标记语言

11、水平和垂直两个方向共同限制

示例：http://www .国克斯。com/html/DataTables/horizontalvertical both。超文本标记语言

12、改变语言

$(文档)。ready(function() {$('#example ')).数据表({"语言": {"长度菜单":)每页显示_MENU_条记录“，”sZeroRecords“:”抱歉，没有找到","辛福":"从_START_到_END_ /共_合计_条数据》,辛菲普蒂《:》没有数据、(从_MAX_条数据中检索)、“oPaginate”: {“sFirst”: "首页“，”sPrevious“:”前一页、“SNext”:后一页“，”SLASt“:”尾页“}”，sZeroRecords“:”没有检索到数据”、“萌芽”:“img src=\ ' # \ '/正在加载。gif '/" })；} );示例：http://www .国克斯。更改语言信息。超文本标记语言

13、点击事件

示例：http://www .国克斯。com/html/DataTables/event-click。超文本标记语言

14/配合使用工具提示插件

示例：http://www .国克斯。com/html/DataTables/tooltip。超文本标记语言

15、定义每页显示数据数量

$(文档)。ready(function() {$('#example ')).dataTable({“aLengthMenu”:[[10，25，50，-1]，[10，25，50，' All ']]})；} );示例：http://www .国克斯。com/html/DataTables/length _ menu。超文本标记语言

16、行回调

示例：http://www .国克斯。com/html/DataTables/行回调。超文本标记语言

最后一列的值如果为"一个"则加粗显示

17、排序控制

$(文档)。ready(function() {$('#example ')).dataTable({“aoColumns”:[null，{ '分类：[' asc ']}，{ "分类" : [ 'desc '，' ASC '，' asc' ] }，{ "分类": [ ] },{"分类":[]}));} );示例：http://www .国克斯。com/html/DataTables/sort。超文本标记语言

说明：第一列点击按默认情况排序，第二列点击已顺序排列，第三列点击一次倒序，二三次顺序，第四五列点击不实现排序

18、从配置文件中读取语言包

$(文档)。ready(function() {$('#example ')).dataTable({“olan guage”: {“sUrl”: " cn。txt " } })；} );19、是用创建交互式、快速动态网页应用的网页开发技术源

$(文档)。ready(function() {$('#example ')).dataTable({“b处理”: true，“SaJaxsource”:“”./arrays。txt ' })；} );示例：http://www .国克斯。com/html/DataTables/Ajax。超文本标记语言

20、使用ajax，在服务器端整理数据

$(文档)。ready(function() {$('#example ')).dataTable({“bpprocessing”:为真，“bServerSide”:为真，“sPaginationType”:为“full_numbers”，“SaJaxsource”:)./server_processing.php "，/*如果加上下面这段内容，则使用邮政方式传递数据“fnServerData”:函数(sSource，aoData，fnCallback ) {$ .ajax({"dataType": 'json '，" type": "POST "，" url " : sSource，" data": aoData，" success " : fnCallback })；} */“oLanguage”: {“sUrl”:”cn。txt"}、" aoColumns " :[{ ' sName ' : ' platform ' }、{ 'sName': 'version' }、{ 'sName': 'engine' }、{ 'sName': 'browser' }、{ ' sName ' : ' grade ' })/$ _ GET[' scoruns将接收到aoColumns传递数据} );} );示例：http://www .国克斯。com/html/DataTables/Ajax-server side。超文本标记语言

21、为每行加载编号和班级

服务器端返回数据的格式：

{“DT _ row id”:“row _ 8”“DT _ row class”:“甲级”“0”:“壁虎”“1”:“火狐1.5”“2”:“Win 98/OSX”。2 "、" 3":"1.8 "、" 4":"A"}，示例：http://www .国克斯。com/html/DataTables/add _ id _ class。超文本标记语言

22、为每行显示细节，点击行开头的" "号展开细节显示

示例：http://www .国克斯。com/html/DataTables/带有行信息。超文本标记语言