无法初始化DataTables

时间:2015-06-30 09:39:04

标签: asp.net datatables datatables-1.10

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

我试图使用CDN,但徒劳无功。但是,当我将相同的代码和CDN复制到记事本++时,它可以工作。我花了两天时间查看相关问题,但它并没有解决我的问题。我尝试将链接放在<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>

1 个答案:

答案 0 :(得分:0)

你需要在之前加载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>