資源描述：
《jquery表格插件datatables用法詳解》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。
1、jQuery表格插件datatables用法詳解這篇文章主要介紹了jQuery表格插件datatables用法，包括分頁、排序等功能,是jQuery表格插件datatables比較基礎(chǔ)的部分知識(shí),需要的朋友可以參考下一、Datatables簡(jiǎn)介DataTables是一個(gè)jQuery的表格插件。這是一個(gè)高度靈活的工具，依據(jù)的基礎(chǔ)逐步增強(qiáng)，這將增加先進(jìn)的互動(dòng)控制，支持任何HTML表格。主要特點(diǎn)：自動(dòng)分頁處理即時(shí)表格數(shù)據(jù)過濾數(shù)據(jù)排序以及數(shù)據(jù)類型自動(dòng)檢測(cè)自動(dòng)處理列寬度可通過CSS定制樣式支持隱藏列易用可擴(kuò)展性和靈活性國際化動(dòng)態(tài)創(chuàng)建表格免費(fèi)的二、如何使
2、用在做后臺(tái)的時(shí)候并沒有美工和前端工程師來配合你做頁面，為了顯示數(shù)據(jù)并有一定的美感，我們可以使用jQuery的DataTables插件來幫助我們完成任務(wù)1、DataTables的默認(rèn)配置123$(document).ready(function(){$('#example').dataTable();});2、DataTables的一些基礎(chǔ)屬性配置123456"bPaginate":true,//翻頁功能"bLengthChange":true,//改變每頁顯示數(shù)據(jù)數(shù)量"bFilter":true,//過濾功能"bSort":false,//排
3、序功能"bInfo":true,//頁腳信息"bAutoWidth":true//自動(dòng)寬度3、數(shù)據(jù)排序1234567$(document).ready(function(){$('#example').dataTable({"aaSorting":[[4,"desc"]]});});從第0列開始，以第4列倒序排列4、隱藏某些列1234567$(document).ready(function(){$('#example').dataTable({"aoColumnDefs":[{"bSearchable":false,"bVisible":f
4、alse,"aTargets":[2]},{"bVisible":false,"aTargets":[3]}]});});5、國際化12345678910111213141516171819$(document).ready(function(){$('#example').dataTable({"oLanguage":{"sLengthMenu":"每頁顯示_MENU_條記錄","sZeroRecords":"抱歉，沒有找到","sInfo":"從_START_到_END_/共_TOTAL_條數(shù)據(jù)","sInfoEmpty":"沒有數(shù)據(jù)",
5、"sInfoFiltered":"(從_MAX_條數(shù)據(jù)中檢索)","oPaginate":{"sFirst":"首頁","sPrevious":"前一頁","sNext":"后一頁","sLast":"尾頁"},"sZeroRecords":"沒有檢索到數(shù)據(jù)","sProcessing":""}});});6、排序功能：1234567891011$(document).ready(function(){$('#example').dataTable({"aoColumns":[null,{"a
6、sSorting":["asc"]},{"asSorting":["desc","asc","asc"]},{"asSorting":[]},{"asSorting":[]}]});});7、數(shù)據(jù)獲取支持4種：如下?DOM文檔數(shù)據(jù)?Javascriptarrayjs數(shù)組?AjaxsourceAjax請(qǐng)求數(shù)據(jù)?Serversideprocessing服務(wù)器端數(shù)據(jù)三、實(shí)例講解1、需求：如下圖所示，對(duì)datatables的內(nèi)容進(jìn)行添加，編輯，刪除的操作。2、分析：添加功能---單擊add按鈕，彈出對(duì)話框，添加新的內(nèi)容。編輯功能---單擊datata
7、bles可以選中一行，此行改變顏色，即是已經(jīng)選中，單擊edit按鈕，彈出dialog，此dialog中的內(nèi)容是我們選中行的內(nèi)容。如果沒有選中行，點(diǎn)擊edit按鈕，則不會(huì)彈出dialog。當(dāng)雙擊datatables中的某一行時(shí)，也彈出dialog，并且雙擊的行改變顏色，dialog中的內(nèi)容是我們雙擊行的內(nèi)容。刪除功能---單擊datatables選中一行，單擊delete按鈕，彈出警告框，提示要不要?jiǎng)h除所選內(nèi)容。當(dāng)沒有選中任何內(nèi)容時(shí)，單擊delete按鈕，不會(huì)彈出警告框，也不會(huì)刪除內(nèi)容。3、編碼：Attributes//名稱1234567891
8、0111213141516171819202122232425262728293031/
