0

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. Pagination Format

  2. Pagination Info needs to be like below.

enter image description here

Looking forward to responses.

Please help if anyone has faced issues similar to this.

~~Suriya

Suriya Rakhunathan
  • 139
  • 3
  • 19
  • Please show how exactly you want to change the pagination layout and what you mean by the pagination info. It is not a big deal to change, but really hard to guess for example which icons you are referring to and how "Vanilla..." is supposed to be part of the info. – davidkonrad Aug 24 '16 at 12:34
  • @davidkonrad, "Vanilla.." is the input i get from user before fetching table. – Suriya Rakhunathan Aug 24 '16 at 13:29

2 Answers2

0

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 :):)

Community
  • 1
  • 1
Suriya Rakhunathan
  • 139
  • 3
  • 19
-1

If you need pagination in AngularJS check this,

http://ui-grid.info/docs/#/tutorial/214_pagination

Pranesh Udumalpet Hanumanth
  • 308
  • 1
  • 6
  • OP does not need pagination, there is a lot of built in pagination styles in dataTables, he want to change the default pagination to something else. – davidkonrad Aug 24 '16 at 12:35