无法初始化数据表

Cannot initialize DataTables

我正在尝试在我的 asp.net 项目中使用 jQuery DataTables,但它不应用 dataTable 的样式和功能,我的 table 仍然正常。

我尝试使用 CDN 但没有成功。但是,当我将相同的代码和 CDN 复制到记事本 ++ 时,它就可以工作了。我花了2天时间查看相关问题,但并没有解决我的问题。我试图将链接放在 <head><body> 标签中,但仍然是徒劳的。

<%@ Page Title="" Language="C#" MasterPageFile="~/AdminMenus.Master" AutoEventWireup="true" CodeBehind="companies.aspx.cs" Inherits="AdminDashboard.companies" %>

<asp:Content ID="Content1" ContentPlaceHolderID="title" runat="server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">

    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="~/DataTables-1.10.7/media/css/jquery.dataTables.css" />

    <!-- DataTables -->
    <script type="text/javascript" charset="utf8" src="~/DataTables-1.10.7/media/js/jquery.dataTables.js"></script>
    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="~/DataTables-1.10.7/media/js/jquery.js"></script>
    <script>
        $(document).ready(function () {
            $('#camp').DataTable();
        });
    </script>


</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id="content">
        <!-- begin breadcrumb -->
        <ol class="breadcrumb pull-right">
            <li><a href="javascript:;">Home</a></li>
            <li class="active">Dashboard</li>
        </ol>
        <!-- end breadcrumb -->
        <h3 class="page-header">Dashboard <small>.</small></h3>


        <div class="row" style="margin-top: -15px;">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading" style="background: #2d353c; color: #fff; border: none; padding: 10px 15px;">
                        <div>
                            <strong>Recently Registered Company(ies)</strong>
                        </div>
                    </div>
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table id="camp" class="table display table-striped">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Name</th>
                                        <th>Country</th>
                                        <th>City</th>
                                        <th>Email address</th>
                                        <th>Registration Approval</th>
                                        <th>Membership Type</th>
                                        <th>Registration Date</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    <tr>
                                        <td>1 </td>
                                        <td>Youbisol</td>
                                        <td>South Africa</td>
                                        <td>Johannesburg</td>
                                        <td>freddyyumba@youbisol.com</td>
                                        <td>Pending</td>
                                        <td>Platinum</td>
                                        <td>2015/07/25</td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>Youbisol</td>
                                        <td>South Africa</td>
                                        <td>Johannesburg</td>
                                        <td>freddyyumba@youbisol.com</td>
                                        <td>Pending</td>
                                        <td>Platinum</td>
                                        <td>2015/07/25</td>
                                    </tr>
                                    <tr>
                                        <td>1 </td>
                                        <td>Youbisol</td>
                                        <td>South Africa</td>
                                        <td>Johannesburg</td>
                                        <td>freddyyumba@youbisol.com</td>
                                        <td>Pending</td>
                                        <td>Platinum</td>
                                        <td>2015/07/25</td>
                                    </tr>
                                    <tr>
                                        <td>1 </td>
                                        <td>PKMM</td>
                                        <td>GABON</td>
                                        <td>LIBREVILLE</td>
                                        <td>freddyyumba@youbisol.com</td>
                                        <td>Aproved</td>
                                        <td>Platinum</td>
                                        <td>2015/09/20</td>
                                    </tr>
                                    <tr>
                                        <td>1 </td>
                                        <td>Youbisol</td>
                                        <td>South Africa</td>
                                        <td>Johannesburg</td>
                                        <td>freddyyumba@youbisol.com</td>
                                        <td>Pending</td>
                                        <td>Platinum</td>
                                        <td>2015/07/25</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</asp:Content>

您需要先加载 jQuery ,然后 加载任何 jQuery 相关代码,例如 jQuery DataTables,见下文:

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="~/DataTables-1.10.7/media/js/jquery.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="~/DataTables-1.10.7/media/js/jquery.dataTables.js"></script>