Bootgrid поиск и разбиение на страницы не работают

У меня есть data.json У меня есть рендер в моей загрузочной таблице. Данные отображаются правильно, но функциональность поиска и разбиения на страницы bootgrid не работает.Bootgrid поиск и разбиение на страницы не работают

вот мой мой сценарий рендеринга в HTML bootgrid таблице

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

и это мой 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" 
    } 
    ] 
}

источник

2016-10-11 Jolly Ann Dolloso

Я прочитал документацию, смотрите примеры и проверены с помощью консоли браузера и вот что я нашел:

Очевидно, вы должны сначала включить bootgrid.js, а затем загрузить rid.fa.js, в противном случае браузер будет жаловаться на то, что bootgrid не определен
Вы должны указать в своем json общее количество записей в конце, имя объекта должно быть общим
Наведение и поиск должны быть сделанный на стороне сервера, если вы загружаете данные из вызова ajax, я также использовал ресурс data.json, а bootgrid перезагружал снова и снова тот же json, глядя на источник, вы заметите, что bootgrid просто отправит запрос и повторно отобразить результаты в сетке. Короче говоря, вы должны предоставить PHP механизмы поиска и разбиения на страницы, ответив клиенту на json, как тот, который использовался для отображения первой страницы.

Надеюсь, что это поможет

источник

2016-10-11 03:41:27

Bootgrid поиск и разбиение на страницы не работают

ответ

Смежные вопросы