前端之家收集整理的这篇文章主要介绍了
jQuery.datatables.js插件用法及api实例详解,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
1、DataTables的默认配置
示例:
2、DataTables的一些基础属性配置
“bPaginate”: true,//翻页功能
“bLengthChange”: true,//改变每页显示数据数量
“bFilter”: true,//过滤功能
“bSort”: false,//排序功能
“bInfo”: true,//页脚信息
“bAutoWidth”: true//自动宽度
示例:
3、数据排序
从第0列开始,以第4列倒序排列
示例:
4、多列排序
示例:
5、隐藏某些列
示例:
6、改变页面上元素的位置
rt<”bottom”p><”clear”>'
} );
} );
//l- 每页显示数量
//f – 过滤输入
//t – 表单Table
//i – 信息
//p – 翻页
//r – pRocessing
//< and > – div elements
//<”class” and > – div with a class
//Examples: <”wrapper”flipt>,ip>
示例:
7、状态保存,使用了翻页或者改变了每页显示数据数量,会保存在cookie中,下回访问时会显示上一次关闭页面时的内容。
示例:
8、显示数字的翻页样式
示例:
9、水平限制宽度
示例:
10、垂直限制高度
示例:
11、水平和垂直两个方向共同限制
示例:
12、改变语言
”
}
} );
} );
PHP”,/*如果
加上下面这段
内容,则使用post方式传递数据
“fnServerData”: function ( 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['sColumns']将接收到aoColumns传递数据
} );
} );