Как использовать plugin jQuery dataTable?

Я пробую делать grid в MVC 5 с помощью plugin jQuery dataTable, я это установил с консоли с PM> Install-Package datatables.net и я поместил ссылки в вид следующего способа

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/DataTables-1.10.11/media/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/DataTables-1.10.11/extensions/Responsive/css/responsive.bootstrap.min.css" rel="stylesheet" />

<script src="~/Scripts/jquery-2.2.2.min.js"></script>
<script src="~/Scripts/DataTables-1.10.11/media/js/jquery.dataTables.min.js"></script>
<script src="~/Scripts/DataTables-1.10.11/media/js/dataTables.bootstrap.min.js"></script>
<script src="~/Scripts/DataTables-1.10.11/extensions/Responsive/js/dataTables.responsive.min.js"></script>
<script src="~/Scripts/DataTables-1.10.11/extensions/Responsive/js/responsive.bootstrap.min.js"></script>

Потом я сделал маленькую таблицу, чтобы это тестировать, но рукописный шрифт dataTable, кажется, не функционирует, так как он показывает мне нормальную таблицу html.

Здесь - полный код:

<!DOCTYPE html>

<html>
<head>
  <meta name="viewport" content="width=device-width" />
  <title>Zona</title>

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/DataTables-1.10.11/media/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/DataTables-1.10.11/extensions/Responsive/css/responsive.bootstrap.min.css" rel="stylesheet" />

<script src="~/Scripts/jquery-2.2.2.min.js"></script>
<script src="~/Scripts/DataTables-1.10.11/media/js/jquery.dataTables.min.js"></script>
<script src="~/Scripts/DataTables-1.10.11/media/js/dataTables.bootstrap.min.js"></script>
<script src="~/Scripts/DataTables-1.10.11/extensions/Responsive/js/dataTables.responsive.min.js"></script>
<script src="~/Scripts/DataTables-1.10.11/extensions/Responsive/js/responsive.bootstrap.min.js"></script>
</head>
<body>
    <div>
        <table id="grid" class="table table-striped table-bordered dt-responsive nowrap">
            <thead>
                <tr>
                    <th>Numero Zona</th>
                    <th>Nombre Zona</th>
                    <th>Perimetro</th>
                </tr>
            </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>Zona 1</td>
                <td>Perimetro 1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Zona 2</td>
                <td>Perimetro 2</td>
            </tr>
        </tbody>

    </table>
</div>

  <script>
    $(document).ready(function () {
        $('#grid').DataTable();
    });
  </script>    
</body>
</html>
3
задан 31.05.2017, 22:25
3 ответа

Согласно примеру Леандро и коду, что ты показываешь ссылки так в css, как js не те же самые.

Попробуй использовать только jquery.dataTables.css и jquery.dataTables.js, так как, может быть загрузив файл dataTables.bootstrap.min.js, произвелся внутренний конфликт javascript.

1
ответ дан 24.11.2019, 14:39

Осуществите следующее доказательство и функционирует правильно

    $(document).ready(function () {
        $('#grid').DataTable();
    });
<!DOCTYPE html>

<html>
<head>
  <meta name="viewport" content="width=device-width" />
  <title>Zona</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
  
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.css">
  
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.js"></script>
  
</head>
<body>
    <div>
        <table id="grid" class="table table-striped table-bordered dt-responsive nowrap">
            <thead>
                <tr>
                    <th>Numero Zona</th>
                    <th>Nombre Zona</th>
                    <th>Perimetro</th>
                </tr>
            </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>Zona 1</td>
                <td>Perimetro 1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Zona 2</td>
                <td>Perimetro 2</td>
            </tr>
        </tbody>

    </table>
</div>
  
</body>
</html>

, Стоившая с Девелопер Тоольс browser, на который ты соглашаешься с F12, в лацкане Network, если книжные магазины .js решены правильно.

6
ответ дан 24.11.2019, 14:39
  • 1
    Это попробовал эксперт и # 237; с Вашими ссылками и мне продолжает показывать нормальная таблица html – Akiva 01.04.2016, 22:48
  • 2
    ты санкционировал то, что комментирует Девелопер Тоольс? – Leandro Tuttini 01.04.2016, 22:49
  • 3
    S и # 237; я помечаю себя ошибка в этой линии $('#grid').DataTable(); он говорит, что DataTable не funci и # 243; n – Akiva 02.04.2016, 01:32
  • 4
    если он помечает эту проблему в javascript, означай, что .js DataTable не загружен. Или, может быть, код, где ты распределяешь $ (и #39; #grid и # 39;).DataTable (); он работает перед линией, где ты определяешь .js книжных магазинов – Leandro Tuttini 02.04.2016, 03:07
  • 5
    @Leandro у меня есть Сходная проблема с Bootstrap версия 3.3.5, Восток - порядок мой соединение: <link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css" rel="stylesheet" /> <link href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.css" rel="stylesheet" /> <link herf="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" /> – Marco Eufragio 04.12.2018, 17:54

Уже я это решил, нужно помещать ее librerГ - в .js под рукописным шрифтом

$(document).ready(function () {
        $('#grid').DataTable();
    });
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.js"></script>
1
ответ дан 24.11.2019, 14:39

Теги

Похожие вопросы