@import "../../media/css/demo_page.c"/> @import "../../media/css/demo_page.c">
DataTables是一個jQuery的表格外掛。這是一個高度靈活的工具,依據的基礎逐步增強,這將增加先進的互動控制,支援任何HTML表格。
使用方法:
首先看看如下程式碼:
<title>DataTables example</title> <style type="text/css" title="currentStyle"> @import "../../media/css/demo_page.css"; @import "../../media/css/demo_table.css"; @import "../examples_support/themes/smoothness/jquery-ui-1.7.2.custom.css"; </style> <script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" charset="utf-8">
在上述程式碼中引入js和css檔案。可以在demo裡複製。注意路徑位址。
接著來看看如下程式碼:
<script type="text/javascript" charset="utf-8"> $(document).ready(function() { $('#example').dataTable( { "oLanguage": { "sUrl": "/SSS/dataTables/de_DE.txt" }, "bStateSave": true, //"bJQueryUI": true, //使用jqueryui 。我用的时候显示的不是很好 "sPaginationType": "full_numbers"//分页 } ); } ); </script> </head> <body id="dt_example">//此处为body的id <p id="container" align="center">//*p 里是 table ,table包括thead等,最好按此格式写* <h1>物品种类管理</h1> <p id="demo"> <table cellpadding="5" cellspacing="0" border="1" class="display" id="example" align="center">//id 别忘了 <thead> <tr> <th>物品编号</th> <th>物品名称</th> <th>物品单位</th> <th>编辑状态</th> <th>随便</th> </tr> </thead> <tr class="gradeX">//此处可以是gradeA ,gradeX 等,但是gradeB 隔行换色 效果很好 <td>Trident</td> <td>Internet Explorer 4.0</td> <td>Win 95+</td> <td class="center">4</td> <td class="center">X</td> </tr> <tr class="gradeC"> <td>Trident</td> <td>Internet Explorer 5.0</td> <td>Win 95+</td> <td class="center">5</td> <td class="center">C</td> </tr> <tr class="gradeA"> <td>Trident</td> <td>Internet Explorer 5.5</td> <td>Win 95+</td> <td class="center">5.5</td> <td class="center">A</td> </tr> </tbody> <tfoot> </tfoot> </table> </p> </p>
上面就能創造出如圖的效果, 分頁。排序。等等。
最後講講各各屬性(主要新增的位置)
//$(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 > - p elements* <"class" and > - p with a class * Examples: <"wrapper"flipt>, <lf<t>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": " 最后一页 " } }
以上是jquery外掛程式datatables屬性介紹及建立分頁、排序實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!