jQuery Bootgrid 渲染问题答案

【问题标题】：jQuery Bootgrid rendering issuesjQuery Bootgrid 渲染问题
【发布时间】：2019-01-16 21:36:29
【问题描述】：

我正在尝试在我的一个项目中使用 Bootgrid，我希望它与 http://www.jquery-bootgrid.com/Examples#data-api 中的示例完全相同：

但是，当我编写自己的实现时，它的呈现方式有所不同，如下所示：

请注意未对齐的搜索图标，以及每个按钮（搜索、刷新、每页项目、列选择器和页面）中没有边框。

这是源 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 引用是否正确？有什么遗漏吗？

【问题讨论】：

不确定库是否已更新为与 Bootstrap 4 一起使用。似乎与 Bootstrap 3.x.x 一起工作正常jsfiddle.net/pvcmbLd2
谢谢！可悲的是，由于我必须使用 Bootstrap 4，所以我不得不在没有那个库的情况下这样做......

标签： jquery html css bootstrap-4 jquery-bootgrid

【解决方案1】：

这不是你的错！这有点太晚了，但也许答案对其他人有用：我已经解决了这个问题。我已经下载了最新的 bootgrid 版本（v1.3.1），并在 jquery.bootgrid.js 中更改了以下代码

search: "<div class=\"{{css.search}}\"><div class=\"input-group\"><div class=\"input-group-prepend\"><span class=\"{{css.icon}} input-group-text {{css.iconSearch}}\"></span></div><input type=\"text\" class=\"{{css.searchField}}\" placeholder=\"{{lbl.search}}\" /></div></div>",

我已经在 jquery.bootgrid.css 中添加了这段代码

ul.pagination li a {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #007bff;
    background-color: #fff;
    border: 1px solid #dee2e6;
}
ul.pagination li.active a {
    z-index: 1;
    color: #fff;
    background-color: #2196f3;
    border-color: #2196f3;
}
.btn-default {
    background-color: #f4f4f4;
    color: #444;
    border-color: #ddd;
}

在我的例子中，现在这个库与 bootstrap 4 配合得很好！

最好的尊重，米。

【讨论】：