Проблемы с рендерингом jQuery Bootgrid - PullRequest
Новая
       8

Проблемы с рендерингом jQuery Bootgrid

0 голосов
/ 17 января 2019

Я пытаюсь использовать Bootgrid в моем проекте, и я хочу, чтобы он отображался в точности как пример в http://www.jquery -bootgrid.com / examples # data-api :

Bootgrid Example

Однако, когда я написал свою собственную реализацию, она отображалась по-другому, как показано ниже:

enter image description here

Обратите внимание на смещенный значок поиска и отсутствие границ в каждой кнопке (поиск, обновление, элементы на странице, селектор столбцов и страницы).

Это исходный HTML: 

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <title>Test</title>

    <meta http-equiv="content-type"
          content="text/html;charset=UTF-8" />

    <meta http-equiv="X-UA-Compatible"
          content="ie=edge">

    <meta name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"
            integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP"
            crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.js"
            integrity="sha256-S952WuaxC9XbI06xeWuSuSuvTewXEQQOU2OYBe7kdIs="
            crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.fa.min.js" 
            integrity="sha256-u/DZtNLWZSvkNdIL4PTQzEJUAFLzM758asxZnhd+5R4=" 
            crossorigin="anonymous"></script>

    <link rel="stylesheet"
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
          integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
          crossorigin="anonymous">

    <link rel="stylesheet" 
          href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" 
          integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" 
          crossorigin="anonymous">

    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.css"
          integrity="sha256-i397iDijTcJqMf2j733J1b+WKakC2U8Y3k2eMScEugA="
          crossorigin="anonymous" />

</head>
<body>
    <div class="responsiveTable m-5">
        <table id="grid-tarefas"
               class="table table-condensed table-hover table-striped bootgrid-table"
               data-toggle="bootgrid"
               data-ajax="true"
               data-url="grid.php">
            <thead>
                <tr>
                    <th data-column-id="id" data-type="numeric" data-identifier="true">ID</th>
                    <th data-column-id="sender">Sender</th>
                    <th data-column-id="received" data-order="desc">Received</th>
                </tr>
            </thead>
        </table>
    </div>
    <script>
        $(
            function (evt) {
                $("#grid-tarefas").bootgrid("reload");
            }
        );
    </script>
</body>
</html>

Оба были отображены в одном браузере (Firefox 64.0.2, 64-битная, Windows 10).

Я хотел бы знать, что я делаю здесь не так ... Верны ли мои ссылки на JS и CSS? Чего-то не хватает?

...