0

**How to add pagination using angular js in jquery Datatable plugin. There is some external plugin available like angular js data table that directly allows pagination but i want to make inside jquery data table. **

var app= angular.module("myModule",['ui-bootstrap']);

app.controller("dataController",function($scope,$http){

 $http({
  method: 'GET',
  url: 'https://api.myjson.com/bins/833qv'
}).then(function successCallback(response) {
	$scope.employees=response.data;
	console.log($scope.employees);
    
  });
   
 
});
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Angula js | Home </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  
</head>
<body>
	<div ng-app="myModule">
		
		<input type="text" ng-model="searchFilter" />
  <div ng-controller="dataController">
    <table style="width:500px;border:2px solid black;">
      <thead>
        <tr style="text-align:left;">
          <th>Id</th>
          <th>Client name</th>
          <th>Client code</th>
          <th>Team id</th>
        </tr>
      </thead>
      <tbody>
         <tr ng-repeat="employee in employees">
          <td>{{employee.id}}</td>
          <td>{{employee.client_name}}</td>
          <td>{{employee.client_code}}</td>
          <td>{{employee.team_id}}</td>
        </tr> 

      </tbody>
    </table>
	
  </div>	
	</div>

  

  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
  <script src="custom.js"></script>
</body>
</html>
its not accepting datatable pagination. can it possible that angular js accept datatable jqyery pagination.

2
  • what is in response.data ? Commented Jul 18, 2017 at 12:21
  • you can use dir-pagination to apply pagination Commented Jul 18, 2017 at 12:32

2 Answers 2

1

Pagination:

HTML part

        <ul>
            <li class="paginationclass" style="font-weight:bold;"><span>Name</span><span>Age</span><span>Designation</span></li>            
 <li class="paginationclass" ng-repeat="datalist in datalists | pagination: curPage * pageSize | limitTo: pageSize">
     <div><span>{{ datalist.name }} </span><span>{{ datalist.age }}</span><span>{{ datalist.designation }}</span></div> 
 </li>
</ul> 

    <div class="pagination pagination-centered" ng-show="datalists.length">
<ul class="pagination-controle pagination">
 <li>
  <button type="button" class="btn btn-primary" ng-disabled="curPage == 0"
 ng-click="curPage=curPage-1"> &lt; PREV</button>
 </li>
 <li>
 <span>Page {{curPage + 1}} of {{ numberOfPages() }}</span>
 </li>
 <li>
 <button type="button" class="btn btn-primary"
 ng-disabled="curPage >= datalists.length/pageSize - 1"
 ng-click="curPage = curPage+1">NEXT &gt;</button>
 </li>
</ul>
</div>



    </div>
</div>

JS part

var myapp = angular.module('sampleapp', [ ]);

myapp.controller('samplecontoller', function ($scope) {


 $scope.showData = function( ){

 $scope.curPage = 0;
 $scope.pageSize = 3;
     $scope.datalists = [
         { "name": "John","age":"16","designation":"Software Engineer1"},
    {"name": "John2","age":"21","designation":"Software Engineer2"},
    {"name": "John3","age":"19","designation":"Software Engineer3"},
    {"name": "John4","age":"17","designation":"Software Engineer4"},
    {"name": "John5","age":"21","designation":"Software Engineer5"},
    {"name": "John6","age":"31","designation":"Software Engineer6"},
    {"name": "John7","age":"41","designation":"Software Engineer7"},
    {"name": "John8","age":"16","designation":"Software Engineer8"},
    {"name": "John18","age":"16","designation":"Software Engineer9"},
    {"name": "John28","age":"16","designation":"Software Engineer10"},
    {"name": "John38","age":"16","designation":"Software Engineer11"},
    {"name": "John48","age":"16","designation":"Software Engineer12"},
    {"name": "John58","age":"16","designation":"Software Engineer13"},
    {"name": "John68","age":"16","designation":"Software Engineer14"},
    {"name": "John68","age":"16","designation":"Software Engineer15"}
]
     $scope.numberOfPages = function() {
                return Math.ceil($scope.datalists.length / $scope.pageSize);
            };

}

});

angular.module('sampleapp').filter('pagination', function()
{
 return function(input, start)
 {
  start = +start;
  return input.slice(start);
 };
});
Sign up to request clarification or add additional context in comments.

7 Comments

Thanks for responding, but this code not working in my code.Kindly create a jsfiddle or add running code.
@VISHALSINGH here is the working demo of dir-paginate
@Tajinder-thanks for demo but if you create a simple demo , this demo having dirpagination.js file that is hard to understand for me.
@VISHALSINGH have you found any solution?
@VISHALSINGH what kind of sample do you require? do you need sample of dir-pagination?
|
0

Use this open source library basically enhanced version of JQuery DataTables to rendered tables which include pagination, sorting, searching and filtering and very good support of accessibility. https://assets.cms.gov/resources/framework/2.0/Pages/datatables.html.

1 Comment

Thanks for responding, but this code not working in my code.Kindly create a jsfiddle or add running code

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.