表格插件(排序&分页)

2018-04-26  本文已影响0人  从前慢pearl

1,

查看效果
文档

2,引入资源

<!--引入css-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">

<!--引入JavaScript-->
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

3,table主体格式

   <table id="example" class="display" style="width:100%">
           <thead>
                   <tr></tr>
           </thead>
           <tbody>
                    <tr></tr>
           </tbody>
           <tfoot>
                    <tr>
                          <th>Name</th>
                    </tr>
           </tfoot>
    </table>

4,默认样式下显示表格排序 和 分页

  <script>
    $(document).ready(function() {
       $('#example').DataTable();
   } );
 </script>

5,github代码

例子

上一篇下一篇

猜你喜欢

热点阅读