前些天發現了一個巨牛的人工智能學習網站，通俗易懂，風趣幽默，忍不住分享一下給大家。點擊跳轉到教程。
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'??
- }?);??
?
- 簡單的DIV和樣式元素設置
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_?條)'??
- ????????????}??
- ????????}??
- ????);??
效果圖片
方法與toString()方法的區別)
