DataTables
從零開始javascript
最簡單的初始化（使用默認配置）：css
功能=>搜索、 排序、 分頁、表格信息html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>初始化Tables</title> <link href="https://cdn.bootcss.com/datatables/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/datatables/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"> </head> <body> <table id="zero" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> </tbody> </table> <script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.min.js"></script> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> <script> $(document).ready(function () { $("#zero").dataTable(); }) </script> </body> </html>
Dom定位：改變默認佈局或者擴展插件。
- l - Length changing 每頁顯示多少條數據選項
- f - Filtering input 搜索框
- t - The Table 表格
- i - Information 表格信息
- p - Pagination 分頁按鈕
- r - pRocessing 加載等待顯示信息
- < and > - div elements 一個div元素
- <"#id" and > - div with an id 指定id的div元素
- <"class" and > - div with a class 指定樣式名的div元素
- <"#id.class" and > - div with an id and class 指定id和樣式的div元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"/> <link rel="stylesheet" type="text/css" href="../../media/table/jquery.dataTables.min.css"/> </head> <body> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> </tbody> </table> <script src="../../media/table/jquery.js"></script> <script src="../../media/table/jquery.dataTables.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#example').dataTable( { "dom": 'lrtip'//使用方式也能夠加標籤方式<> } ); } ); </script> </body> </html>
jQuery-UI風格的垂直滾動條
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"> 7 <link href="http://cdn.datatables.net/plug-ins/be7019ee387/integration/jqueryui/dataTables.jqueryui.css" rel="stylesheet"> 8 </head> 9 <body> 10 <table id="example" class="display" cellspacing="0" width="100%"> 11 <thead> 12 <tr> 13 <th>First name</th> 14 <th>Last name</th> 15 <th>Position</th> 16 <th>Office</th> 17 <th>Age</th> 18 <th>Start date</th> 19 <th>Salary</th> 20 <th>Extn.</th> 21 <th>E-mail</th> 22 </tr> 23 </thead> 24 25 <tbody> 26 <tr> 27 <td>Tiger</td> 28 <td>Nixon</td> 29 <td>System Architect</td> 30 <td>Edinburgh</td> 31 <td>61</td> 32 <td>2011/04/25</td> 33 <td>$320,800</td> 34 <td>5421</td> 35 <td>t.nixon@datatables.net<script type="text/javascript"> 36 /* <![CDATA[ */ 37 (function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})(); 38 /* ]]> */ 39 </script></td> 40 </tr> 41 <tr> 42 <td>Garrett</td> 43 <td>Winters</td> 44 <td>Accountant</td> 45 <td>Tokyo</td> 46 <td>63</td> 47 <td>2011/07/25</td> 48 <td>$170,750</td> 49 <td>8422</td> 50 <td>g.winters@datatables.net<script type="text/javascript"> 51 /* <![CDATA[ */ 52 (function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})(); 53 /* ]]> */ 54 </script></td> 55 </tr> 56 <tr> 57 <td>Ashton</td> 58 <td>Cox</td> 59 <td>Junior Technical Author</td> 60 <td>San Francisco</td> 61 <td>66</td> 62 <td>2009/01/12</td> 63 <td>$86,000</td> 64 <td>1562</td> 65 <td>a.cox@datatables.net<script type="text/javascript"> 66 /* <![CDATA[ */ 67 (function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})(); 68 /* ]]> */ 69 </script></td> 70 </tr> 71 <tr> 72 <td>Tiger</td> 73 <td>Nixon</td> 74 <td>System Architect</td> 75 <td>Edinburgh</td> 76 <td>61</td> 77 <td>2011/04/25</td> 78 <td>$320,800</td> 79 <td>5421</td> 80 <td>t.nixon@datatables.net<script type="text/javascript"> 81 /* <![CDATA[ */ 82 (function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})(); 83 /* ]]> */ 84 </script></td> 85 </tr> 86 <tr> 87 <td>Garrett</td> 88 <td>Winters</td> 89 <td>Accountant</td> 90 <td>Tokyo</td> 91 <td>63</td> 92 <td>2011/07/25</td> 93 <td>$170,750</td> 94 <td>8422</td> 95 <td>g.winters@datatables.net<script type="text/javascript"> 96 /* <![CDATA[ */ 97 (function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})(); 98 /* ]]> */ 99 </script></td> 100 </tr> 101 <tr> 102 <td>Ashton</td> 103 <td>Cox</td> 104 <td>Junior Technical Author</td> 105 <td>San Francisco</td> 106 <td>66</td> 107 <td>2009/01/12</td> 108 <td>$86,000</td> 109 <td>1562</td> 110 <td>a.cox@datatables.net<script type="text/javascript"> 111 /* <![CDATA[ */ 112 (function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})(); 113 /* ]]> */ 114 </script></td> 115 </tr> 116 <tr> 117 <td>Tiger</td> 118 <td>Nixon</td> 119 <td>System Architect</td> 120 <td>Edinburgh</td> 121 <td>61</td> 122 <td>2011/04/25</td> 123 <td>$320,800</td> 124 <td>5421</td> 125 <td>t.nixon@datatables.net<script type="text/javascript"> 126 /* <![CDATA[ */ 127 (function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})(); 128 /* ]]> */ 129 </script></td> 130 </tr> 131 <tr> 132 <td>Garrett</td> 133 <td>Winters</td> 134 <td>Accountant</td> 135 <td>Tokyo</td> 136 <td>63</td> 137 <td>2011/07/25</td> 138 <td>$170,750</td> 139 <td>8422</td> 140 <td>g.winters@datatables.net<script type="text/javascript"> 141 /* <![CDATA[ */ 142 (function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})(); 143 /* ]]> */ 144 </script></td> 145 </tr> 146 <tr> 147 <td>Ashton</td> 148 <td>Cox</td> 149 <td>Junior Technical Author</td> 150 <td>San Francisco</td> 151 <td>66</td> 152 <td>2009/01/12</td> 153 <td>$86,000</td> 154 <td>1562</td> 155 <td>a.cox@datatables.net<script type="text/javascript"> 156 /* <![CDATA[ */ 157 (function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})(); 158 /* ]]> */ 159 </script></td> 160 </tr> 161 <tr> 162 <td>Tiger</td> 163 <td>Nixon</td> 164 <td>System Architect</td> 165 <td>Edinburgh</td> 166 <td>61</td> 167 <td>2011/04/25</td> 168 <td>$320,800</td> 169 <td>5421</td> 170 <td>t.nixon@datatables.net<script type="text/javascript"> 171 /* <![CDATA[ */ 172 (function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})(); 173 /* ]]> */ 174 </script></td> 175 </tr> 176 <tr> 177 <td>Garrett</td> 178 <td>Winters</td> 179 <td>Accountant</td> 180 <td>Tokyo</td> 181 <td>63</td> 182 <td>2011/07/25</td> 183 <td>$170,750</td> 184 <td>8422</td> 185 <td>g.winters@datatables.net<script type="text/javascript"> 186 /* <![CDATA[ */ 187 (function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})(); 188 /* ]]> */ 189 </script></td> 190 </tr> 191 <tr> 192 <td>Ashton</td> 193 <td>Cox</td> 194 <td>Junior Technical Author</td> 195 <td>San Francisco</td> 196 <td>66</td> 197 <td>2009/01/12</td> 198 <td>$86,000</td> 199 <td>1562</td> 200 <td>a.cox@datatables.net<script type="text/javascript"> 201 /* <![CDATA[ */ 202 (function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})(); 203 /* ]]> */ 204 </script></td> 205 </tr> 206 </tbody> 207 </table> 208 <script src="../../media/table/jquery.js"></script> 209 <script src="../../media/table/jquery.dataTables.min.js"></script> 210 <script> 211 $(document).ready(function() { 212 $('#example').dataTable( { 213 "scrollY": 200,//設置條件爲多少時滾動 214 "scrollCollapse": true, 215 "jQueryUI": true//是否使用JQueryUI 216 } ); 217 } ); 218 </script> 219 </body> 220 </html>
分頁模式選擇（樣式）
默認分頁樣式：（使用插件分頁 cdn://cdn.datatables.net/plug-ins/1.10.15/pagination/extjs.js ）java
分頁有四種模式能夠選擇：（使用"pagingType"屬性，添加下面4種模式）jquery
simple- 只有上一頁、下一頁兩個按鈕simple_numbers- 除了上一頁、下一頁兩個按鈕還有頁數按鈕，Datatables默認是這個full- 有四個按鈕首頁、上一頁、下一頁、末頁full_numbers- 除首頁、上一頁、下一頁、末頁四個按鈕還有頁數按鈕
'pagingType' : 'simple'bootstrap
'pagingType' : 'simple_numbers 'session
'pagingType' : 'full 'dom
'pagingType' : 'full_numbers '異步
保存狀態（下回訪問時會顯示上一次關閉頁面時的內容。）
- stateSave：保存最後一次分頁信息、排序信息，當頁面刷新，或者從新進入這個頁面，恢復上次的狀態。（使用本地儲存和session儲存）。
- stateSaveCallback/stateLoadCallback：數據是異步獲取（不兼容ie8如下）。
- stateDuration：設置的保存時間（不設置默認保存2小時）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>保存狀態</title> 6 <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"/> 7 <link rel="stylesheet" type="text/css" 8 href="../../media/table/jquery.dataTables.min.css"/> 9 </head> 10 <body> 11 <table id="example" class="display" cellspacing="0" width="100%"> 12 <thead> 13 <tr> 14 <th>Name</th> 15 <th>Position</th> 16 <th>Office</th> 17 <th>Age</th> 18 <th>Start date</th> 19 <th>Salary</th> 20 </tr> 21 </thead> 22 23 <tfoot> 24 <tr> 25 <th>Name</th> 26 <th>Position</th> 27 <th>Office</th> 28 <th>Age</th> 29 <th>Start date</th> 30 <th>Salary</th> 31 </tr> 32 </tfoot> 33 34 <tbody> 35 <tr> 36 <td>Tiger Nixon</td> 37 <td>System Architect</td> 38 <td>Edinburgh</td> 39 <td>61</td> 40 <td>2011/04/25</td> 41 <td>$320,800</td> 42 </tr> 43 <tr> 44 <td>Garrett Winters</td> 45 <td>Accountant</td> 46 <td>Tokyo</td> 47 <td>63</td> 48 <td>2011/07/25</td> 49 <td>$170,750</td> 50 </tr> 51 <tr> 52 <td>Tiger Nixon</td> 53 <td>System Architect</td> 54 <td>Edinburgh</td> 55 <td>61</td> 56 <td>2011/04/25</td> 57 <td>$320,800</td> 58 </tr> 59 <tr> 60 <td>Garrett Winters</td> 61 <td>Accountant</td> 62 <td>Tokyo</td> 63 <td>63</td> 64 <td>2011/07/25</td> 65 <td>$170,750</td> 66 </tr><tr> 67 <td>Tiger Nixon</td> 68 <td>System Architect</td> 69 <td>Edinburgh</td> 70 <td>61</td> 71 <td>2011/04/25</td> 72 <td>$320,800</td> 73 </tr> 74 <tr> 75 <td>Garrett Winters</td> 76 <td>Accountant</td> 77 <td>Tokyo</td> 78 <td>63</td> 79 <td>2011/07/25</td> 80 <td>$170,750</td> 81 </tr><tr> 82 <td>Tiger Nixon</td> 83 <td>System Architect</td> 84 <td>Edinburgh</td> 85 <td>61</td> 86 <td>2011/04/25</td> 87 <td>$320,800</td> 88 </tr> 89 <tr> 90 <td>Garrett Winters</td> 91 <td>Accountant</td> 92 <td>Tokyo</td> 93 <td>63</td> 94 <td>2011/07/25</td> 95 <td>$170,750</td> 96 </tr><tr> 97 <td>Tiger Nixon</td> 98 <td>System Architect</td> 99 <td>Edinburgh</td> 100 <td>61</td> 101 <td>2011/04/25</td> 102 <td>$320,800</td> 103 </tr> 104 <tr> 105 <td>Garrett Winters</td> 106 <td>Accountant</td> 107 <td>Tokyo</td> 108 <td>63</td> 109 <td>2011/07/25</td> 110 <td>$170,750</td> 111 </tr><tr> 112 <td>Tiger Nixon</td> 113 <td>System Architect</td> 114 <td>Edinburgh</td> 115 <td>61</td> 116 <td>2011/04/25</td> 117 <td>$320,800</td> 118 </tr> 119 <tr> 120 <td>Garrett Winters</td> 121 <td>Accountant</td> 122 <td>Tokyo</td> 123 <td>63</td> 124 <td>2011/07/25</td> 125 <td>$170,750</td> 126 </tr> 127 <tr> 128 <td>Garrett Winters</td> 129 <td>Accountant</td> 130 <td>Tokyo</td> 131 <td>63</td> 132 <td>2011/07/25</td> 133 <td>$170,750</td> 134 </tr> 135 <tr> 136 <td>Garrett Winters</td> 137 <td>Accountant</td> 138 <td>Tokyo</td> 139 <td>63</td> 140 <td>2011/07/25</td> 141 <td>$170,750</td> 142 </tr> 143 <tr> 144 <td>Garrett Winters</td> 145 <td>Accountant</td> 146 <td>Tokyo</td> 147 <td>63</td> 148 <td>2011/07/25</td> 149 <td>$170,750</td> 150 </tr> 151 </tbody> 152 </table> 153 154 <script src="../../media/table/jquery.js"></script> 155 <script src="../../media/table/jquery.dataTables.min.js"></script> 156 <script type="text/javascript"> 157 $(document).ready(function() { 158 $('#example').dataTable( { 159 "stateSave" : true 160 } ); 161 } ); 162 </script> 163 </body> 164 </html>
功能啓用/禁用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>功能啓用/禁用</title> <link rel="stylesheet" href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css"> </head> <body> <div> <table id="example" class="display datatable"> <thead> <th>姓名</th> <th>位置</th> <th>年齡</th> <th>薪水</th> </thead> <tbody> <tr> <td>張三</td> <td>北京</td> <th>23</th> <th>￥5000</th> </tr> <tr> <td>李四</td> <td>上海</td> <th>25</th> <th>￥4000</th> </tr> <tr> <td>王五</td> <td>廣州</td> <th>20</th> <th>￥7000</th> </tr> <tr> <td>趙六</td> <td>深圳</td> <th>19</th> <th>￥10000</th> </tr> <tr> <td>張三</td> <td>北京</td> <th>23</th> <th>￥5000</th> </tr> <tr> <td>李四</td> <td>上海</td> <th>25</th> <th>￥4000</th> </tr> <tr> <td>王五</td> <td>廣州</td> <th>20</th> <th>￥7000</th> </tr> <tr> <td>趙六</td> <td>深圳</td> <th>19</th> <th>￥10000</th> </tr> <tr> <td>張三</td> <td>北京</td> <th>23</th> <th>￥5000</th> </tr> <tr> <td>李四</td> <td>上海</td> <th>25</th> <th>￥4000</th> </tr> <tr> <td>王五</td> <td>廣州</td> <th>20</th> <th>￥7000</th> </tr> <tr> <td>趙六</td> <td>深圳</td> <th>19</th> <th>￥10000</th> </tr> </tbody> <tfoot> <th>姓名</th> <th>位置</th> <th>年齡</th> <th>薪水</th> </tfoot> </table> </div> <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <script src="http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script> <script> $(document).ready( function () { $('#example').DataTable({ pageLength:5, paging:false, filter:false, ordering:false, info:false }); } ); </script> </body> </html>
相關文章
- 1. DataTables
- 2. datatables
- 3. webapi+DataTables
- 4. jquery----datatables
- 5. JS dataTables
- 6. flask-Datatables
- 7. jquery-datatables
- 8. jquery datatables使用
- 9. datatables 筆記
- 10. JQuery Datatables(二)
- 更多相關文章...
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. DataTables
- 2. datatables
- 3. webapi+DataTables
- 4. jquery----datatables
- 5. JS dataTables
- 6. flask-Datatables
- 7. jquery-datatables
- 8. jquery datatables使用
- 9. datatables 筆記
- 10. JQuery Datatables(二)