自定义分页，箭头而不是下一个上一个

Question

我正在使用jQuery DataTables，我想扩展默认分页以使用带箭头或图像的按钮，而不是Next Previous文本链接。

在脚本初始化时我尝试使用

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

但我仍然有像

这样的默认分页

Answer 1

您可以通过language.paginate.next和language.paginate.previous自定义分页按钮标签。

cin.ignore (numeric_limits<streamsize>::max(), '\n')

由于$('#the_table').DataTable({ language: { paginate: { next: '→', // or '→' previous: '←' // or '←' } } }); 和next的值可以包含标记，因此您甚至可以使用图像或字形图标字体。

previous

如果要在现有文本之前或之后包含箭头，还可以使用纯CSS：

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