0

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

1 回答 1

0

我阅读了文档，查看了示例并使用浏览器的控制台进行了检查，以下是我发现的内容：

  • 显然你必须首先包含 bootgrid.js 然后 bootgrid.fa.js，否则浏览器会抱怨 bootgrid 没有定义
  • 你必须在你的json中包含最后的记录总数，属性的名称必须是total
  • 如果您从 ajax 调用加载数据，则必须在服务器端进行分页和搜索，我还使用了 data.json 资源，并且 bootgrid 只是一遍又一遍地重新加载相同的 json，通过查看源代码，您会注意到 bootgrid只会发送一个请求并在网格中重新呈现结果。长话短说，您必须为 PHP 提供搜索和分页机制，使用类似于用于显示第一页的 json 响应客户端。

希望这可以帮助

于 2016-10-11T03:41:27.480 回答