如何调整AngularJS ngTable分页控件的显示顺序？

嘿，我来帮你搞定这个ngTable分页顺序的问题！

问题出在你当前的代码是直接ng-repeat="page in pages"，而ngTable默认生成的pages数组里，按钮的顺序可能不是你想要的first → prev → next → last（比如可能是prev、first、next、last这种默认排列），所以循环出来的顺序就乱了。

这里有两个靠谱的解决方案，你可以选一个适合你的：

方案1：手动渲染按钮（最直接可控） #

放弃用ng-repeat遍历pages数组，直接按你想要的顺序逐个渲染四个按钮，用ngTable的params对象来判断按钮是否可用，以及处理跳转逻辑：

<ul class="pagination">
  <!-- 首页按钮 -->
  <li ng-class="{'disabled': !params.hasPrevious()}">
    <a ng-click="params.page(1)" href="" translate>TABLE.FIRST</a>
  </li>
  <!-- 上一页按钮 -->
  <li ng-class="{'disabled': !params.hasPrevious()}">
    <a ng-click="params.page(params.page() - 1)" href="" translate>TABLE.PREVIOUS</a>
  </li>
  <!-- 下一页按钮 -->
  <li ng-class="{'disabled': !params.hasNext()}">
    <a ng-click="params.page(params.page() + 1)" href="" translate>TABLE.NEXT</a>
  </li>
  <!-- 末页按钮 -->
  <li ng-class="{'disabled': !params.hasNext()}">
    <a ng-click="params.page(params.totalPages())" href="" translate>TABLE.LAST</a>
  </li>

  <!-- 原有的少于2页时的占位逻辑 -->
  <li ng-if="params.pages < 2" ng-class="{'disabled':true}" ng-repeat="n in ['«','1','»']">
    <a type="button" ng-click="" href="" ng-bind="n"></a>
  </li>
</ul>

这个方法的好处是完全由你控制顺序，不用依赖pages数组的默认结构，逻辑也更清晰。

方案2：自定义排序过滤pages数组 #

如果你还是想保留ng-repeat的写法，可以在控制器里写一个排序函数，把pages数组按你想要的顺序重新排列：

首先在你的AngularJS控制器里添加这个函数：

$scope.sortPageButtons = function(pages) {
  // 定义我们想要的按钮顺序
  const desiredOrder = ['first', 'prev', 'next', 'last'];
  // 按照定义的顺序对pages数组排序
  return pages.sort((pageA, pageB) => {
    return desiredOrder.indexOf(pageA.type) - desiredOrder.indexOf(pageB.type);
  });
};

然后在模板里用排序后的数组进行循环：

<ul class="pagination">
  <li ng-class="{'disabled': !page.active}" ng-repeat="page in sortPageButtons(pages)" ng-switch="page.type">
    <a ng-switch-when="first" ng-click="params.page(page.number)" href="" translate>TABLE.FIRST</a>
    <a ng-switch-when="prev" ng-click="params.page(page.number)" href="" translate>TABLE.PREVIOUS</a>
    <a ng-switch-when="next" ng-click="params.page(page.number)" href="" translate>TABLE.NEXT</a>
    <a ng-switch-when="last" ng-click="params.page(page.number)" href="" translate>TABLE.LAST</a>
  </li>

  <li ng-if="params.pages < 2" ng-class="{'disabled':true}" ng-repeat="n in ['«','1','»']">
    <a type="button" ng-click="" href="" ng-bind="n"></a>
  </li>
</ul>

这个方法会把pages数组里的按钮按你指定的type顺序重新排列，这样ng-repeat出来的顺序就符合要求了。

两种方法都能解决你的问题，推荐方案1，因为更直观，也不用额外处理数组排序的逻辑~

内容的提问来源于stack exchange，提问作者zezz