jQuery Bootgrid rendering issues

Question

I'm trying to use Bootgrid in a project of mine, and I want it to appear exactly as the example in http://www.jquery-bootgrid.com/Examples#data-api :

However, when I wrote my own implementation, it rendered differently, as shown below:

Please notice the misaligned search icon, and the absence of borders in every button (search, refresh, items per page, column selector and pages).

This is the source 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>

Both were rendered in the same browser (Firefox 64.0.2 64-bit, Windows 10).

I would like to know what I'm doing wrong here... Are my JS and CSS references correct? Is there something missing?

Not sure if the library has been updated to work with Bootstrap 4. Seems to work fine with Bootstrap 3.x.x https://jsfiddle.net/pvcmbLd2/ — Dawood Awan, Jul 25 '19 at 14:57
Thank you! Sadly, since I had to use Bootstrap 4, I had to do it without that library... — VBobCat, Jul 26 '19 at 10:51

matty · Answer 1 · 2022-03-30T07:07:24.820

it's not your fault! It's a little too late but maybe the answer can be useful for other people: I have fixed the issue. I have download the last bootgrid version (v1.3.1) and I have changed the following code in 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>",

and I have add in jquery.bootgrid.css this code

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;
}

in my case now the library work very well with bootstrap 4!

Best regard, m.

jQuery Bootgrid rendering issues

1 Answers1