JQuery表格插件DataTable的使用

卡尔曼和玻尔兹曼谁曼

发布于 2019-01-25 15:12:47

4.6K0

发布于 2019-01-25 15:12:47

文章被收录于专栏：给永远比拿愉快给永远比拿愉快

DataTable是基于JQuery的表格插件，提供了丰富的功能。下面简要说明其用法。

1. 首先构造HTML表格。

2. 使用DataTable()方法将HTML表格转换成DataTable表格。

下面以实例的形式，说说如何给DataTable穿上BootStrap的外衣。

1.需要的JS文件有JQuery、DataTable还有DataTable和BootStrap连接（连接这个词也许用得不好，姑且这么叫吧，其实质就是给DataTable以BootStrap样式的JS文件，当然附带的还有连接的CSS文件，这些都可以去官网找。如果懒得找，我会给出我自己下载的文件。BootStrap版本2和3会有不同的JS和CSS连接文件）的JS文件。

2.需要的CSS文件有BootStrap CSS文件和DataTable和BootStrap连接的CSS文件。

3.在HTML头中引入这些文件。

4.构造HTML表格。

5.利用DataTable()方法对THML表格初始化。

源代码如下：（源码下载地址：http://yunpan.cn/cgMvmIQw9UfFB 提取码 95ad）

<!DOCTYPE html>
<html>
 <head> 
  <title>DataTable</title> 
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> 
  <link rel="stylesheet" type="text/css" href="css/dataTables.bootstrap.css" /> 
  <script type="text/javascript" src="js/jquery.js"></script> 
  <script type="text/javascript" src="js/jquery.dataTables.min.js"></script> 
  <script type="text/javascript" src="js/dataTables.bootstrap.js"></script> 
  <script type="text/javascript">
        $(document).ready( function () {
        $('#table_id').DataTable();
        } );
        </script> 
 </head> 
 <body> 
  <div style="width:800px; margin: 20px;"> 
   <table id="table_id" class="table table-striped table-bordered" width="100%" cellspacing="0"> 
    <thead> 
     <tr> 
      <th>Column 1</th> 
      <th>Column 2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Row 1 Data 1</td> 
      <td>Row 1 Data 2</td> 
     </tr> 
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr> 
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr>
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr>
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr>
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr>
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr>
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr>
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr>
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr>
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr>
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr>
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr>
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr>
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr>
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr>
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr>
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr>
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr>
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr>
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr>
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr>
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr>
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr>
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr>
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr>
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr>
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr>
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr>
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr>
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr>
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr> 
    </tbody> 
   </table> 
  </div>  
 </body>
</html>

效果图如下：