1. Zuhause
  2. Frage und Antwort
  3. Bootgrid Suche und Paginierung funktioniert nicht

Bootgrid Suche und Paginierung funktioniert nicht

2016-10-11 2 views
0

So habe ich eine data.json ich habe in meiner Bootgrid-Tabelle rendern. Die Daten werden korrekt angezeigt, aber die Such- und Paginierungsfunktion von Bootgrid funktioniert nicht.Bootgrid Suche und Paginierung funktioniert nicht

hier ist mein mein Skript in Rendering in html bootgrid Tabelle

<?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>

und das ist mein 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" 
    } 
    ] 
}

Quelle

2016-10-11 Jolly Ann Dolloso

Antwort

0

ich die Dokumentation zu lesen, die Beispiele sehen und überprüft der Browser-Konsole und hier sind die Dinge, die ich gefunden habe:

  • Offenbar müssen Sie zuerst die bootgrid.js und dann bootg enthalten rid.fa.js, sonst wird der Browser sich beschweren, dass bootgrid nicht definiert ist
  • Sie müssen in Ihrem json die Gesamtzahl der Datensätze am Ende enthalten, der Name der Eigenschaft muss insgesamt
  • Paginierung und Suche muss sein Auf der Serverseite getan, wenn Sie die Daten von einem Ajax-Aufruf laden, habe ich auch die data.json Ressource und Bootgrid nur immer wieder JSON wieder geladen, durch die Suche auf die Quelle Sie werden feststellen, dass Bootgrid nur eine Anfrage senden wird und Rendern der Ergebnisse im Raster. Lange Rede, kurzer Sinn: Sie müssen PHP mit Such- und Paginierungsmechanismen ausstatten, die auf den Client mit einem JSON reagieren, wie er für die Anzeige der ersten Seite verwendet wird.

Hoffe das hilft

Quelle

2016-10-11 03:41:27

Verwandte Themen

 Verwandte Themen