Question

我在静态的小型Table中使用了Jquery DataTable插件。但这不起作用。代码是这样的：

<html>
<head>
<link href="bootstrap.css" rel="stylesheet"  type="text/css"/>
<link href="jquery.dataTables.css" rel="stylesheet"  type="text/css"/>
<script type="text/javascript" language="javascript" src="jquery-3.4.1.min.js"></script>

<script type="text/javascript" language="javascript"  src="jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="bootstrap.js"></script>
<script type="text/javascript" language="javascript" >
    $(document).ready(function () {
        $("myDataTable").DataTable();
    });
</script>
</head>
<body>
<div class="panel panel-body">      

    <div class="col-md-9">
        <table id="myDataTable " class="display">
            <tr>
                <th>EmployeeName</th>
                <th>DepartmentName</th>
                <th>Salary</th>
            </tr>
            <tbody>
                <tr>
                    <td>Noosh</td>
                    <td>Psian</td>
                    <td>1000</td>
                </tr>
                <tr>
                    <td>Nil</td>
                    <td>AD</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>Neg</td>
                    <td>Amatis</td>
                    <td>3000</td>
                </tr>
                <tr>
                    <td>Neg2</td>
                    <td>Amatis</td>
                    <td>3000</td>
                </tr>
                <tr>
                    <td>Neg3</td>
                    <td>Amatis</td>
                    <td>3000</td>
                </tr>
                <tr>
                    <td>Neg1</td>
                    <td>Amatis</td>
                    <td>3000</td>

                </tr>
        </table>
    </div>
</div>
<script type="text/javascript" language="javascript" >
 $(document).ready(function () {
     $("myDataTable").DataTable();
 });
</script>
 </body>
 </html>

但是Databale无法正常工作，就像普通表一样。问题出在哪里？

Answer 1

您的问题遗漏了＃，并且您的ID包含的空间从id="myDataTable "更改为id="myDataTable"

$("#myDataTable").DataTable();

还将表标题的tr更改为thead

 <thead>
       <th>EmployeeName</th>
       <th>DepartmentName</th>
       <th>Salary</th>
  </thead>

$(document).ready(function () {
     $("#myDataTable").DataTable();
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<link href="bootstrap.css" rel="stylesheet"  type="text/css"/>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"  type="text/css"/>


<script type="text/javascript" language="javascript"  src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="bootstrap.js"></script>

</head>
<body>
<div class="panel panel-body">      

    <div class="col-md-9">
        <table id="myDataTable" class="display">
            <thead>
                <th>EmployeeName</th>
                <th>DepartmentName</th>
                <th>Salary</th>
             </thead>
            <tbody>
                <tr>
                    <td>Noosh</td>
                    <td>Psian</td>
                    <td>1000</td>
                </tr>
                <tr>
                    <td>Nil</td>
                    <td>AD</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>Neg</td>
                    <td>Amatis</td>
                    <td>3000</td>
                </tr>
                <tr>
                    <td>Neg2</td>
                    <td>Amatis</td>
                    <td>3000</td>
                </tr>
                <tr>
                    <td>Neg3</td>
                    <td>Amatis</td>
                    <td>3000</td>
                </tr>
                <tr>
                    <td>Neg1</td>
                    <td>Amatis</td>
                    <td>3000</td>

                </tr>
        </table>
    </div>
</div>

 </body>
 </html>

jQuery DataTable插件不会起作用

1 个答案: