在datatable.js中添加自定义列

时间:2016-01-17 04:50:28

标签: jquery datatable

美好的一天!我要建立一个数据表,但我在互联网上找到了这个代码然后我决定用它来代替从头开始...但我不知道如何添加一个列..这里是代码......

    <!DOCTYPE html>   
  <html lang="en">   
  <head>   
<meta charset="utf-8">   
<title>Example of Employee Table with twitter bootstrap</title>   
<meta name="description" content="Creating a Employee table with Twitter Bootstrap. Learn with example of a Employee Table with Twitter Bootstrap.">  
 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">   
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"></style>
  <script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </head>  
  <body style="margin:20px auto">  
  <div class="container">
  <div class="row header" style="text-align:center;color:green">
  <h3>Bootstrap Table With sorting,searching and paging using dataTable.js (Responsive)</h3>
  </div>
  <table id="myTable" class="table table-striped" >  
    <thead>  
      <tr>  
        <th>ENO</th>  
        <th>EMPName</th>  
        <th>Country</th>  
        <th>Salary</th>  
        <th>age</th>  
      </tr>  
    </thead>  
    <tbody>  

      <tr>  
        <td>001</td>  
        <td>Anusha</td>  
        <td>India</td>  
        <td>10000</td> 
        <td>25</td> 
      </tr>  
      <tr>  
        <td>002</td>  
        <td>Charles</td>  
        <td>United Kingdom</td>  
        <td>28000</td>  

      </tr>  
      <tr>  
        <td>003</td>  
        <td>Sravani</td>  
        <td>Australia</td>  
        <td>7000</td>  
        <td>25</td>
      </tr>  
       <tr>  
        <td>004</td>  
        <td>Amar</td>  
        <td>India</td>  
        <td>18000</td>  
        <td>25</td>
      </tr>  
      <tr>  
        <td>005</td>  
        <td>Lakshmi</td>  
        <td>India</td>  
        <td>12000</td>  
        <td>25</td>
      </tr>  
      <tr>  
        <td>006</td>  
        <td>James</td>  
        <td>Canada</td>  
        <td>50000</td>  
        <td>25</td>
      </tr>  

       <tr>  
        <td>007</td>  
        <td>Ronald</td>  
        <td>US</td>  
        <td>75000</td> 
        <td>25</td> 
      </tr>  
      <tr>  
        <td>008</td>  
        <td>Mike</td>  
        <td>Belgium</td>  
        <td>100000</td> 
        <td>25</td> 
      </tr>  
      <tr>  
        <td>009</td>  
        <td>Andrew</td>  
        <td>Argentina</td>  
        <td>45000</td>  
        <td>25</td>
      </tr>  

        <tr>  
        <td>010</td>  
        <td>Stephen</td>  
        <td>Austria</td>  
        <td>30000</td>  
        <td>25</td>
      </tr>  
      <tr>  
        <td>011</td>  
        <td>Sara</td>  
        <td>China</td>  
        <td>750000</td>
        <td>25</td>  
      </tr>  
      <tr>  
        <td>012</td>  
        <td>JonRoot</td>  
        <td>Argentina</td>  
        <td>65000</td>  
        <td>20</td>
      </tr>  
    </tbody>  
  </table>  
  </div>
</body>  
<script>
 $(document).ready(function(){
 $('#myTable').dataTable();
 });
 </script>
 </html>  

年龄列是我要添加的列,但有些原因导致出现“Datatables warning:table id = myTable ...... some code”的错误...你可以试试复制该代码并自行运行,以便您可以找到我的意思...谢谢......

1 个答案:

答案 0 :(得分:0)

你错过了'Age&#39;的数据。表格中的第二行。

当前代码

 <tr>  
        <td>002</td>  
        <td>Charles</td>  
        <td>United Kingdom</td>  
        <td>28000</td>  
</tr>  

您需要做的是为此行提供Age的值,您将不会收到警告。

修改后的代码:

<tr>  
        <td>002</td>  
        <td>Charles</td>  
        <td>United Kingdom</td>  
        <td>28000</td>
        <td>31</td>
</tr>