jQuery dataTables表格插件入门

<p>jQuery dataTables版本号：1.7.3</p>
<p>简单的数据绑定</p>
<p>第一步，将引用文件导入</p>
<p><textarea cols="89" rows="12" name="code" class="xhtml">&lt;mce:style type="text/css" title="currentStyle"&gt;&lt;!--
@import "media/css/demo_page.css";
@import "media/css/demo_table.css";

--&gt;&lt;/mce:style&gt;&lt;style type="text/css" title="currentStyle" mce_bogus="1"&gt; @import "media/css/demo_page.css";
@import "media/css/demo_table.css";
&lt;/style&gt;
&lt;mce:script type="text/javascript" language="javascript" src="media/js/jquery.js" mce_src="media/js/jquery.js"&gt;&lt;/mce:script&gt;
&lt;mce:script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.js" mce_src="media/js/jquery.dataTables.js"&gt;&lt;/mce:script&gt;</textarea></p>
<p>第二步：添加数据初始化代码</p>
<p><textarea cols="88" rows="15" name="code" class="javascript">&lt;mce:script type="text/javascript" charset="utf-8"&gt;&lt;!--
    $(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": "尾页"
                }
            }
        })
    })
       
// --&gt;&lt;/mce:script&gt;</textarea></p>
<p>第三步：设计Table字段</p>
<p><textarea cols="88" rows="15" name="code" class="xhtml">&lt;table cellpadding="0" cellspacing="0" border="0" class="display" id="example"&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th width="20%"&gt;Name&lt;/th&gt;
&lt;th width="25%"&gt;Sex&lt;/th&gt;
&lt;th width="25%"&gt;Age&lt;/th&gt;
&lt;th width="25%"&gt;Sex&lt;/th&gt;
&lt;th width="25%"&gt;Age&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;

&lt;/tbody&gt;

&lt;/table&gt;</textarea></p>
<p>注意该表格的格式：thead（必须） tbody（必须） tfoot(可选）</p>
<p>将数据文件内容提供如下</p>
<p></p>
<p>{ "aaData": [<br>["Trident","Internet Explorer 4.0","Win 95+","4","X"],<br>["Trident","Internet Explorer 5.0","Win 95+","5","C"],<br>["Trident","Internet Explorer 5.5","Win 95+","5.5","A"],<br>["Trident","Internet Explorer 6","Win 98+","6","A"],<br>["Trident","Internet Explorer 7","Win XP SP2+","7","A"],<br>["Trident","AOL browser (AOL desktop)","Win XP","6","A"],<br>["Gecko","Firefox 1.0","Win 98+ / OSX.2+","1.7","A"],<br>["Gecko","Firefox 1.5","Win 98+ / OSX.2+","1.8","A"],<br>["Gecko","Firefox 2.0","Win 98+ / OSX.2+","1.8","A"],<br>["Gecko","Firefox 3.0","Win 2k+ / OSX.3+","1.9","A"],<br>["Gecko","Camino 1.0","OSX.2+","1.8","A"],<br>["Gecko","Camino 1.5","OSX.3+","1.8","A"],<br>["Gecko","Netscape 7.2","Win 95+ / Mac OS 8.6-9.2","1.7","A"],<br>["Gecko","Netscape Browser 8","Win 98SE+","1.7","A"],<br>["Gecko","Netscape Navigator 9","Win 98+ / OSX.2+","1.8","A"],<br>["Gecko","Mozilla 1.0","Win 95+ / OSX.1+",1,"A"],<br>["Gecko","Mozilla 1.1","Win 95+ / OSX.1+",1.1,"A"],<br>["Gecko","Mozilla 1.2","Win 95+ / OSX.1+",1.2,"A"],<br>["Gecko","Mozilla 1.3","Win 95+ / OSX.1+",1.3,"A"],<br>["Gecko","Mozilla 1.4","Win 95+ / OSX.1+",1.4,"A"],<br>["Gecko","Mozilla 1.5","Win 95+ / OSX.1+",1.5,"A"],<br>["Gecko","Mozilla 1.6","Win 95+ / OSX.1+",1.6,"A"],<br>["Gecko","Mozilla 1.7","Win 98+ / OSX.1+",1.7,"A"],<br>["Gecko","Mozilla 1.8","Win 98+ / OSX.1+",1.8,"A"],<br>["Gecko","Seamonkey 1.1","Win 98+ / OSX.2+","1.8","A"],<br>["Gecko","Epiphany 2.20","Gnome","1.8","A"],<br>["Webkit","Safari 1.2","OSX.3","125.5","A"],<br>["Webkit","Safari 1.3","OSX.3","312.8","A"],<br>["Webkit","Safari 2.0","OSX.4+","419.3","A"],<br>["Webkit","Safari 3.0","OSX.4+","522.1","A"],<br>["Webkit","OmniWeb 5.5","OSX.4+","420","A"],<br>["Webkit","iPod Touch / iPhone","iPod","420.1","A"],<br>["Webkit","S60","S60","413","A"],<br>["Presto","Opera 7.0","Win 95+ / OSX.1+","-","A"],<br>["Presto","Opera 7.5","Win 95+ / OSX.2+","-","A"],<br>["Presto","Opera 8.0","Win 95+ / OSX.2+","-","A"],<br>["Presto","Opera 8.5","Win 95+ / OSX.2+","-","A"],<br>["Presto","Opera 9.0","Win 95+ / OSX.3+","-","A"],<br>["Presto","Opera 9.2","Win 88+ / OSX.3+","-","A"],<br>["Presto","Opera 9.5","Win 88+ / OSX.3+","-","A"],<br>["Presto","Opera for Wii","Wii","-","A"],<br>["Presto","Nokia N800","N800","-","A"],<br>["Presto","Nintendo DS browser","Nintendo DS","8.5","C/A&lt;sup&gt;1&lt;/sup&gt;"],<br>["KHTML","Konqureror 3.1","KDE 3.1","3.1","C"],<br>["KHTML","Konqureror 3.3","KDE 3.3","3.3","A"],<br>["KHTML","Konqureror 3.5","KDE 3.5","3.5","A"],<br>["Tasman","Internet Explorer 4.5","Mac OS 8-9","-","X"],<br>["Tasman","Internet Explorer 5.1","Mac OS 7.6-9","1","C"],<br>["Tasman","Internet Explorer 5.2","Mac OS 8-X","1","C"],<br>["Misc","NetFront 3.1","Embedded devices","-","C"],<br>["Misc","NetFront 3.4","Embedded devices","-","A"],<br>["Misc","Dillo 0.8","Embedded devices","-","X"],<br>["Misc","Links","Text only","-","X"],<br>["Misc","Lynx","Text only","-","X"],<br>["Misc","IE Mobile","Windows Mobile 6","-","C"],<br>["Misc","PSP browser","PSP","-","C"],<br>["Other browsers","All others","-","-","U"]<br>] }</p>
<p></p>
<p>完毕可以运行了</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>