目录分页不起作用答案

【问题标题】：dirPagination not working目录分页不起作用
【发布时间】：2017-02-11 17:30:25
【问题描述】：

enter image description here我正在尝试使用 dirPaginate 实现分页。我已经开始搜索和排序，但我不知道为什么分页不起作用？请指出我该如何纠正这个问题。

这是我的代码：

   <?php
    defined('BASEPATH') OR exit('No direct script access allowed');
    ?><!DOCTYPE html>
    <html ng-app="app">
    <head>
    <meta charset="utf-8">
    <title>Transport View</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<body>


 <div id="banner" style="text-align:center; margin-left:auto; margin- right:auto; display:block;">

    <img src="http://intranet.gfhs.local/stlc_trans/STLC-Tree-Logo-PACE.png">

 </div>

 <br> <form class="form-inline">
    <div class="form-group">
        <label >Search</label>
        <input type="text" ng-model="search" class="form-control"   placeholder="Search">
    </div>
</form>


<div ng-controller="decontroller">
<br><table class="table table-hover table-striped table-bordered">
<thead>
<tr>

<tr><td></td><th style="text-align:center;" colspan="5"><h4>Attendance</h4> </th><td></td><th style="text-align:center;" colspan="7"><h4>PCS Hours</h4></th></tr>    
<tr>

<td ng-click="sort('ParticipantName')"><b>Participant Name</b>
<span class="glyphicon sort-icon" ng-show="sortKey=='ParticipantName'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></td>

<td ng-click="sort('attendance_mo')"><b>Mon</b>
<span class="glyphicon sort-icon" ng-show="sortKey=='attendance_mo'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</td>

<td ng-click="sort('attendance_tu')"><b>Tue</b>
<span class="glyphicon sort-icon" ng-show="sortKey=='attendance_tu'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></td>

<td ng-click="sort('attendance_we')"><b>Wed</b>
<span class="glyphicon sort-icon" ng-show="sortKey=='attendance_we'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></td>

<td ng-click="sort('attendance_th')"><b>Thu</b>
<span class="glyphicon sort-icon" ng-show="sortKey=='attendance_th'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></td>

<td ng-click="sort('attendance_fr')"><b>Fr</b>
<span class="glyphicon sort-icon" ng-show="sortKey=='attendance_fr'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></td>

<td ng-click="sort('Lanyard_Status')"><b>Lanyard Status</b>
<span class="glyphicon sort-icon" ng-show="sortKey=='Lanyard_Status'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></td>


<td ng-click="sort('PCS Monday Hours')"><b>PCS Mon</b>
<span class="glyphicon sort-icon" ng-show="sortKey=='PCS Monday Hours'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></td>

<td ng-click="sort('PCS Tuesday Hours')"><b>PCS Tue</b>
<span class="glyphicon sort-icon" ng-show="sortKey=='PCS Tuesday Hours'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></td>

<td ng-click="sort('PCS Wednesday Hours')"><b>PCS Wed</b>
<span class="glyphicon sort-icon" ng-show="sortKey=='PCS Wednesday Hours'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></td>

<td ng-click="sort('PCS Thursday Hours')"><b>PCS Thu</b>
<span class="glyphicon sort-icon" ng-show="sortKey=='PCS Thursday Hours'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span> </td>

<td ng-click="sort('PCS Friday Hours')"><b>PCS Fr</b>
<span class="glyphicon sort-icon" ng-show="sortKey=='PCS Friday Hours'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></td>

<td ng-click="sort('PCS Saturday Hours')"><b>PCS Sat</b>
<span class="glyphicon sort-icon" ng-show="sortKey=='PCS Saturday Hours'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></td>

<td ng-click="sort('PCS Sunday Hours')"><b>PCS Sun</b>
<span class="glyphicon sort-icon" ng-show="sortKey=='PCS Sunday Hours'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></td>

</tr> 

