angularjs - 更改 Angular 数据表分页按钮上的文本

Question

我的应用程序正在使用 Angular 数据表。分页由

组成

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

我想将其更改为较短的字符串，例如

|< < 1 > >|

我确信这是可能的，但我在文档中找不到任何对此的引用。

这就是我一直在寻找的地方:

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

这是 HTML 和 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

我想你可以编辑language settings.

默认语言对象如下所示:

{
"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"
}
}

因此，要添加所需的样式，请将其更改为:

    {
"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"
    }
}

您关心的是: language.paginate.first、 language.paginate.last、 language.paginate.next 和 language.paginate.previous。

Here是创建数据表时如何更改“first”的示例。

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

Here也是相关Stack Overflow answer的链接它还讨论了编辑语言对象设置