jQuery表格插件datatables用法总结
来源: 阅读:3112 次 日期:2014-09-07 11:53:26
温馨提示: 小编为您整理了“jQuery表格插件datatables用法总结”,方便广大网友查阅!

网校上线了!

>>>点击进入<<<

网校开发及拥有的课件范围涉及公务员、财会类、外语类、外贸类、学历类、

职业资格类、计算机类、建筑工程类、等9大类考试的在线网络培训辅导。

其主要特点如下:

1.自动分页处理

2.即时表格数据过滤

3.数据排序以及数据类型自动检测

4.自动处理列宽度

5.可通过CSS定制样式

6.支持隐藏列

7.易用

8.可扩展性和灵活性

9.国际化

10.动态创建表格

11.免费的

使用方法:

DataTables example

//此处为body的id

//*div 里是 table ,table包括thead等,最好按此格式写*

物品种类管理

//id 别忘了

//此处可以是gradeA ,gradeX 等,但是gradeB 隔行换色 效果很好

物品编号 物品名称 物品单位 编辑状态 随便
Trident Internet

Explorer 4.0

Win 95+ 4 X
Trident Internet

Explorer 5.0

Win 95+ 5 C
Trident Internet

Explorer 5.5

Win 95+ 5.5 A

上面就能创建出如图的效果, 分页。排序。等等。

最后讲讲 各各属性(主要添加的位置)

//$(document).ready(function() {

//$('#example').dataTable( {//加载

//"bPaginate": true,//分页按钮

//"bLengthChange": true,//每行显示记录数

//"bFilter": true,//搜索栏

//"bSort": true,//排序

//"bInfo": true,//Showing 1 to 10 of 23 entries 总记录数没也显示多少等信息

//"bAutoWidth": true } );

//} );

//$(document).ready(function() {

//$('#example').dataTable( {

//"aaSorting": [[ 4, "desc" ]]//给列表排序 ,第一个参数表示数组 。4 就是css grade那列。第二个参数为 desc或是asc

//} );

//} );

//$(document).ready(function() {

//$('#example').dataTable( {

//"aoColumns": [

// /* Engine */ null, //默认

// /* Browser */ null,

// /* Platform */ { "bSearchable": false, //不可参与搜索

// "bVisible": false },//不可见

// /* Version */ { "bVisible": false },//不可见

// /* Grade */ null

//] } );

//} );

//$(document).ready(function() {

//$('#example').dataTable({

//});

//} );

//$(document).ready(function() {

//$('#example').dataTable( {

//"sDom": '<"top"i>rt<"bottom"flp<"clear">'//这段是自定义布局没搞明白挺复杂的。 * l - Length changing * f - Filtering input* t - The table!* i - Information* p - Pagination* r - pRocessing* < and > - div elements* <"class" and > - div with a class * Examples: <"wrapper"flipt>, ip>

//} );

//} );

//$(document).ready(function() {

// $('#example').dataTable( {

// "bStateSave": true //保存状态到cookie *************** 很重要 , 当搜索的时候页面一刷新会导致搜索的消失。使用这个属性就可避免了

//} );

//} );

//$(document).ready(function() {

//$('#example').dataTable( {

//"sPaginationType": "full_numbers" //分页,一共两种样式 另一种为two_button 是datatables默认

//} );

//} );

//$(document).ready(function() {

//$('#example').dataTable( { //分页信息 不是很难理解。

//"oLanguage": {

//"sLengthMenu": "Display _MENU_ records per page",

//"sZeroRecords": "Nothing found - sorry",

//"sInfo": "Showing _START_ to _END_ of _TOTAL_ records",

//"sInfoEmtpy": "Showing 0 to 0 of 0 records",

//"sInfoFiltered": "(filtered from _MAX_ total records)"

//}

//} );

//} )

$(document).ready(function() {

oTable = $('#example').dataTable({

"bJQueryUI": true, //可以添加 jqury的ui theme 需要添加css

"sPaginationType": "full_numbers"

});

} );

默认的语言是英文的 当然可以国际化:

"sUrl": "/SSS/dataTables/de_DE.txt" 添加个国际化的文件就可以。 名字随便 路径对了就可以。我写的国际化文件内容如下,可以直接复制到txt中使用.

{

"sProcessing": "Bitte warten...",

"sLengthMenu": "显示_MENU_条 ",

"sZeroRecords": "没有您要搜索的内容",

"sInfo": "从_START_ 到 _END_ 条记录——总记录数为 _TOTAL_ 条",

"sInfoEmpty": "记录数为0",

"sInfoFiltered": "(全部记录数 _MAX_ 条)",

"sInfoPostFix": "",

"sSearch": "搜索",

"sUrl": "",

"oPaginate": {

"sFirst": "第一页",

"sPrevious": " 上一页 ",

"sNext": " 下一页 ",

"sLast": " 最后一页 "

}

}

更多信息请查看IT技术专栏

更多信息请查看 网络编程
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们| 联系我们| 人才招聘| 网站声明| 网站帮助| 非正式的简要咨询| 简要咨询须知| 加入群交流| 手机站点| 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:
咨询QQ:526150442(9:00—18:00) 版权所有:
云南网警报警专用图标
Baidu
map