Question

我的应用正在使用角度数据表。分页包括

[首先] [上一页] [1] [下一页] [上一页]

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

|＆LT; ＆LT; 1> ＆GT; |

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

除其他地方外，这是我一直在寻找的地方：

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

以下是HTML和控制器的片段：

<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的链接，其中还讨论了编辑语言对象设置

Answer 2

迟到的答案。但它可能对某人有用。

vm.dtPackageOptions = DTOptionsBuilder.newOptions()
    .withPaginationType('full_numbers')
    .withDisplayLength(10)
    .withBootstrap();
    .withLanguage({
                "processing": "Processing...",
                "loadingRecords": "Loading...",
                "paginate": {
                    "first": '<i class="fa fa-fast-backward" aria-hidden="true"></i>',
                    "last": '<i class="fa fa-fast-forward" aria-hidden="true"></i>',
                    "next": '<i class="fa fa-step-forward large" aria-hidden="true"></i>',
                    "previous": '<i class="fa fa-step-backward" aria-hidden="true"></i>'
                }
            })

Answer 3

它有api：DTOptions＆gt;为language（oLanguage）

你可以查看here。转到DTOptionsBuilder选项卡并搜索withLanguage（oLanguage），然后 oPaginate 。

更改角度数据表分页按钮上的文本

3 个答案: