dirPagination无效

时间：2016-10-03 17:31:44

标签： angularjs codeigniter pagination dirpagination

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>

1 个答案:

答案 0 :(得分：0)

从控制台（404）中的错误消息看，它可能是dirPagination.js文件位置的问题。

在您的脚本代码中，您指向：<script type="text/javascript" src="/scripts/dirPagination.js"></script>

这是猜测 - 前导斜杠导致浏览器查看服务器根目录。我不确定这是不是你想要的。尝试删除该前导斜杠，看看是否修复了它。如果做不到这一点，只需仔细检查网络服务器上dirPagination.js脚本的位置即可。

相关问题
最新问题