jquery - 自定义分页，箭头代替下一页 上一页

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 .

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

由于 next 和 previous 的值可以包含标记，因此您甚至可以使用图像或字形图标字体。

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

如果您想在现有文本之前或之后包含箭头，也可以使用纯 CSS:

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

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