<tbody>
<tr dir-paginate="n in list_data| orderBy:sortKey:reverse |itemsPerPage:5|  filter:search track by $index">

    <td>{{n.ParticipantName}}</td>
    <td>{{n.attendance_mo==0?"":"x"}}</td>
    <td>{{n.attendance_tu==0?"":"x"}}</td>
    <td>{{n.attendance_we==0?"":"x"}}</td>
    <td>{{n.attendance_th==0?"":"x"}}</td>
    <td>{{n.attendance_fr==0?"":"x"}}</td>
    <td>{{n.Lanyard_Status}}</td>
    <!--<td>{{n.AssistiveDevices}}</td>-->
    <!--<td>{{n.Lanyard}}</td>-->
    <!--<td>{{n.Wheelchair_Van}}</td>-->
    <!--<td>{{n.Transit_Van}}</td>-->
    <!--<td>{{n.VanComments}}</td>-->
    <!--<td>{{n.Pick_Up_Time}}</td>-->
    <!--<td>{{n.Drop_Off_Time}}</td>-->
    <!--<td>{{n.TransportationComments}}</td>-->
    <td>{{n.PCS_Hours_Monday}}</td>
    <td>{{n.PCS_Hours_Tuesday}}</td>
    <td>{{n.PCS_Hours_Wednesday}}</td>
    <td>{{n.PCS_Hours_Thursday}}</td>
    <td>{{n.PCS_Hours_Friday}}</td>
    <td>{{n.PCS_Hours_Saturday}}</td>
    <td>{{n.PCS_Hours_Sunday}}</td>
    <!--<td>{{n.stlcid}}</td>-->
    <!--<td>{{n.physical_address}}</td>-->
    <!--<td>{{n.disenrolled}}</td>-->
    <!--<td>{{n.deceased}}</td>-->
    <!--<td>{{n.comments}}</td>-->
    <!--<td>{{n.Wheelchair_Van_comments}}</td>-->
    <!--<td>{{n.Transit_Van_240_comments}}</td>-->
    <!--<td>{{n.Transit_Van_360}}</td>-->
    <!--<td>{{n.Transit_Van_360_comments}}</td>-->
    <!--<td>{{n.Subaru_Impreza}}</td>-->
    <!--<td>{{n.Subaru_Impreza_comments}}</td>-->
    <!--<td>{{n.address_lat}}</td>-->
    <!--<td>{{n.address_long}}</td>-->
    <!--<td>{{n.phone}}</td>--> 
</tr>
</tbody>

</table>

<dir-pagination-controls
   max-size="5"
   direction-links="true"
   boundary-links="true" >
</dir-pagination-controls>

</div>

<script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"> </script>
<script type="text/javascript" src="/scripts/dirPagination.js"></script>
<script type="text/javascript">
var app = angular.module('app',['angularUtils.directives.dirPagination']);

app.controller('decontroller', function($scope,$http){
    $scope.list_data=[];
    $http.get("<?php echo site_url("index.php/transport/ajax_load_data")?>").success(function(result){
        console.log("GOT DATA: "+JSON.stringify(result));
        $scope.list_data=result;
    });

    $scope.sort = function(keyname){
    $scope.sortKey = keyname;   //set the sortKey to the param passed
    $scope.reverse = !$scope.reverse; //if true make it false and vice versa
}

});


</script>

</body>
[console log errors][1]</html>

【问题讨论】：

嗨。你让我回答这个问题，但你应该从浏览器控制台提供错误，否则很难弄清楚出了什么问题。我假设有一些错误，因为您的屏幕截图显示 angular 没有插入模板值。请使用此信息修改问题。此外，您可能希望删除其中一些 <th> 行，以保持代码的可读性和重点。
感谢您的回复，我已编辑代码并添加了控制台日志错误图像。再次感谢您。
我认为问题在于，当我添加 'angularUtils.directives.dirPagination' 时，从那时起它似乎出错了，

标签： angularjs codeigniter pagination dirpagination

【解决方案1】：

从控制台中的错误消息 (404) 看来，dirPagination.js 文件的位置可能存在问题。

在你的脚本标签中你指向：<script type="text/javascript" src="/scripts/dirPagination.js"></script>

这是一个猜测 - 前导斜杠导致浏览器查看服务器根目录。我不确定这是否是你想要的。尝试删除那个前导斜杠，看看是否可以解决它。如果做不到这一点，只需仔细检查 dirPagination.js 脚本在您的 Web 服务器上的位置。

【讨论】：