DataTables示例 JavaScript源集结号游戏

有时您可能希望能够从直接传递到的动态信息创建表 DataTables,而不是从文档中读取它。这是通过使用 dataDT 初始化对象中的选项, 传入要使用的集结号游戏数组(就像所有其他DataTables处理的集结号游戏一样,它可以是数组或 objects using the columns.dataDT 选项)。

A <table> must be available on the page for DataTables to use. This examples 显示了由Javascript添加的元素,然后使用来自的一组集结号游戏初始化DataTable a Java脚本 array.

下面显示的Javascript用于初始化此显示的表 example:

var dataSet = [ ['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<sup>1</sup>'], ['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'] ]; $(document).ready(function() { $('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' ); $('#example').dataTable( { "data": dataSet, "columns": [ { "title": "Engine" }, { "title": "Browser" }, { "title": "Platform" }, { "title": "Version", "class": "center" }, { "title": "Grade", "class": "center" } ] } ); } );

除上述代码外,以下Javascript库文件也已加载以供在本文档中使用。 example:

下面显示的HTML是原始HTML表格元素,之前已通过 DataTables:

除了从库中加载的内容外,此示例还使用了一些其他CSS 文件(如下),以便正确显示表格。显示了使用的其他CSS below:

加载以下CSS库文件以供本示例使用,以提供 table:

该表通过Ajax加载集结号游戏。下面显示了已加载的最新集结号游戏。这个集结号游戏 将在加载任何其他集结号游戏时自动更新。

下面显示了用于执行此表的服务器端处理的脚本。请注意 这只是使用PHP的示例脚本。服务器端处理脚本可以用任何形式编写 language, using 协议中描述的协议 DataTables文档.