Question

在尝试中，我做了以下事情： 1.制作了一个搜索框，并且可以对两列进行搜索，并且该搜索框正在运行。 2.应用分页，它也可以工作。

问题是，我的搜索是按每页应用的，但一次没有覆盖整个数据。

我的view（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>

js：

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。然后，使用filterUsers（）函数重复（使用ng-repeat）。

更改为以下内容：

<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);
});

尝试一下。告诉我是否有效。

仅使用一个`searchbox`以及分页即可将搜索应用于多列

1 个答案: