前些天發現了一個巨牛的人工智能學習網站，通俗易懂，風趣幽默，忍不住分享一下給大家。點擊跳轉到教程。
Dom說明
定義表格控件在頁面的顯示順序。
每個控件元素在數據表都有一個關聯的單個字母。
- l?-?每頁顯示行數的控件
- f?-?檢索條件的控件
- t?- 表格控件
- i?- 表信息總結的控件
- p?-?分頁控件
- r?- 處理中的控件
還可以在控件元素外添加DIV和Class，語法如下
- <?and?>?- DIV元素
- <"class"?and?>?- DIV和Class
- <"#id"?and?>?- DIV和ID
Language說明
數據表的文言設置。
參數文檔：
?
Js代碼??
{??????"emptyTable":?????"No?data?available?in?table",??????"info":???????????"Showing?_START_?to?_END_?of?_TOTAL_?entries",??????"infoEmpty":??????"Showing?0?to?0?of?0?entries",??????"infoFiltered":???"(filtered?from?_MAX_?total?entries)",??????"infoPostFix":????"",??????"thousands":??????",",??????"lengthMenu":?????"Show?_MENU_?entries",??????"loadingRecords":?"Loading...",??????"processing":?????"Processing...",??????"search":?????????"Search:",??????"zeroRecords":????"No?matching?records?found",??????"paginate":?{??????????"first":??????"First",??????????"last":???????"Last",??????????"next":???????"Next",??????????"previous":???"Previous"??????},??????"aria":?{??????????"sortAscending":??":?activate?to?sort?column?ascending",??????????"sortDescending":?":?activate?to?sort?column?descending"??????}??}??
?
?
?
?
?
Example：
Js代碼??
/*?Results?in:?????<div?class="wrapper">???????{length}???????{processing}???????{table}???????{information}???????{pagination}?????</div>?*/??$('#example').dataTable(?{????"dom":?'lrtip'??}?);??
?
Js代碼??
/*?Results?in:?????<div?class="wrapper">???????{filter}???????{length}???????{information}???????{pagination}???????{table}?????</div>?*/??$('#example').dataTable(?{????"dom":?'<"wrapper"flipt>'??}?);??
- ?每頁行數，檢索條件，分頁在表格上面，表信息在表格下面
?
Js代碼??
/*?Results?in:?????<div>???????{length}???????{filter}???????<div>?????????{table}???????</div>???????{information}???????{pagination}?????</div>?*/??$('#example').dataTable(?{????"dom":?'<lf<t>ip>'??}?);??
?
- ?表信息在表上面，檢索條件，每頁行數，處理中在表下面，并且有清除元素
?
?
Js代碼??
/*?Results?in:?????<div?class="top">???????{information}?????</div>?????{processing}?????{table}?????<div?class="bottom">???????{filter}???????{length}???????{pagination}?????</div>?????<div?class="clear"></div>?*/??$('#example').dataTable(?{????"dom":?'<"top"i>rt<"bottom"flp><"clear">'??}?);??
?
?
Js代碼??
/**??
? <style>
? .float_left{
? float: left;
? }
? .float_right {
? float:right;
? }
? </style>
Js代碼??
*/??????$('#dealsData').dataTable(??????????{??????????????'dom':?'<"float_left"f>r<"float_right"l>tip',??????????????'language':?{??????????????????'emptyTable':?'沒有數據',??????????????????'loadingRecords':?'加載中...',??????????????????'processing':?'查詢中...',??????????????????'search':?'檢索:',??????????????????'lengthMenu':?'每頁?_MENU_?件',??????????????????'zeroRecords':?'沒有數據',??????????????????'paginate':?{??????????????????????'first':??????'第一頁',??????????????????????'last':???????'最后一頁',??????????????????????'next':???????'',??????????????????????'previous':???''??????????????????},??????????????????'info':?'第?_PAGE_?頁?/?總?_PAGES_?頁',??????????????????'infoEmpty':?'沒有數據',??????????????????'infoFiltered':?'(過濾總件數?_MAX_?條)'??????????????}??????????}??????);??
效果圖片
總結
以上是生活随笔為你收集整理的JQuery Datatables Dom 和 Language 参数详细说明的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
