javascript - 如何从 div 内的表创建数据表 gridview

Question

我只是一个初学者，开始使用 Jquery。我想用下面的代码创建一个 gridview。我在 div 中创建了表格，并调用了 jquery 数据表脚本实现表格的 gridview:

<div id="cont-lef">
   <table align="center" cellpadding="5px" border="1" id="myGridStyle">
       <tr>
          <td><p>Sunday Mornings</td>          
          <td><p>Rs 2.5 lakhs + ST</td>          
       </tr>
       <tr>
          <td><p>Saturday &Sunday Afternoons</td>          
          <td><p>Rs 2.0 lakhs + ST</td>          
       </tr>
       <tr>
          <td><p>Weekdays  </td>
          <td><p>Rs 1.5 lakhs + ST</td>          
       </tr>
       <tr>
          <td><p>Tournament Management</td>          
          <td><p>Rs. 25,000 + ST</td>          
       </tr>        
       <tr>
          <td><p>Caddy Fee</td>          
          <td><p>Rs. 300 per caddy</td>          
       </tr>                     
    </table>
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
    <script>
        $(function(){ $("#myGridStyle").dataTable(); })
    </script>
    <p>
        <i>*Catering to be negotiated directly with caterer</i>
    </p>
</div>

现在，当我完全按照示例中的方式完成操作时，为什么它没有创建数据表 gridview。 DEMO

Answer 1

你还没有添加 css 文件...这是演示 DEMO

<link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />

另请参阅 link