如何从div中的表创建数据表gridview

时间:2014-02-12 07:09:09

标签: javascript jquery html css gridview

我只是一个初学者并且开始使用Jquery。我想用下面的代码创建一个gridview。我在div中创建了表,并调用了jquery datatable脚本实现表的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

1 个答案:

答案 0 :(得分:0)

您尚未添加css文件... 这是演示DEMO

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

也请参考link