0

So I have a data.json I have render in my bootgrid table . The data are displayed correctly but the search and pagination functionality of bootgrid is not working.

here is my my script in rendering in html bootgrid table

<?php include'includes/header.php';?>
<?php include'includes/topnav.php';?>
<div class="card" style="margin-top:5%">
   <div class="card-header">
      <h2 class="text-center">First Semester S.Y 2016-2017<span class="c-orange">(Midterm)</span>
      </h2>
   </div>
   <table id="data-table-command" class="table table-striped table-vmiddle"   >
      <thead>
         <tr>
            <th data-column-id="edp">EDP Code</th>
            <th data-column-id="subject">Subject</th>
            <th data-column-id="time">Time</th>
            <th data-column-id="days">Days</th>
            <th data-column-id="room">Room</th>
            <th data-column-id="dept">Dept</th>
            <th data-column-id="units">Units</th>
            <th data-column-id="size">Size</th>
            <th data-column-id="status">Status</th>
            <th data-column-id="commands" data-formatter="commands" data-sortable="false">Action</th>
         </tr>
      </thead>
      <tbody>
      </tbody>
   </table>
</div>
</div>
</section>
</section>
<!-- Page Loader -->
<div class="page-loader">
   <div class="preloader pls-blue">
      <svg class="pl-circular" viewBox="25 25 50 50">
         <circle class="plc-path" cx="50" cy="50" r="20" />
      </svg>
      <p>Please wait...</p>
   </div>
</div>
<div class="modal fade" id="modalNarrower" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog modal-sm">
      <div class="modal-content">
         <div class="modal-header">




            <h4 class="modal-title">Modal title</h4>
         </div>
         <div class="modal-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sodales
               orci ante, sed ornare eros vestibulum ut. Ut accumsan vitae eros sit
               amet tristique. Nullam scelerisque nunc enim, non dignissim nibh
               faucibus ullamcorper. Fusce pulvinar libero vel ligula iaculis
               ullamcorper. Integer dapibus, mi ac tempor varius, purus nibh mattis
               erat, vitae porta nunc nisi non tellus. Vivamus mollis ante non massa
               egestas fringilla. Vestibulum egestas consectetur nunc at ultricies.
               Morbi quis consectetur nunc.
            </p>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-link">Save changes</button>
            <button type="button" class="btn btn-link" data-dismiss="modal">Close
            </button>
         </div>
      </div>
   </div>
</div>

   <div class="page-loader">
            <div class="preloader pls-blue">
                <svg class="pl-circular" viewBox="25 25 50 50">
                    <circle class="plc-path" cx="50" cy="50" r="20" />
                </svg>

                <p>Please wait...</p>
            </div>
        </div>
<!-- Transfer to footer then -->
<script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>
<script src="vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="vendors/bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="vendors/bower_components/Waves/dist/waves.min.js"></script>
<script src="vendors/bootstrap-growl/bootstrap-growl.min.js"></script>
<script src="vendors/bower_components/sweetalert/dist/sweetalert.min.js"></script>
<script src="vendors/bootgrid/jquery.bootgrid.updated.min.js"></script>

<script src="vendors/bootgrid/jquery.bootgrid.fa.js"></script>
<script src="vendors/bootgrid/jquery.bootgrid.js"></script>
<!-- Data Table -->
<script type="text/javascript">
    $(document).ready(function(){

        //Command Buttons
        // WILL GET THE DATA.JSON FILE AND LOAD THE DETAILS TO DISPLAY INTO THE TABLE
        $("#data-table-command").bootgrid({
            css: {
                icon: 'zmdi icon',
                iconColumns: 'zmdi-view-module',
                iconDown: 'zmdi-sort-amount-desc',
                iconRefresh: 'zmdi-refresh',
                iconUp: 'zmdi-sort-amount-asc'           
            },
            ajax: true,
            ajaxSettings: {
                method: "GET",
                cache: false
            },
            url: "data.json",
            formatters: {
                    "commands": function(column, row) {
                    return "<button type=\"button\" class=\"btn btn-sm bgm-green command-edit waves-effect\" data-row-id=\"" + row.id + "\">View</button> " ;
                }
            }
        });

    });
</script>  

<script src="js/app.min.js"></script>

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

and this is my data.json

