Плагин Jquery DataTable не имеет эффекта - PullRequest
Новая
       9

Плагин Jquery DataTable не имеет эффекта

0 голосов
/ 17 июня 2019

Я использовал плагин 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 не работает, это как обычная таблица. в чем проблема?

1 Ответ

1 голос
/ 17 июня 2019

Ваша проблема отсутствует #, и ваш идентификатор содержит изменение пробела с 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...