Чтобы применить поиск по нескольким столбцам с одним окном поиска, нумерацией страниц

Question

В своей попытке я сделал следующее: 1. сделал одно окно поиска и смог применить поиск по двум столбцам и он работает. 2. применил нумерацию страниц и это тоже работает.

Проблема в том, что мой поиск был применен для каждой страницы, но не для целых данных за один раз.

мой код для просмотра (html):

<div>
    <input type='text' ng-model='filterValue'  placeholder="Search" />
</div>
<table class="table table-striped table-bordered" style="max-width: 1100px;">
    <thead>
        <tr>
            <th>Mobile number</th>
            <th>Trasanction Id</th>
            <th>Refer Id</th>
            <th>Timestamp</th>
        </tr>
    </thead>
    <tbody ng-repeat="callback in filterUsers()">
            <tr>
                <td>{{callback.mobile_no}}</td>
                <td>{{callback.trans_id}}</td>
                <td>{{callback.refid}}</td>
                <td>{{callback.time_st}}</td>
            </tr>
    </tbody>
</table>
<div>
    <div data-pagination="" data-num-pages="numPages()" data-current-page="currentPage" data-max-size="maxSize" data-boundary-links="true"></div>
</div>

ЯШ:

var callbacks = [
    { mobile_no: '9999988888', trans_id: 'abc123', refid: '676767', time_st: '6:45'},
    { mobile_no: '8888888888', trans_id: 'def123', refid: '787878', time_st: '4:30'},
    { mobile_no: '9999988888', trans_id: 'ghi123', refid: '898989', time_st: '6:45'},
    { mobile_no: '8888888888', trans_id: 'jkl123', refid: '909090', time_st: '4:30'},
    { mobile_no: '9999988888', trans_id: 'mno123', refid: '010101', time_st: '6:45'},
    { mobile_no: '7777777777', trans_id: 'pqr123', refid: '121212', time_st: '4:30'},
    { mobile_no: '4444444444', trans_id: 'stu123', refid: '232323', time_st: '6:45'},
    { mobile_no: '5555555555', trans_id: 'vwx123', refid: '343434', time_st: '4:30'},
    { mobile_no: '1111111111', trans_id: 'abc123', refid: '454545', time_st: '6:45'},
    { mobile_no: '2222222222', trans_id: 'pqr123', refid: '565656', time_st: '4:30'},
    { mobile_no: '3333333333', trans_id: 'abc123', refid: '676767', time_st: '6:45'},
    { mobile_no: '4444444444', trans_id: 'pqr123', refid: '787878', time_st: '4:30'},
    { mobile_no: '5555555555', trans_id: 'abc123', refid: '123456', time_st: '6:45'},
    { mobile_no: '6666666666', trans_id: 'pqr123', refid: '313131', time_st: '4:30'},
    { mobile_no: '9234000000', trans_id: 'abc123', refid: '323232', time_st: '6:45'},
    { mobile_no: '9437000000', trans_id: 'pqr123', refid: '454545', time_st: '4:30'},
    { mobile_no: '7858000000', trans_id: 'abc123', refid: '676767', time_st: '6:45'},
    { mobile_no: '9204000000', trans_id: 'pqr123', refid: '454545', time_st: '4:30'},
    { mobile_no: '7897000000', trans_id: 'abc123', refid: '676767', time_st: '6:45'},
    { mobile_no: '7612000000', trans_id: 'pqr123', refid: '454545', time_st: '4:30'},
    { mobile_no: '9999988888', trans_id: 'abc123', refid: '676767', time_st: '6:45'},
    { mobile_no: '8686000000', trans_id: 'pqr123', refid: '454545', time_st: '4:30'},
    { mobile_no: '8271000000', trans_id: 'abc123', refid: '676767', time_st: '6:45'},
    { mobile_no: '6666666666', trans_id: 'pqr123', refid: '454545', time_st: '4:30'},
    { mobile_no: '9999988888', trans_id: 'abc123', refid: '676767', time_st: '6:45'},
    { mobile_no: '6666666666', trans_id: 'pqr123', refid: '454545', time_st: '4:30'}
];

$scope.filterValue = '';
    $scope.filterUsers = function(){
        return $scope.Callbacks.filter(function(item){ 
           return (item.mobile_no.toString().indexOf($scope.filterValue) > -1 || item.trans_id.toString().indexOf($scope.filterValue) > -1)
        }); 

$scope.currentPage = 1;
    $scope.numPerPage = 10;
    $scope.maxSize = 5;
    $scope.numPages = function () {
        return Math.ceil(callbacks.length / $scope.numPerPage);
    };

$scope.$watch('currentPage + numPerPage', function() {
    var begin = (($scope.currentPage - 1) * $scope.numPerPage);
    var end = begin + $scope.numPerPage;
    $scope.Callbacks = callbacks.slice(begin, end);
});

предложите мне решить мою проблему.

Answer 1

Полагаю, вы хотите применить поиск ... затем разбить на страницы.

То, что вы делаете, это сначала разбейте на страницы, а затем примените поиск. Вот как:

Ваши часы поддерживают $ scope.Callbacks. Затем вы повторяете (используя ng-repeat) функцию filterUsers ().

Изменить на следующее:

<tbody ng-repeat="callback in Callbacks">
  <tr>
    <td>{{callback.mobile_no}}</td>
    <td>{{callback.trans_id}}</td>
    <td>{{callback.refid}}</td>
    <td>{{callback.time_st}}</td>
  </tr>
</tbody>

$scope.filterValue = '';

$scope.filterUsers = function(callbacks){
  return callbacks.filter(function(item){ 
    return (item.mobile_no.toString().indexOf($scope.filterValue) > -1 
    || item.trans_id.toString().indexOf($scope.filterValue) > -1)
  });

$scope.selected_users = $scope.filterUsers(callbacks);

$scope.currentPage = 1;
$scope.numPerPage = 10;
$scope.maxSize = 5;
$scope.numPages = function () {
  return Math.ceil(callbacks.length / $scope.numPerPage);
};

$scope.$watch('currentPage + numPerPage', function() {
  var begin = (($scope.currentPage - 1) * $scope.numPerPage);
  var end = begin + $scope.numPerPage;
  $scope.Callbacks = selected_users.slice(begin, end);
});

Попробуй. Подскажите, работает или нет.