jquery的表格插件dataTables的使用(一)

1.jquery—Datatable简单案列的使用

• 用于前端界面已写好的table，使用非常方便，引用相应的js与css文件就可以使用（此文章为jquery-datatable插件最基本的应用方式）

• 界面结果

2.使用步骤

1. 引入文件(采用CDN方式引入，网址https://www.staticfile.org/)

   //css文件
   
   <link rel="stylesheet" href="https://cdn.staticfile.org/twitterbootstrap/3.3.7/css/bootstrap.css">
   <link rel="stylesheet" href="https://cdn.staticfile.org/datatables/1.10.19/css/dataTables.bootstrap.css">
   
   
   //js文件
   
   <script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
   <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <script src="https://cdn.staticfile.org/datatables/1.10.19/js/jquery.dataTables.js"></script>
   <script src="https://cdn.staticfile.org/datatables/1.10.19/js/dataTables.bootstrap.js"></script>

   2.编写前端代码

   <div class="container" style="margin-top:100px">
               <table id="table" class="table table-striped table-bordered">
                       <thead>
                           <tr>
                               <th>Name</th>
                               <th>Age</th>
                               <th>Gender</th>
                               <th>Height</th>
                               <th>Province</th>
                               <th>Sport</th>
                           </tr>
                       </thead>
                       <tbody>
                           <tr>
                               <td>Jill Smith</td>
                               <td>25</td>
                               <td>Female</td>
                               <td>5'4</td>
                               <td>British Columbia</td>
                               <td>Volleyball</td>
                           </tr>
                           <tr>
                               <td>John Stone</td>
                               <td>30</td>
                               <td>Male</td>
                               <td>5'9</td>
                               <td>Ontario</td>
                               <td>Badminton</td>
                           </tr>
                           <tr>
                               <td>Jane Strip</td>
                               <td>29</td>
                               <td>Female</td>
                               <td>5'6</td>
                               <td>Manitoba</td>
                               <td>Hockey</td>
                           </tr>
                           <tr>
                               <td>Gary Mountain</td>
                               <td>21</td>
                               <td>Mail</td>
                               <td>5'8</td>
                               <td>Alberta</td>
                               <td>Curling</td>
                           </tr>
                           <tr>
                               <td>James Camera</td>
                               <td>31</td>
                               <td>Male</td>
                               <td>6'1</td>
                               <td>British Columbia</td>
                               <td>Hiking</td>
                           </tr>
                       </tbody>
                   </table>
       </div>

   3.JavaScript编写(因为是简单的界面所有配置都采用默认配置，只要调用Datatable()方法就能完成界面渲染)

   $('#table').DataTable();