change text on angular datatable pagination buttons

Question

My app is using angular datatables. Pagination consists of

[First] [Previous] [1] [Next] [Last]

I'd like to change this to shorter strings, such as

|< < 1 > >|

I'm sure this is possible, but I cannot find any reference to it in the docs.

This, among other places, is where I've been looking:

http://l-lin.github.io/angular-datatables/#/changeOptions https://datatables.net/examples/basic_init/alt_pagination.html

Here is a snippet of the HTML and controller:

<table class="table table-sortable table-hover table-checkable order-column"
    id="package-table"
    datatable="ng"   
    dt-options="manifestVm.dtPackageOptions"
    dt-column-defs="manifestVm.dtPackageColumnDefs">



vm.dtPackageOptions = DTOptionsBuilder.newOptions()
    .withPaginationType('full_numbers')
    .withDisplayLength(10)
    .withBootstrap();

vm.dtPackageColumnDefs = [
    DTColumnDefBuilder.newColumnDef(0),
    DTColumnDefBuilder.newColumnDef(1),
    DTColumnDefBuilder.newColumnDef(2)
];

score 4 · Answer 1 · edited May 23 '17 at 11:54

I think you can edit the language settings.

The default language object looks like:

{
"decimal":        "",
"emptyTable":     "No data available in table",
"info":           "Showing _START_ to _END_ of _TOTAL_ entries",
"infoEmpty":      "Showing 0 to 0 of 0 entries",
"infoFiltered":   "(filtered from _MAX_ total entries)",
"infoPostFix":    "",
"thousands":      ",",
"lengthMenu":     "Show _MENU_ entries",
"loadingRecords": "Loading...",
"processing":     "Processing...",
"search":         "Search:",
"zeroRecords":    "No matching records found",
"paginate": {
    "first":      "First",
    "last":       "Last",
    "next":       "Next",
    "previous":   "Previous"
},
"aria": {
    "sortAscending":  ": activate to sort column ascending",
    "sortDescending": ": activate to sort column descending"
}
}

So to add the styling you want, change it to:

    {
"decimal":        "",
"emptyTable":     "No data available in table",
"info":           "Showing _START_ to _END_ of _TOTAL_ entries",
"infoEmpty":      "Showing 0 to 0 of 0 entries",
"infoFiltered":   "(filtered from _MAX_ total entries)",
"infoPostFix":    "",
"thousands":      ",",
"lengthMenu":     "Show _MENU_ entries",
"loadingRecords": "Loading...",
"processing":     "Processing...",
"search":         "Search:",
"zeroRecords":    "No matching records found",
"paginate": {
    "first":      "<<",
    "last":       ">>",
    "next":       ">",
    "previous":   "<"
},
"aria": {
    "sortAscending":  ": activate to sort column ascending",
    "sortDescending": ": activate to sort column descending"
    }
}

You are concerned with: language.paginate.first, language.paginate.last, language.paginate.next and language.paginate.previous.

Here is an example of how to change 'first' when creating the datatable.

$('#example').dataTable( {
  "language": {
    "paginate": {
      "first": "First page"
    }
  }
} );

Here is also a link to a related Stack Overflow answer that also talks about editing the language object settings

That's a good example for jQuery, but not applicable for Angular Datatables — Michael Westcott, Oct 06 '16 at 06:48
@Michael Westcott With a little research you can figure it out how to use this with angular datatables. Here. $scope.dtOptions = DTOptionsBuilder.newOptions() .withLanguage({ "info": "Showing _START_ to _END_ of _TOTAL_", "lengthMenu": "Show _MENU_" }); — Exzile, Feb 21 '17 at 20:00

Kalyan · Answer 2 · 2017-04-07T00:54:38.623

Late Answer. but it may be useful for someone.

vm.dtPackageOptions = DTOptionsBuilder.newOptions()
    .withPaginationType('full_numbers')
    .withDisplayLength(10)
    .withBootstrap();
    .withLanguage({
                "processing": "Processing...",
                "loadingRecords": "Loading...",
                "paginate": {
                    "first": '<i class="fa fa-fast-backward" aria-hidden="true"></i>',
                    "last": '<i class="fa fa-fast-forward" aria-hidden="true"></i>',
                    "next": '<i class="fa fa-step-forward large" aria-hidden="true"></i>',
                    "previous": '<i class="fa fa-step-backward" aria-hidden="true"></i>'
                }
            })

Thank you @kalyan This is best solution found on web for DTOptionsBuilder — Hardik Masalawala, May 07 '18 at 07:19

score 1 · Answer 3 · answered Jul 12 '16 at 18:57

1

There is api for it: DTOptions > withLanguage(oLanguage)

you can check it out here. Go to DTOptionsBuilder tab and search for withLanguage(oLanguage) and then oPaginate.

answered Jul 12 '16 at 18:57

Kishor Sharma

599
8
15

I saw that but didn't make the connection. Seems like a kind of a crummy way to have to do something which is pretty common. – DaveC426913 Jul 12 '16 at 19:33
I think you don't need to provide every thing. just provide the "oPaginate" field. – Kishor Sharma Jul 13 '16 at 05:36
How does one implement these options in the angular way, rather than the jQuery way? – DaveC426913 Jul 13 '16 at 14:16

change text on angular datatable pagination buttons

3 Answers3