Newb ie JS DataTables вопрос: как его запустить? - PullRequest
Новая
       11

Newb ie JS DataTables вопрос: как его запустить?

1 голос
/ 27 мая 2020

Извините за очень новый ie вопрос, но я совершенно новичок в веб-разработке и пытаюсь создать простой одностраничный сайт, который будет отражать некоторые "табличные" данные с использованием пакета DataTables. Я перепробовал огромное количество разных способов инициировать его, но без особого успеха.

Что я делаю не так? Мой код: 

<html>
<head>
    <link rel="stylesheet" type="text/css" href="/DataTables/datatables.css">

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" charset="utf8" src="/DataTables/datatables.js"></script>

    <script type="text/javascript">


        $(document).ready(function () {
            $('#example').DataTable();
        });


    </script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
    </tr>
    <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
    </tr>
    </tbody>
</table>
</body>
</html>

1 Ответ

0 голосов
/ 27 мая 2020

Предполагается, что вы имеете в виду этот плагин: https://datatables.net/

Вы используете старую версию jQuery, которая несовместима с этим плагином. 1.11.3 действительно старый, и его настоятельно рекомендуется обновить. Использование последней (SO) версии jQuery решит вашу проблему, как вы можете видеть во фрагменте ниже. Любая версия 3.x подойдет. 

$(document).ready(function () {
  $('#example').DataTable();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
    </tr>
    <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
    </tr>
    </tbody>
</table>
...