DataTables

从零开始

最简单的初始化（使用默认配置）：

　　功能=>搜索、排序、分页、表格信息

<!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>

View Code

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>

View Code（Dom）

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>

View Code（JQueryUI）

分页模式选择（样式）

默认分页样式：（使用插件分页 cdn://cdn.datatables.net/plug-ins/1.10.15/pagination/extjs.js ）

分页有四种模式可以选择：（使用"pagingType"属性，添加下面4种模式）

simple - 只有上一页、下一页两个按钮
simple_numbers - 除了上一页、下一页两个按钮还有页数按钮，Datatables默认是这个
full - 有四个按钮首页、上一页、下一页、末页
full_numbers - 除首页、上一页、下一页、末页四个按钮还有页数按钮

'pagingType' : 'simple'

'pagingType' : 'simple_numbers '

'pagingType' : 'full '

'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>

View Code（stateSave）

功能启用/禁用

<!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>