javascript - JQuery DataTable pagenate 无法与 asp 转发器一起使用

Question

我有一个简单的数据表，大约有 93 列......但我的表标题中没有显示条目、排序图标或搜索框。我有我的所有专栏。不确定我是否遗漏了某些内容或者我的脚本加载顺序不正确？

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
        );

Answer 1

初始化代码应该是:

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

但是，上面的代码可以简化如下所示，因为您使用的值与默认值相同。

$('#vSales').DataTable();