jquery - Angular DataTable - Custom Pagination & Info

Question

I am new to Angular JS. I am trying to implement datatables. I am referring the link below.

http://l-lin.github.io/angular-datatables/

Now i need to implement some custom changes to the datatable configurations.

Eg.

1. Pagination options i need to be in the format provided in the below image.

2. Pagination Info needs to be like below.

Looking forward to responses.

Please help if anyone has faced issues similar to this.

~~Suriya

Answer 1

I have fixed the page info problem. Please see the code below.

vm.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full')
                     .withDisplayLength(10)
                     .withOption('bFilter', false)
                     .withDOM('<"top pull-left itemtableInfo"i>rt<"bottom"p>')
                     .withLanguage({
                          "sInfo": '<div><span class="searchDetail">Displaying _TOTAL_ results for <b>"'+$rootScope.searchValue+'"</b> </span><span class="searchCount pull-right">Showing _START_ to _END_ <a>Show All</a></span>',
                           "processing": "Processing...",
                           "loadingRecords": "Loading...",
                           "paginate": {
                                "first": '<i class="fa fa-backward" aria-hidden="true"></i>',
                                "last": '<i class="fa fa-forward" aria-hidden="true"></i>',
                                "next": "Next",
                                "previous": "Previous"
                            }
                     });

But still couldn't resolve the pagination button customization. I am closing this question as i have posted another question for page control issue. .

Link :

Angular datatable - get current page & Total page

If anyone have better solution for both the issues, please provide me with your suggestions :):)