AngularJS front-end paging implementation

This article mainly introduces the AngularJS front-end paging implementation, which has certain reference value. Now I share it with everyone. Friends in need can refer to it

Pagination ideas

Assessor query , because the overall data volume is relatively small, we can put paging in the foreground for processing.

In fact, the principle of paging is also very simple. We determine the number of items in the array currently displayed based on the number of pages selected for paging and the number of data items on each page, and then construct the paging parameters and pass them in Existing paging instructions.

// 初始化分页参数
$scope.pageParams = {
    size: $stateParams.size,      // 每页数据条数
    page: $stateParams.page,      // 页码数
    last: undefined,              // 是否首页
    first: undefined,             // 是否尾页
    totalPages: undefined,        // 总页数
    totalElements: undefined,     // 总数据条数
    numberOfElements: undefined   // 当前页有几条数据
};

This is the data required by our paging instruction, so we have two tasks. First, intercept the data that should be displayed on the current page, and second, generate parameters and pass them to the paging instruction.

Public method

This is the last public method implemented in CommonService.

/**
 * 重新生成分页参数与分页数据
 * @param  {每页数据条数}   size
 * @param  {页码数}        page
 * @param  {全部数据}      data
 * @param  {Function}     callback
 * callback (pageParams, currentPageData)
 * pageParams: 分页的标准
 * currentPageData: 当前页的数据
 */
self.reloadPageParamsAndData = function(size, page, data, callback) {
    // 校验传入的参数
    if (typeof size === 'undefined') {
        throw '未接收到每页数据条数信息';
    }
    if (typeof page === 'undefined') {
        throw '未接收到分页信息';
    }
    if (typeof data === 'undefined') {
        throw '未接收到数据信息';
    }
    // 计算总页数和总数据条数
    var totalPages    = Math.ceil(data.length / size);
    var totalElements = data.length;
    // 计算当前页是否为首页 是否为尾页
    var first = page === 0 ? true : false;
    var last  = page === totalPages - 1 ? true : false;
    // 根据分页参数计算当前页应该显示的数据 slice数组元素分割
    var currentPageData = data.slice(0 + page * size, size + page * size);
    // 获取当前页总共有多少条数据
    var numberOfElements = currentPageData.length;

    // 重新生成分页参数
    var pageParams = {
        size: size,                          // 每页数据条数
        page: page,                          // 页码数
        last: last,                          // 是否首页
        first: first,                        // 是否尾页
        totalPages: totalPages,              // 总页数
        totalElements: totalElements,        // 总数据条数
        numberOfElements: numberOfElements   // 当前页有几条数据
    };

    // 回调
    if (callback) {
        callback(pageParams, currentPageData);
    }
};

Get the data of the current page

To get the data of the current page, we need to know the number of data items on each page and the page number to split the data.

var currentPageData = data.slice(0 + page * size, size + page * size);

Split the data. The data should be from 0 to size, plus page * size is the number of previous pages. The amount of data.

Construct paging parameters

// 计算总页数和总数据条数
var totalPages    = Math.ceil(data.length / size);
var totalElements = data.length;
// 计算当前页是否为首页 是否为尾页
var first = page === 0 ? true : false;
var last  = page === totalPages - 1 ? true : false;
// 获取当前页总共有多少条数据
var numberOfElements = currentPageData.length;

The total number of data is divided by the number of data items per page and rounded up to get the total number of pages.

If the number of pages is 0, it is the first page; if the number of pages is the total number of pages minus 1, it is the last page.

<yunzhi-page></yunzhi-page>

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

AngularJS export Excel command

AngularJS document reading command scope

angularjs data binding

The above is the detailed content of AngularJS front-end paging implementation. For more information, please follow other related articles on the PHP Chinese website!