{
  "current": 1,
  "rowCount": 10,
  "rows": [
    {
      "edp": "19372",
      "subject": "ITFUND11 - LEC",
      "time": "4:30PM - 5:30 PM",
      "days": "MW",
      "room": "530B",
      "dept": "IT",
      "units": "3.0",
      "size": "48",
      "status": "APPROVED"
    },
    {
      "edp": "20438",
      "subject": "COMPROG21 - LEC",
      "time": "11:30AM - 12:30 PM",
      "days": "MWF",
      "room": "614",
      "dept": "IT",
      "units": "3.0",
      "size": "49",
      "status": "APPROVED"
    },
    {
      "edp": "19372",
      "subject": "ITFUND11 - LEC",
      "time": "4:30PM - 5:30 PM",
      "days": "MW",
      "room": "530B",
      "dept": "IT",
      "units": "3.0",
      "size": "48",
      "status": "APPROVED"
    },
     {
      "edp": "19372",
      "subject": "ITFUND11 - LEC",
      "time": "4:30PM - 5:30 PM",
      "days": "MW",
      "room": "530B",
      "dept": "IT",
      "units": "3.0",
      "size": "48",
      "status": "APPROVED"
    },
     {
      "edp": "19372",
      "subject": "ITFUND11 - LEC",
      "time": "4:30PM - 5:30 PM",
      "days": "MW",
      "room": "530B",
      "dept": "IT",
      "units": "3.0",
      "size": "48",
      "status": "APPROVED"
    },
     {
      "edp": "19372",
      "subject": "ITFUND11 - LEC",
      "time": "4:30PM - 5:30 PM",
      "days": "MW",
      "room": "530B",
      "dept": "IT",
      "units": "3.0",
      "size": "48",
      "status": "APPROVED"
    },
     {
      "edp": "19372",
      "subject": "ITFUND11 - LEC",
      "time": "4:30PM - 5:30 PM",
      "days": "MW",
      "room": "530B",
      "dept": "IT",
      "units": "3.0",
      "size": "48",
      "status": "APPROVED"
    },
     {
      "edp": "19372",
      "subject": "ITFUND11 - LEC",
      "time": "4:30PM - 5:30 PM",
      "days": "MW",
      "room": "530B",
      "dept": "IT",
      "units": "3.0",
      "size": "48",
      "status": "APPROVED"
    },
     {
      "edp": "19372",
      "subject": "ITFUND11 - LEC",
      "time": "4:30PM - 5:30 PM",
      "days": "MW",
      "room": "530B",
      "dept": "IT",
      "units": "3.0",
      "size": "48",
      "status": "APPROVED"
    },
     {
      "edp": "19372",
      "subject": "ITFUND11 - LEC",
      "time": "4:30PM - 5:30 PM",
      "days": "MW",
      "room": "530B",
      "dept": "IT",
      "units": "3.0",
      "size": "48",
      "status": "APPROVED"
    },
     {
      "edp": "19372",
      "subject": "ITFUND11 - LEC",
      "time": "4:30PM - 5:30 PM",
      "days": "MW",
      "room": "530B",
      "dept": "IT",
      "units": "3.0",
      "size": "48",
      "status": "APPROVED"
    },
     {
      "edp": "19372",
      "subject": "ITFUND11 - LEC",
      "time": "4:30PM - 5:30 PM",
      "days": "MW",
      "room": "530B",
      "dept": "IT",
      "units": "3.0",
      "size": "48",
      "status": "APPROVED"
    },
     {
      "edp": "19372",
      "subject": "ITFUND11 - LEC",
      "time": "4:30PM - 5:30 PM",
      "days": "MW",
      "room": "530B",
      "dept": "IT",
      "units": "3.0",
      "size": "48",
      "status": "APPROVED"
    },
     {
      "edp": "19372",
      "subject": "ITFUND11 - LEC",
      "time": "4:30PM - 5:30 PM",
      "days": "MW",
      "room": "530B",
      "dept": "IT",
      "units": "3.0",
      "size": "48",
      "status": "APPROVED"
    },
     {
      "edp": "19372",
      "subject": "ITFUND11 - LEC",
      "time": "4:30PM - 5:30 PM",
      "days": "MW",
      "room": "530B",
      "dept": "IT",
      "units": "3.0",
      "size": "48",
      "status": "APPROVED"
    },
     {
      "edp": "19372",
      "subject": "ITFUND11 - LEC",
      "time": "4:30PM - 5:30 PM",
      "days": "MW",
      "room": "530B",
      "dept": "IT",
      "units": "3.0",
      "size": "48",
      "status": "APPROVED"
    },
     {
      "edp": "19372",
      "subject": "ITFUND11 - LEC",
      "time": "4:30PM - 5:30 PM",
      "days": "MW",
      "room": "530B",
      "dept": "IT",
      "units": "3.0",
      "size": "48",
      "status": "APPROVED"
    },
     {
      "edp": "19372",
      "subject": "ITFUND11 - LEC",
      "time": "4:30PM - 5:30 PM",
      "days": "MW",
      "room": "530B",
      "dept": "IT",
      "units": "3.0",
      "size": "48",
      "status": "APPROVED"
    },
     {
      "edp": "19372",
      "subject": "ITFUND11 - LEC",
      "time": "4:30PM - 5:30 PM",
      "days": "MW",
      "room": "530B",
      "dept": "IT",
      "units": "3.0",
      "size": "48",
      "status": "APPROVED"
    },
     {
      "edp": "19372",
      "subject": "ITFUND11 - LEC",
      "time": "4:30PM - 5:30 PM",
      "days": "MW",
      "room": "530B",
      "dept": "IT",
      "units": "3.0",
      "size": "48",
      "status": "APPROVED"
    },
     {
      "edp": "19372",
      "subject": "ITFUND11 - LEC",
      "time": "4:30PM - 5:30 PM",
      "days": "MW",
      "room": "530B",
      "dept": "IT",
      "units": "3.0",
      "size": "48",
      "status": "APPROVED"
    },
     {
      "edp": "19372",
      "subject": "ITFUND11 - LEC",
      "time": "4:30PM - 5:30 PM",
      "days": "MW",
      "room": "530B",
      "dept": "IT",
      "units": "3.0",
      "size": "48",
      "status": "APPROVED"
    },

     {
      "edp": "19372",
      "subject": "ITFUND11 - LEC",
      "time": "4:30PM - 5:30 PM",
      "days": "MW",
      "room": "530B",
      "dept": "IT",
      "units": "3.0",
      "size": "48",
      "status": "APPROVED"
    },

     {
      "edp": "19372",
      "subject": "ITFUND11 - LEC",
      "time": "4:30PM - 5:30 PM",
      "days": "MW",
      "room": "530B",
      "dept": "IT",
      "units": "3.0",
      "size": "48",
      "status": "APPROVED"
    },

     {
      "edp": "19372",
      "subject": "ITFUND11 - LEC",
      "time": "4:30PM - 5:30 PM",
      "days": "MW",
      "room": "530B",
      "dept": "IT",
      "units": "3.0",
      "size": "48",
      "status": "APPROVED"
    },

     {
      "edp": "19372",
      "subject": "ITFUND11 - LEC",
      "time": "4:30PM - 5:30 PM",
      "days": "MW",
      "room": "530B",
      "dept": "IT",
      "units": "3.0",
      "size": "48",
      "status": "APPROVED"
    },
    {
      "edp": "19372",
      "subject": "ITFUND11 - LEC",
      "time": "4:30PM - 5:30 PM",
      "days": "MW",
      "room": "530B",
      "dept": "IT",
      "units": "3.0",
      "size": "48",
      "status": "APPROVED"
    }
  ]
}
Jolly Ann Dolloso
  • 1
  • 1

1 Answers1

0

I read the documentation, see the examples and checked using the browser's console and here are the things that I found:

  • Apparently you must include first the bootgrid.js and then bootgrid.fa.js, otherwise the browser will complain that bootgrid is not defined
  • You must include in your json the total number of records at the end, the name of the property must be total
  • Pagination and searching must be done in the server side if you load the data from an ajax call, I also used the data.json resource and bootgrid only reloaded over and over again the same json, by looking to the source you will notice that bootgrid will just send a request and re-render the results in the grid. Long story short, you must provide with PHP the search and pagination mechanisms, responding to the client with a json like the one used to display the first page.

Hope this helps

Pablo Flores
  • 1,350
  • 13
  • 15