Bootsrap 4 and bootgrid

[giulianimax]

I'm using bootstrap 4 and bootgrid and, more or less, all seems be good except the button for the pagination that is showed as: «<12>» without button style formatting (but if I click on it works) I've tried moving the css ans js without any result. At the moment the including files are in this sequence:

<link href="../css/bootstrap-4.0.css" rel="stylesheet">                                         <!-- Bootstrap 4 core CSS -->
<link href="../css/dashboard.css" rel="stylesheet">                                             <!-- Custom styles for this template -->
<link href="../css/bootstrap-glyphicons.css" rel="stylesheet">                                  <!-- Glyphicons -->
<link href="../css/bootstrap-select.css" rel="stylesheet">                                      <!-- Bootstrap Select v1.5.0 -->

<link href="../css/google-fonts.css" rel="stylesheet">                                          <!-- Google fonts -->
<link href="../fonts/iconfont/material-icons.css" rel="stylesheet">                             <!-- Google material-icons -->
<link href="../css/jquery.bootgrid.min.css" rel="stylesheet" />                                 <!-- Bootgrid 1.3.1-->

 <script src="../js/jquery-3.3.1.js"></script>                                                   <!-- Jquery 3.3.1  -->
 <script src="../js/jquery.bootgrid.js"></script>                                                <!-- Bootgrid 1.3.1 -->
 <script src="../js/popper.min.js"></script>                                                     <!-- Popper core -->
 <script src="../js/bootstrap.min-4.0.js"></script>                                              <!-- Bootstarp 4  -->
 <script src="../js/dropdown.js"></script>                                                       <!-- Bootstarp 4 DropDown  -->
 <script src="../js/bootstrap-select.js"></script>                                               <!-- Bootstarp 4  Select v1.5.0 -->


<script src="../fonts/feather-icons/feather.js"></script>                                        <!-- Icons -->

[firstep]

hi, you have to overwrite the style of 'paginationButton' and the template of 'paginationItem' ...e.g.

;(function ($, window, undefined)
{
    "use strict";

    $.extend($.fn.bootgrid.Constructor.defaults.css, {
        iconRefresh: "refresh-cw",
        iconColumns: "list",
        iconSearch: "search",
        iconDown: "chevron-down",
        iconUp: "chevron-up",
        dropDownMenuItems: "dropdown-menu dropdown-menu-right",
        paginationButton: "page-link",
    });

    $.extend($.fn.bootgrid.Constructor.defaults.templates, {
        icon: "<span data-feather=\"{{ctx.iconCss}}\"></span>",
        paginationItem: "<li class=\"paginate_button page-item {{ctx.css}}\"><a data-page=\"{{ctx.page}}\" class=\"{{css.paginationButton}}\">{{ctx.text}}</a></li>"
    });
})(jQuery, window);

[wesselvannierop]

Can somebody provide an easy solution for bootgrid to work properly with bootstrap 4?

[jaimestuardo]

No answer yet? I am facing the same problem. I am using bootstrap 4, so I cannot use this grid.

[giulianimax]

I tried to use different way, the following is the last, without any result (inside a php file):

function ajaxAction(action) { data = $("#frm_"+action).serializeArray(); $.ajax({ type: "POST", url: "user-mysql.php", data: data, dataType: "json", success: function() { if (action=="add") { alert("User successuflly added !!");
} else if (action=="edit") {
alert("User successuflly updated !!");
} $('#'+action+'_model').modal('hide'); $("#user_grid").bootgrid('reload'); }, error : function(request, status, error) { var val = request.responseText; alert("error"+val); } }); $("#user_grid").bootgrid( { css: { pagination: "pagination", paginationButton: "btn-info btn-sm", iconDown: "chevron-down", iconUp: "chevron-up", }, templates: { pagination: '

', icon: '', paginationItem: '

{{ctx.text}}

' } }); }

[MenaceSan]

Its quick and dirty fix. but this is what works for me:

function Bootgrid_Temp() {
    // Fix for BS4, https://github.com/rstaib/jquery-bootgrid/issues/403
    return {
        // pagination: '{{ctx.text}}'
        // paginationButton: "btn-info btn-sm",
        paginationItem: "<li class=\"page-item {{ctx.css}}\"><a data-page=\"{{ctx.page}}\" class=\"page-link btn-info btn-sm {{css.paginationButton}}\">{{ctx.text}}</a></li>"
    };
}

Then just use: templates: Bootgrid_Temp() when you create a bootgrid.

I also had problems with the Search Icon and outlines around the control buttons. I did :

@* fix broken styles for BS4 *@
<style>
    .bootgrid-header .search span {
        border-collapse: separate;
        border: 1px solid #ccc;
        border-radius: 4px;
        display: table-cell;
        border-right: 0;
        background-color: #eee;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        padding: 6px 12px;
        text-align: center;
        font-size: 18px;
    }
</style>

But I'm sure there is a better way.

[kahanu]

For the pagination issue, I just added the following CSS to my site CSS file:

ul.pagination > li:first-child > a, 
ul.pagination > li:first-child > span {
    margin-left: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}

ul.pagination > li > a {
    position: relative;
    float: left;
    padding: 6px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    border: 1px solid #a3e844;
}

ul.pagination > li:last-child > a, 
ul.pagination > li:last-child > span {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    z-index: 2;
    color: #fff;
    background-color: #709f2f;
    border-color: #a3e844;
    cursor: default;
}

.pagination > li > a:hover, 
.pagination > li > span:hover, 
.pagination > li > a:focus, 
.pagination > li > span:focus {
    color: #2a6496;
    background-color: #a6da60;
    border-color: #ddd;
}

Just change the colors to match your site theme.

[ahunter52]

I think the easiest solution is to modify the javascript file for FontAwsome, jquery.bootgrid.fa.js and include it in your page after the normal bootgrid js include. My version of the modified fa.js looks like this.

jquery.bootgrid.fa.js.txt