jQuery dataTables表格插件入门

jQuery  dataTables版本号：1.7.3

简单的数据绑定

第一步，将引用文件导入

<mce:style type="text/css" title="currentStyle"><!-- @import "media/css/demo_page.css"; @import "media/css/demo_table.css"; --></mce:style><style type="text/css" title="currentStyle" mce_bogus="1"> @import "media/css/demo_page.css"; @import "media/css/demo_table.css"; </style> <mce:script type="text/javascript" language="javascript" src="media/js/jquery.js" mce_src="media/js/jquery.js"></mce:script> <mce:script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.js" mce_src="media/js/jquery.dataTables.js"></mce:script>

第二步：添加数据初始化代码

<mce:script type="text/javascript" charset="utf-8"><!-- $(document).ready(function () { var oTable = $('#example').dataTable({ "bProcessing": true, "sAjaxSource": "examples/examples_support/json_source.txt", // "sAjaxSource": "Default.aspx?action=1", "sPaginationType": "full_numbers", "oLanguage": { "sSearch": "Search the nominees:" }, "iDisplayLength": 10, "oLanguage": { //汉化 "sLengthMenu": "每页显示 _MENU_ 条记录", "sZeroRecords": "没有检索到数据", "sInfo": "当前数据为从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录", "sInfoEmtpy": "没有数据", "sProcessing": "正在加载数据...", "oPaginate": { "sFirst": "首页", "sPrevious": "前页", "sNext": "后页", "sLast": "尾页" } } }) }) // --></mce:script>

第三步：设计Table字段

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> <thead> <tr> <th width="20%">Name</th> <th width="25%">Sex</th> <th width="25%">Age</th> <th width="25%">Sex</th> <th width="25%">Age</th> </tr> </thead> <tbody> </tbody> </table>

注意该表格的格式：thead（必须） tbody（必须） tfoot(可选）

将数据文件内容提供如下

 

{ "aaData": [
 ["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"],
 ["Trident","Internet Explorer 6","Win 98+","6","A"],
 ["Trident","Internet Explorer 7","Win XP SP2+","7","A"],
 ["Trident","AOL browser (AOL desktop)","Win XP","6","A"],
 ["Gecko","Firefox 1.0","Win 98+ / OSX.2+","1.7","A"],
 ["Gecko","Firefox 1.5","Win 98+ / OSX.2+","1.8","A"],
 ["Gecko","Firefox 2.0","Win 98+ / OSX.2+","1.8","A"],
 ["Gecko","Firefox 3.0","Win 2k+ / OSX.3+","1.9","A"],
 ["Gecko","Camino 1.0","OSX.2+","1.8","A"],
 ["Gecko","Camino 1.5","OSX.3+","1.8","A"],
 ["Gecko","Netscape 7.2","Win 95+ / Mac OS 8.6-9.2","1.7","A"],
 ["Gecko","Netscape Browser 8","Win 98SE+","1.7","A"],
 ["Gecko","Netscape Navigator 9","Win 98+ / OSX.2+","1.8","A"],
 ["Gecko","Mozilla 1.0","Win 95+ / OSX.1+",1,"A"],
 ["Gecko","Mozilla 1.1","Win 95+ / OSX.1+",1.1,"A"],
 ["Gecko","Mozilla 1.2","Win 95+ / OSX.1+",1.2,"A"],
 ["Gecko","Mozilla 1.3","Win 95+ / OSX.1+",1.3,"A"],
 ["Gecko","Mozilla 1.4","Win 95+ / OSX.1+",1.4,"A"],
 ["Gecko","Mozilla 1.5","Win 95+ / OSX.1+",1.5,"A"],
 ["Gecko","Mozilla 1.6","Win 95+ / OSX.1+",1.6,"A"],
 ["Gecko","Mozilla 1.7","Win 98+ / OSX.1+",1.7,"A"],
 ["Gecko","Mozilla 1.8","Win 98+ / OSX.1+",1.8,"A"],
 ["Gecko","Seamonkey 1.1","Win 98+ / OSX.2+","1.8","A"],
 ["Gecko","Epiphany 2.20","Gnome","1.8","A"],
 ["Webkit","Safari 1.2","OSX.3","125.5","A"],
 ["Webkit","Safari 1.3","OSX.3","312.8","A"],
 ["Webkit","Safari 2.0","OSX.4+","419.3","A"],
 ["Webkit","Safari 3.0","OSX.4+","522.1","A"],
 ["Webkit","OmniWeb 5.5","OSX.4+","420","A"],
 ["Webkit","iPod Touch / iPhone","iPod","420.1","A"],
 ["Webkit","S60","S60","413","A"],
 ["Presto","Opera 7.0","Win 95+ / OSX.1+","-","A"],
 ["Presto","Opera 7.5","Win 95+ / OSX.2+","-","A"],
 ["Presto","Opera 8.0","Win 95+ / OSX.2+","-","A"],
 ["Presto","Opera 8.5","Win 95+ / OSX.2+","-","A"],
 ["Presto","Opera 9.0","Win 95+ / OSX.3+","-","A"],
 ["Presto","Opera 9.2","Win 88+ / OSX.3+","-","A"],
 ["Presto","Opera 9.5","Win 88+ / OSX.3+","-","A"],
 ["Presto","Opera for Wii","Wii","-","A"],
 ["Presto","Nokia N800","N800","-","A"],
 ["Presto","Nintendo DS browser","Nintendo DS","8.5","C/A¹"],
 ["KHTML","Konqureror 3.1","KDE 3.1","3.1","C"],
 ["KHTML","Konqureror 3.3","KDE 3.3","3.3","A"],
 ["KHTML","Konqureror 3.5","KDE 3.5","3.5","A"],
 ["Tasman","Internet Explorer 4.5","Mac OS 8-9","-","X"],
 ["Tasman","Internet Explorer 5.1","Mac OS 7.6-9","1","C"],
 ["Tasman","Internet Explorer 5.2","Mac OS 8-X","1","C"],
 ["Misc","NetFront 3.1","Embedded devices","-","C"],
 ["Misc","NetFront 3.4","Embedded devices","-","A"],
 ["Misc","Dillo 0.8","Embedded devices","-","X"],
 ["Misc","Links","Text only","-","X"],
 ["Misc","Lynx","Text only","-","X"],
 ["Misc","IE Mobile","Windows Mobile 6","-","C"],
 ["Misc","PSP browser","PSP","-","C"],
 ["Other browsers","All others","-","-","U"]
] }

 

完毕可以运行了