CODEWITHSUNDEEP
angularjspagination
Anky
Anky

Reputation: 270

how to replace pagination previous and next buttons with images in angular?

here is my html code for pagination , i am not getting how would i replace the next and previous buttons with the images , it is not even showing next and previous buttons in the html code itself , i have used the pagination tag to create a pagination , it is working fine but i need to replace the previous and next text with the images ,kindly help.

 <pagination page="currentPage" max-size="noOfPages" total-items="totalItems" items-per-page="entryLimit">

                            </pagination>

my pagination control js

// pagination controls

$scope.currentPage = 1;
        $scope.totalLeadItems = $scope.finalLeadData.dataval;
        $scope.totalItems = $scope.finalLeadData.dataval.length;
        $scope.entryLimit = 2; // items per page
        $scope.noOfPages = Math.ceil($scope.totalItems / $scope.entryLimit);

        // $watch search to update pagination
        $scope.$watch('search', function (newVal, oldVal) {
          $scope.filtered = $filter($scope.finalLeadData.dataval, newVal);
          $scope.totalItems = $scope.filtered.length;
          $scope.noOfPages = Math.ceil($scope.totalItems / $scope.entryLimit);
          $scope.currentPage = 1;
        }, true);
      });

i am providing a plunker link for it : 

 http://plnkr.co/edit/NZulJq4v8Hcl6O3AL4hw?p=preview

Upvotes: 3

Views: 7506

Answers (1)

Jony-Y
Jony-Y

Reputation: 1579

Anky, I made a small fix to your plunker. I just added an image from the web, just change to whatever you want ok?

here is the updated plunker

as you can see I located the css in <style> tags, you just put it in your css

the css:

.pagination-test>li:first-child>a, .pagination-test>li:last-child>a{
    background: url(http://www.myiconfinder.com/uploads/iconsets/7e81c2f3697b91ee17fe6ed6348c232a-Arrow.png);
  background-size: 100% 100%;
  height: 34px;
  width: 34px;
}

and the html:

        <pagination page="currentPage" max-size="noOfPages" total-items="totalItems" items-per-page="entryLimit" class="pagination-test"previous-text="" next-text=""></pagination>

hope this is what you wanted

Upvotes: 2

Related Questions