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)
];

Answer 1

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