jQuery DataTable插件无搜索/排序/分页功能问题求助

Let's walk through the key issues in your code that are preventing DataTables features from showing up:

1. Unclosed JavaScript Initialization #

Your DataTables setup script is missing closing brackets, which breaks the entire JavaScript execution. This means DataTables never actually initializes properly.

Incorrect:

<script type="text/javascript"> $(document).ready(function() { var table = $('#TEST').DataTable({ }); </script>

Corrected:

<script type="text/javascript">
    $(document).ready(function() {
        var table = $('#TEST').DataTable({ });
    }); // Close the ready function
</script>

2. Invalid Table Structure (Repeater Wrapping Rows in <tbody>) #

Your Repeater is adding a new <tbody> element for every row, which is invalid HTML. DataTables expects a clean table structure with one (or a few) <tbody> sections, not one per row. This confuses the plugin when parsing the table.

Incorrect:

<table id="TEST" class="table table-striped table-bordered ">
    <thead>
        <tr>
            <th>Application Name</th>
            <th>Customer Name</th>
            <th>Status</th>
            <th>AMC</th>
            <th>Edit</th>
        </tr>
    </thead>
    <asp:Repeater ID="r7" runat="server">
        <ItemTemplate>
            <tbody>
                <tr>
                    <!-- row content -->
                </tr>
            </tbody>
        </ItemTemplate>
    </asp:Repeater>
</table>

Corrected:

<table id="TEST" class="table table-striped table-bordered ">
    <thead>
        <tr>
            <th>Application Name</th>
            <th>Customer Name</th>
            <th>Status</th>
            <th>AMC</th>
            <th>Edit</th>
        </tr>
    </thead>
    <tbody> <!-- Single tbody outside the Repeater -->
        <asp:Repeater ID="r7" runat="server">
            <ItemTemplate>
                <tr>
                    <td><%#Eval("app_name") %></td>
                    <td><%#Eval("Cname") %></td>
                    <td><%#Eval("status") %></td>
                    <td><%#Eval("AMC") %></td>
                    <td><a href="Project_edit.aspx?id=<%#Eval("id") %>" style="color:rgb(50,205,50)">Edit</a></td>
                </tr>
            </ItemTemplate>
        </asp:Repeater>
    </tbody>
</table>

3. Conflicting DataTables Assets & Missing jQuery #

You're including two conflicting DataTables CSS files (dataTables.bootstrap.min.css and jquery.dataTables.css), plus there's a version mismatch between your CSS (1.10.0) and JS (1.10.9). Most importantly, I don't see jQuery included in your code—DataTables depends on jQuery to work.

Updated Asset Includes:

<!-- Include jQuery first (required for DataTables) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Keep your existing Bootstrap CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">

<!-- Use Bootstrap-compatible DataTables CSS, matching the JS version -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/dataTables.bootstrap.min.css">

<!-- DataTables JS files (match version with CSS) -->
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"></script>

Once you fix these issues, the DataTables search box, sorting controls, and pagination should appear as expected.

内容的提问来源于stack exchange，提问作者Joyal George