2015-08-19 30 views
1

我有一个简单的数据表,大约93列....但我没有显示条目,排序图标或搜索框在我的表头。我有我所有的列..不知道如果我错过了什么或命令如何加载我的脚本是不正确的?JQuery DataTable pagenate不能与asp中继器一起工作

HTML

<div class="dataTable_wrapper"> 
    <div class="dataTables_wrapper form-inline dt-bootstrap no-footer"> 
     <asp:Repeater id="repeater_Sales" runat="server"> 
     <HeaderTemplate> 
      <table border="1" id="vSales" class="table table-striped table-bordered table-hover"> 
      <thead> 
       <th>Customer</th> 
       <th>Location</th> 
       <th>POS</th> 
       <th>Product</th> 
       <th>QTY</th> 
       <th>Sales</th> 
       </thead> 
      </HeaderTemplate> 
      <ItemTemplate> 
      <tr> 
       <td><%#Container.DataItem("cus_desc")%></td> 
       <td><%#Container.DataItem("loc_desc")%></td> 
       <td><%#Container.DataItem("pos_desc")%></td> 
       <td><%#Container.DataItem("pro_desc")%></td> 
       <td><%#Container.DataItem("quantity_sold")%></td> 
       <td><%#Container.DataItem("net_sales")%></td> 
      </tr> 
     </ItemTemplate> 
     <FooterTemplate> 
     </table> 
     </FooterTemplate> 
     </asp:Repeater> 
    </div> 
    </div> 

CSS

<!-- Bootstrap Core CSS --> 
    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 

    <!-- MetisMenu CSS --> 
    <link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet"> 

    <!-- DataTables CSS --> 
    <link href="../bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet"> 

    <!-- DataTables Responsive CSS --> 
    <link href="../bower_components/datatables-responsive/css/dataTables.responsive.css" rel="stylesheet"> 

    <!-- Custom CSS --> 
    <link href="../dist/css/sb-admin-2.css" rel="stylesheet"> 

    <!-- Custom Fonts --> 
    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 

    <!-- Custom datepicker --> 
    <link href="../bower_components/datepicker/css/datepicker.css" rel="stylesheet" type="text/css"> 

的JavaScript - 插件

<!-- jQuery --> 
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 

    <!-- DataTables JavaScript --> 
    <script src="../bower_components/datatables/media/js/jquery.dataTables.min.js"></script> 
    <script src="../bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script> 


    <!-- jQuery Validate--> 
    <script src="../bower_components/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script> 

    <!-- Bootstrap Core JavaScript --> 
    <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 

    <!-- Custom Theme JavaScript --> 
    <script src="../dist/js/sb-admin-2.js"></script> 

    <!-- Metis Menu Plugin JavaScript --> 
    <script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script> 

    <!-- Datepicker Plugin JavaScript --> 
    <script src="../bower_components/datepicker/js/bootstrap-datepicker.js"></script> 

的Javascript

$('#vSales').DataTable( 
      "bPaginate": true, 
      "bFilter": true, 
      "bInfo": true 
     ); 
+1

检查生成的HTML。 Datatables需要'thead'和'tbody'元素。 –

回答

0

初始化代码应该是:

$('#vSales').DataTable({ 
    "paging": true, 
    "searching": true, 
    "info": true 
}); 

但是上面的代码可能,因为价值你使用相同的默认设置会被简化,如下图所示。

$('#vSales').DataTable(); 
相关问题