0

したがって、bootgrid table に render した data.json があります。データは正しく表示されますが、bootgrid の検索およびページ付け機能が機能していません。

ここに、HTMLブートグリッドテーブルでレンダリングする私のスクリプトがあります

<?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 リソースとブートグリッドを使用して、同じ json を何度も何度もリロードするだけでした。ソースを見ると、ブートグリッドがリクエストを送信し、結果をグリッドに再レンダリングするだけです。簡単に言うと、最初のページを表示するために使用されるような json でクライアントに応答して、検索とページネーションのメカニズムを PHP で提供する必要があります。

お役に立てれば

于 2016-10-11T03:41:27.480 に答える