所以我有几个问题。一切正常,直到我尝试按某些搜索文本进行过滤。如果写东西,它的过滤效果很好,但是分页中的页面是相同的,所以说我有10页,当我按文本过滤时,我仍然得到10页,例如其中9页是空的。
我需要一种纠正页码的方法。还有消息
<span class="pull-left">Showing {{vm.filteredTickets.length}} tickets of {{vm.totalItems}} found.</span>
是错误的。筛选时,项目总数始终是相同的数字。例如,在开始时,我有20个条目并进行过滤,所以我得到7个条目。它仍然显示20个条目。
有什么解决方法吗?
JSON示例:
{
"TICKET_ID": 35,
"TITLE": "rwqwrwrwr",
"DESCRIPTION": "qwrrqwrwrqw",
"CREATION_DATE": "2018-07-03T10:13:32",
"COMPLETION_DATE": "2018-07-03T15:24:59",
"CREATED_BY": "motu",
"FUTURE_CALL": 0,
"TICKET_PRIORITY_DESCRIPTION": "Low",
"TICKET_CATEGORY_DESCRIPTION": "Customer Support",
"TICKET_TYPE_DESCRIPTION": "Call",
"TICKET_TAG_DESCRIPTION": "Critical",
"TICKET_STATUS_DESCRIPTION": "Solved",
"_xmlns": 0
},
{
"TICKET_ID": 33,
"TITLE": "qwewqewqe",
"DESCRIPTION": "qweqwrqwrqwrrqw",
"CREATION_DATE": "2018-07-03T09:54:27",
"COMPLETION_DATE": 0,
"CREATED_BY": "motu",
"FUTURE_CALL": 0,
"TICKET_PRIORITY_DESCRIPTION": "Normal",
"TICKET_CATEGORY_DESCRIPTION": "Customer Support",
"TICKET_TYPE_DESCRIPTION": "Call",
"TICKET_TAG_DESCRIPTION": "Bugs",
"TICKET_STATUS_DESCRIPTION": "New",
"_xmlns": 0,
"$$hashKey": "object:29"
},
{
"TICKET_ID": 58,
"TITLE": "Funny Title",
"DESCRIPTION": "rqwrqwrwqrqwt",
"CREATION_DATE": "2018-07-03T15:50:44",
"COMPLETION_DATE": 0,
"CREATED_BY": "motu",
"FUTURE_CALL": 0,
"TICKET_PRIORITY_DESCRIPTION": "Low",
"TICKET_CATEGORY_DESCRIPTION": "Customer Support",
"TICKET_TYPE_DESCRIPTION": "Call",
"TICKET_TAG_DESCRIPTION": "Bugs",
"TICKET_STATUS_DESCRIPTION": "New",
"_xmlns": 0,
"$$hashKey": "object:30"
}
]
vm.tickets = // that json
//table pagination
vm.totalItems = vm.tickets.length;
vm.currentPage = 1;
vm.itemsPerPage = "5"; // default value
// table ordering
vm.propertyName = 'TICKET_STATUS_DESCRIPTION';
vm.reverse = false;
vm.sortBy = function(propertyName) {
vm.reverse = !vm.reverse;
vm.propertyName = propertyName;
};
vm.filteredTickets = vm.tickets.length;
}.bind(this));
<div ng-if="vm.tickets.length > 0">
<h4><i class="glyphicon glyphicon-inbox"></i> Available Tickets</h4>
<div class="row">
<div class="col-xs-4 pull-left">
<label>Items per page</label>
<select class="form-control input-sm w25" ng-model="vm.itemsPerPage">
<option value="5">5</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
</select>
</div>
<div class="col-xs-8">
<input class="form-control w25 pull-right" ng-change="vm.searchChanged()" type="text" ng-model="vm.search" placeholder="Search..." />
</div>
</div>
<div class="row top5">
<div class="col-xs-12">
<div class="table-responsive">
<table class="table table-hover table-bordered table-striped" style="width: 100%">
<thead>
<tr>
<th class="text-center">Ticket ID <a uib-tooltip="Sort by" ng-click="vm.sortBy('TICKET_ID');"><i class="glyphicon glyphicon-sort pull-right"></i></a></th>
<th class="text-center">Title <a uib-tooltip="Sort by" ng-click="vm.sortBy('TITLE');"><i class="glyphicon glyphicon-sort pull-right"></i></a></th>
<th class="text-center">Status <a uib-tooltip="Sort by" ng-click="vm.sortBy('TICKET_STATUS_DESCRIPTION');"><i class="glyphicon glyphicon-sort pull-right"></i></a></th>
<th class="text-center">Priority <a uib-tooltip="Sort by" ng-click="vm.sortBy('TICKET_PRIORITY_DESCRIPTION');"><i class="glyphicon glyphicon-sort pull-right"></i></a></th>
<th class="text-center">Contacted by <a uib-tooltip="Sort by" ng-click="vm.sortBy('TICKET_TYPE_DESCRIPTION');"><i class="glyphicon glyphicon-sort pull-right"></i></a></th>
<th class="text-center">Created By <a uib-tooltip="Sort by" ng-click="vm.sortBy('CREATED_BY');"><i class="glyphicon glyphicon-sort pull-right"></i></a></th>
<th class="text-center">Creation Date <a uib-tooltip="Sort by" ng-click="vm.sortBy('CREATION_DATE');"><i class="glyphicon glyphicon-sort pull-right"></i></a></th>
<th class="text-center">Completion Date <a uib-tooltip="Sort by" ng-click="vm.sortBy('COMPLETION_DATE');"><i class="glyphicon glyphicon-sort pull-right"></i></a></th>
<th class="text-center">Account ID <a uib-tooltip="Sort by" ng-click="vm.sortBy('ACCOUNT_ID');"><i class="glyphicon glyphicon-sort pull-right"></i></a></th>
<th class="text-center">Category <a uib-tooltip="Sort by" ng-click="vm.sortBy('TICKET_CATEGORY_DESCRIPTION');"><i class="glyphicon glyphicon-sort pull-right"></i></a></th>
<th class="text-center">Related to <a uib-tooltip="Sort by" ng-click="vm.sortBy('TICKET_TAG_DESCRIPTION');"><i class="glyphicon glyphicon-sort pull-right"></i></a></th>
<th class="text-center">Call back <a uib-tooltip="Sort by" ng-click="vm.sortBy('FUTURE_CALL');"><i class="glyphicon glyphicon-sort pull-right"></i></a></th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<tr class="text-center" ng-repeat="ticket in vm.filteredTickets = (vm.tickets | orderBy : vm.propertyName : vm.reverse | filter : vm.search | limitTo:vm.itemsPerPage:vm.itemsPerPage*(vm.currentPage-1))">
<td>{{ticket.TICKET_ID}}</td>
<td>{{ticket.TITLE}}</td>
<td>
<span ng-if="ticket.TICKET_STATUS_DESCRIPTION == 'Solved'" class="label label-success">{{ticket.TICKET_STATUS_DESCRIPTION}}</span>
<span ng-if="ticket.TICKET_STATUS_DESCRIPTION == 'Closed' || ticket.TICKET_STATUS_DESCRIPTION == 'Rejected'" class="label label-danger">{{ticket.TICKET_STATUS_DESCRIPTION}}</span>
<span ng-if="ticket.TICKET_STATUS_DESCRIPTION == 'Under Review'" class="label label-warning">{{ticket.TICKET_STATUS_DESCRIPTION}}</span>
<span ng-if="ticket.TICKET_STATUS_DESCRIPTION == 'New'" class="label label-primary">{{ticket.TICKET_STATUS_DESCRIPTION}}</span>
</td>
<td class="color-{{ticket.TICKET_PRIORITY_DESCRIPTION}}"><b>{{ticket.TICKET_PRIORITY_DESCRIPTION}}</b></td>
<td>{{ticket.TICKET_TYPE_DESCRIPTION}}</td>
<td>{{ticket.CREATED_BY}}</td>
<td>{{ticket.CREATION_DATE | date:'yyyy-MM-dd HH:mm:ss'}}</td>
<td>{{ticket.COMPLETION_DATE | date:'yyyy-MM-dd HH:mm:ss'}}</td>
<td>{{ticket.ACCOUNT_ID}}</td>
<td>{{ticket.TICKET_CATEGORY_DESCRIPTION}}</td>
<td>{{ticket.TICKET_TAG_DESCRIPTION}}</td>
<td>
<input ng-if="ticket.FUTURE_CALL == 1" disabled type="checkbox" checked/>
<input ng-if="ticket.FUTURE_CALL == 0" disabled type="checkbox" />
</td>
<td>
<button ng-click="vm.selectTicket(ticket)" class="btn btn-default" ng-if="ticket.TICKET_STATUS_DESCRIPTION !== 'Solved' && ticket.TICKET_STATUS_DESCRIPTION !== 'Closed' && ticket.TICKET_STATUS_DESCRIPTION !== 'Rejected' && ticket.TICKET_STATUS_DESCRIPTION !== 'Under Review'">
Review <i class="glyphicon glyphicon-eye-open"></i></button>
<button ng-click="vm.selectTicket(ticket)" class="btn btn-default" ng-if="ticket.TICKET_STATUS_DESCRIPTION == 'Under Review'" disabled>
Under Review <i class="glyphicon glyphicon-search"></i></button>
<button class="btn btn-default" ng-if="ticket.TICKET_STATUS_DESCRIPTION == 'Solved' || ticket.TICKET_STATUS_DESCRIPTION == 'Closed' || ticket.TICKET_STATUS_DESCRIPTION == 'Rejected'" disabled>Completed <i class="glyphicon glyphicon-ok"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="text-center" ng-show="!vm.filteredTickets.length"><b class="color-red">No Tickets found with this filter.</b></div>
<button ipp-command="complete" id="completeActivity" style="display:none;"></button>
<span class="pull-left">Showing {{vm.filteredTickets.length}} tickets of {{vm.totalItems}} found.</span>
<ul class="pull-right" max-size="noOfPages" uib-pagination total-items="vm.totalItems" ng-model="vm.currentPage" items-per-page="vm.itemsPerPage"></ul>
</div>
</div>
</div>