custom pagination, arrows instead of Next Previous

Question

I'm using jQuery DataTables and I want to extend the default pagination to use buttons with arrows or images instead of Next Previous text links.

On script initialization I tried to use

    ...
     "oPaginate": {                       
             "sNext": '<i class="entypo-right-circled" ></i>',
             "sPrevious": '<i class="entypo-left-circled" class="Dia_pagination_ico" ></i>'
     },
    ...

but I still have default pagination like

Answer 1

You can customize the pagination button labels through language.paginate.next and language.paginate.previous.

$('#the_table').DataTable({
  language: {
    paginate: {
      next: '→', // or '→'
      previous: '←' // or '←' 
    }
  }
});

Because the values for next and previous can include markup, you can even use an image or a glyph icon font.

$('#the_table').DataTable({
  language: {
    paginate: {
      next: '<img src="path/to/arrow.png">',
      previous: '<i class="fa fa-fw fa-long-arrow-left">'  
    }
  }
});

If you want to include an arrow before or after the existing text, you can also use plain CSS:

.paginate_button.previous:before {
  content: '← ';
}

.paginate_button.next:after {
  content: ' →';
}