文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >引导网格搜索和分页不起作用

问引导网格搜索和分页不起作用
EN

Stack Overflow用户
提问于 2016-10-11 01:54:25
回答 1查看 1.6K关注 0票数 0

因此，我在引导表中有一个data.json。数据显示正确，但引导网格的搜索和分页功能不起作用。

下面是我在html引导表中呈现的脚本

代码语言：javascript
复制
<?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

代码语言：javascript
复制
{
  "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"
    }
  ]
}
jquery-bootgrid
EN

回答 1

Stack Overflow用户

发布于 2016-10-11 03:41:27

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

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

希望这能有所帮助

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/39969353

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档