Bootgrid搜索和分頁不起作用

所以我有一個data.json我已經在我的bootgrid表中呈現。數據顯示正確，但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然後bootg rid.fa.js，否則瀏覽器會抱怨bootgrid沒有定義
你必須在你的json中包括最後的記錄總數，這個屬性的名字必須是總數
分頁和搜索必須是在服務器端完成，如果你從ajax調用加載數據，我也使用data.json資源和bootgrid只重新加載一遍又一遍相同的json，通過查找源代碼，你會注意到bootgrid只會發送一個請求並在網格中重新渲染結果。長話短說，您必須向PHP提供搜索和分頁機制，用像用於顯示第一頁的json那樣的json響應客戶端。

希望這會有幫助

來源

2016-10-11 03:41:27

Bootgrid搜索和分頁不起作用

回答

相關問題