html - How to filter and Search a table with ngFilter? -
i have seen many examples , tutorials table search , tried work. issue search table results seen in current page. mean is, have used pagination , search filer works in page visible user. doesn't results in other paginated pages.
i have implemented simple search, explained in every example. why approach behave this? appreciated.
here's table.html
<div class="row"> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <div class="input-group input-icon"> <input id="empid" ng-model="search.empid" type="text" class="form-control" name="empid" placeholder="search id"> <span class="input-group-addon"> <i class="fa fa-search s14"></i> </span> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <div class="input-group input-icon"> <input id="ename" ng-model="search.fname" type="text" class="form-control" name="ename" placeholder="search name"> <span class="input-group-addon"> <i class="fa fa-search s14"></i> </span> </div> </div> </div> <div class="row"> <div class="col-md-6 col-xs-12"> view <label> <span> <select class="form-control input-sm" ng-model="viewby" ng-options="x x in nums" ng-change="setemployeesperpage(viewby)"></select> </span> </label> records @ time. </div> <table id="basic-datatables" class="table table-bordered table-hover" cellspacing="0" width="100"> <thead style="text-align:match-parent"> <tr> <th rowspan="1" colspan="1" style="width:100px"> <a href="javascript:void(0)" class="table-links" ng-click="sorttype='empid'; sortreverse=!sortreverse"> <span ng-show="sorttype != 'empid'" class="fa fa-unsorted"></span> <span ng-show="sorttype == 'empid' && !sortreverse" class="fa fa-sort-asc"></span> <span ng-show="sorttype == 'empid' && sortreverse" class="fa fa-sort-desc"></span> id</a> </th> <th rowspan="1" colspan="1" style="width:200px"> <a href="javascript:void(0)" class="table-links" ng-click="sorttype='fname'; sortreverse=!sortreverse"> <span ng-show="sorttype != 'fname'" class="fa fa-unsorted"></span> <span ng-show="sorttype == 'fname' && !sortreverse" class="fa fa-sort-asc"></span> <span ng-show="sorttype == 'fname' && sortreverse" class="fa fa-sort-desc"></span> first name</a> </th> <th rowspan="1" colspan="1" style="width:200px"> <a href="javascript:void(0)" class="table-links" ng-click="sorttype='lname'; sortreverse=!sortreverse"> <span ng-show="sorttype != 'lname'" class="fa fa-unsorted"></span> <span ng-show="sorttype == 'lname'&& !sortreverse" class="fa fa-sort-asc"></span> <span ng-show="sorttype == 'lname'&& sortreverse" class="fa fa-sort-desc"></span> last name</a> </th> <th rowspan="1" colspan="1" style="width:200px">email</th> <th rowspan="1" colspan="1" style="width:100px">mobile</th> <th rowspan="1" colspan="1" style="width:200px">designation</th> <th rowspan="1" colspan="1" style="width:200px">dept. name</th> </tr> </thead> <tbody> <tr ng-click="selectrow(emp)" ng-repeat="emp in employeedetails.slice(((currentpage-1)*itemsperpage),((currentpage)*itemsperpage)) | filter:search | orderby:sorttype:sortreverse" style="text-align:match-parent"> <td>{{emp.empid}}</td> <td>{{emp.fname}}</td> <td>{{emp.lname}}</td> <td>{{emp.email}}</td> <td>{{emp.mobile_no}}</td> <td>{{emp.designation}}</td> <td>{{emp.department_name}}</td> </tr> </tbody> </table> <div class="row"> <div class="col-md-8 col-xs-12"> <uib-pagination total-items="totalemployees" ng-model="currentpage" ng-change="pagechanged()" max-size="maxsize" boundary-links="true" class="pagination" items-per-page="itemsperpage"></uib-pagination> </div> </div>
here's controller.js
this how json.
(function initcontroller() { employeeservice.getempdetails(function (res) { $scope.employeedetails = json.parse(res.data); }); })();
how can implement it. thanks
ng-repeat="emp in employeedetails | filter:search | limitto: itemsperpage : (currentpage-1)*itemsperpage | orderby:sorttype:sortreverse"
try this.. first filter limit.
Comments
Post a Comment