分页表+排序+显示消息+搜索(完整示例)

时间:2018-07-05 16:12:34

标签: javascript html angularjs

所以我有几个问题。一切正常,直到我尝试按某些搜索文本进行过滤。如果写东西,它的过滤效果很好,但是分页中的页面是相同的,所以说我有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&nbsp;<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&nbsp;<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&nbsp;<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&nbsp;<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&nbsp;<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&nbsp;<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&nbsp;<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&nbsp;<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&nbsp;<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&nbsp;<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&nbsp;<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&nbsp;<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>

0 个答案:

没有答案