jquery外掛程式datatables屬性介紹及建立分頁、排序實例詳解
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中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
jQuery中如何使用PUT請求方式？
Feb 28, 2024 pm 03:12 PM
jQuery中如何使用PUT請求方式？在jQuery中，發送PUT請求的方法與發送其他類型的請求類似，但需要注意一些細節和參數設定。 PUT請求通常用於更新資源，例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先，確保引入了jQuery庫文件，然後可以透過以下方式發送PUT請求：$.ajax({u
jQuery小技巧：快速修改頁面所有a標籤的文本
Feb 28, 2024 pm 09:06 PM
標題：jQuery小技巧：快速修改頁面所有a標籤的文字在網頁開發中，我們經常需要對頁面中的元素進行修改和操作。使用jQuery時，有時候需要一次修改頁面中所有a標籤的文字內容，這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本，同時給出具體的程式碼範例。首先，我們需要引入jQuery庫文件，確保在頁面中引入了以下程式碼：<
使用jQuery修改所有a標籤的文字內容
Feb 28, 2024 pm 05:42 PM
標題：使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫，被廣泛用於處理DOM操作。在網頁開發中，經常會遇到需要修改頁面上連結標籤（a標籤）的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標，並提供具體的程式碼範例。首先，我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼：
什麼是狗狗幣
Apr 01, 2024 pm 04:46 PM
狗狗幣是一種基於網路迷因創建的加密貨幣，沒有固定的供應上限，交易時間快速，交易費用低，擁有龐大的迷因社群。用途包括小額交易、打賞和慈善捐贈。然而，其無限供應量、市場波動和作為笑話幣的地位也帶來風險和擔憂。什麼是狗狗幣？狗狗幣是一種基於網路迷因和笑話創建的加密貨幣。起源與歷史：2013年12月，兩位軟體工程師BillyMarkus和JacksonPalmer創立狗狗幣。靈感來自於當時流行的"Doge"模因，一個以一隻柴犬為特徵的滑稽照片加上破碎英語。特徵與優勢：無限供應量：與比特幣等其他加密貨
網上查成績平台介紹（方便快速的成績查詢工具）
Apr 30, 2024 pm 08:19 PM
快速的成績查詢工具、這為學生和家長提供了更方便，隨著網路的發展，越來越多的教育機構和學校開始提供線上查成績的服務。讓您輕鬆掌握孩子的學業進展，本文將介紹幾個常用的線上查成績平台。一、便捷－透過網路查詢成績平台可以隨時隨地查詢孩子的考試成績家長可以方便地隨時查詢孩子的考試成績，透過在電腦或手機登入對應的網路查詢成績平台。只要有網路連結、無論是在工作中或在外出時、家長都可以及時了解孩子的學習情況，對孩子進行針對性地輔導和幫助。二、多種功能－除了成績查詢，還提供課表、考試安排等資訊許多網路查成
三星S24ai功能詳細介紹
Jun 24, 2024 am 11:18 AM
2024是AI手机的元年，越来越多的手机集成了多项ai功能，通过ai智能技术的赋能，让我们的手机使用更加高效便捷。近日，年初发布的GalaxyS24系列再度提升了其生成式AI的体验，下面下详细的功能介绍，一起来看看吧。一、生成式AI深度赋能三星GalaxyS24系列通过GalaxyAI的赋能，带来了诸多智能化应用，这些功能与SamsungOneUI6.1深度集成，让用户可以随时获得便利的智能体验，显著提升了手机的使用效率和便捷性。由GalaxyS24系列首创的即圈即搜功能是亮点之一，用户只需长按
霓虹深淵第八色武器介紹
Mar 31, 2024 pm 03:51 PM
第八色是霓虹深淵中的一把武器，很多的玩家都想了解一下關於武器第八色額彈道、武器強度好玩法這些內容。那麼下面就讓我們一起來看看霓虹深淵第八色武器彈道、武器強度、武器玩法詳細攻略吧。霓虹深淵第八色詳細攻略武器介紹：巫師的秘密武器！武器攻速：正常武器強度：適中武器玩法：第八色的攻擊方式為三次單體攻擊然後發射一道射線。彈道展示：
了解jQuery中eq的作用及應用場景
Feb 28, 2024 pm 01:15 PM
jQuery是一種流行的JavaScript庫，被廣泛用於處理網頁中的DOM操作和事件處理。在jQuery中，eq()方法是用來選擇指定索引位置的元素的方法，具體使用方法和應用場景如下。在jQuery中，eq()方法選擇指定索引位置的元素。索引位置從0開始計數，即第一個元素的索引是0，第二個元素的索引是1，依此類推。 eq()方法的語法如下：$("s
