0
所以我有一个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"
}
]
}