|
DataTables是一個jQuery的表格插件。這是一個高度靈活的工具，依據的基礎逐步增強，這將增加先進的互動控制，支持任何HTML表格。官方網站及其下載：http:/www.datatables.net
下載的1.6版本里面內容很全面。 
首先。 <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 <div id="container" align="center">//*div 裏是 table ，table包括thead等，最好按此格式寫* <h1>物品種類管理</h1> <div 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> </div> </div> 上面就能創建出如圖的效果， 分頁。排序。等等。 最後講講 各各屬性（添加的位置知道吧 O(∩_∩)O~） //$(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>, <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": " 最後一頁 " } }  這些是datatables的基礎部分。應該夠用了吧。試試吧 |
【轉】 jQuery的表格插件datatables學習總結（一）
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
標籤點擊事件後的操作
其實，也不知道怎麼去給文章命名，就簡單的記錄下我遇到的問題吧，不多說，上代碼。 <a id="tab1" href="https://www.baidu.com">測試連接</a> <br/>