Pagination 分页

分页是用于将内容或数据分成多个页面，并具有导航到下一页或上一页，或输入跳转到具体页码的控件。
每一页显示若干个条目，避免在大量信息中迷失。

用法

用于解决海量信息展示、滚动条过长不方便用户查看。

适用：搜索结果页、列表页等，有信息查找诉求的场景。
不适用：无明确查找目的的信息浏览场景，比如淘宝促销页。

通用原则

• 翻页器默认定位在第一页
• 当页面数 > 10 的时候，需要提供快速跳转页面的功能
• 单页展示的内容数最好不低于 10 个

格式

类型

常规

• 拥有最完整的功能，按需使用「总信息、快速跳转、单页展示数设定」
• 当页面数 <= 10 的时候，页码完整展示，无需隐藏中间页码
• 当页面数 > 10 的时候：
  • 默认展示前 5 页及最后 1 页，中间页码「···」省略
  • 切换到中间页码的时候，展示第 1 页、最后 1 页，及当前页的前后 2 页

迷你

• 拥有总信息统计、翻页和快速定位功能
• 视觉轻量，占位少
• 可根据实际需要，显示「总信息统计」

构成

1. 翻页+页码
   • 点击上下翻页跳转到临近页面
   • 当无页面时，上下翻页不可用
   • 当页面数 <= 10 的时候，直接铺开，无需省略
2. 单页展示数设置（可选）
3. 快速跳转（可选）
   • 输入框激活时，默认填充的页码为当前页的下一页
   • 用户可随意输入想要跳转的页码，当输入值超过最大页数时，自动纠正为最大页码
4. 总信息数（可选）
   • 准确展示页码统计和结果总数

位置

通常位于页面底部居中或右下角位置。

行为

切换页

• 点击页码，刷新列表进入指定页
• 点击上一页/下一页逐页切换
• 当无上一页/下一页的时候，「上/下一页」不可用

跳转页

• 激活快速跳转时，默认为当前页的下一页，enter 或输入框失焦后直接跳转
• 亦可输入具体页码，enter 或输入框失焦后直接跳转
• 仅允许输入数字（>=1），当输入的页码超过最大页码时，自动纠正为最大页码后跳转

设置单页展示数

• 单页展示数默认选择第 1 项
• 点击后选择其他选项，选择后即时生效，刷新列表

  开发

  采用分页的形式分隔长列表，每次只加载一个页面。

何时使用

• 当加载/渲染所有数据将花费很多时间时；
• 可切换页码浏览数据。

代码演示

<table ng-table="tableParams" class="table fixed table-striped">
  ...
</table>

function initTableParams() {
    var initialParams = {};
    var initialSettings = {
        getData: function (params) {
                return getResourcePromise.$promise.then(function (data) {
                    $scope.tableOperateParams = {
                        tableType: 'checkbox',
                        paginationTyp: "service",
                        tableData: {
                          showTable: data.records,
                          chooseTable: []
                      },
                      allChoseInput : {},
                      uniqueWord : {
                          rowWord : 'name'
                      },
                      rowData : {}
                    };
                    return data.records;
                })
            }
        }
    };
    return new NgTableParams(initialParams,initialSettings);
}
$scope.tableParams = initTableParams()