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

【问题标题】：change text on angular datatable pagination buttons更改角度数据表分页按钮上的文本
【发布时间】：2016-07-12 18:21:51
【问题描述】：

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

[第一个] [上一个] [1] [下一个] [最后一个]

我想把它改成更短的字符串，比如

|>|

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

这是我一直在寻找的地方：

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

这是 HTML 和控制器的 sn-p：

<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)
];

【问题讨论】：

标签： angularjs datatable pagination

【解决方案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 的链接，该链接还讨论了编辑语言对象设置

【讨论】：

这是 jQuery 的一个很好的例子，但不适用于 Angular 数据表
@Michael Westcott 通过一些研究，您可以弄清楚如何将它与角度数据表一起使用。这里。 $scope.dtOptions = DTOptionsBuilder.newOptions() .withLanguage({ "info": "显示TOTAL的START到END", "lengthMenu ": "显示菜单" });

【解决方案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>'
                }
            })

【讨论】：

谢谢@kalyan 这是在网上找到的 DTOptionsBuilder 的最佳解决方案

【解决方案3】：

有它的api：DTOptions > withLanguage(oLanguage)

您可以查看here。转到 DTOptionsBuilder 选项卡并搜索 withLanguage(oLanguage)，然后搜索 oPaginate。

【讨论】：

我看到了，但没有建立联系。似乎是一种很糟糕的方式来做一些很常见的事情。
我认为你不需要提供所有的东西。只需提供“oPaginate”字段即可。
如何以角度方式而不是 jQuery 方式实现这些选项？