AngularJS-Front-End-Paging-Implementierung

In diesem Artikel wird hauptsächlich die Implementierung von Front-End-Paging in AngularJS vorgestellt, die jetzt einen gewissen Referenzwert hat. Freunde in Not können darauf verweisen.

Assessor-Abfrage Da das Gesamtdatenvolumen relativ gering ist, können wir Paging für die Verarbeitung in den Vordergrund stellen.

Tatsächlich ist das Paging-Prinzip auch sehr einfach. Wir bestimmen die Anzahl der Elemente im aktuell angezeigten Array basierend auf der Anzahl der für das Paging ausgewählten Seiten und der Anzahl der Datenelemente auf jeder Seite Erstellen Sie die Paging-Parameter und übergeben Sie sie in vorhandenen Paging-Anweisungen.

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

Das sind die Daten, die unser Paging-Befehl benötigt, also haben wir zwei Aufgaben: Erstens müssen wir die Daten abfangen, die auf der aktuellen Seite angezeigt werden sollen, und zweitens müssen wir Parameter generieren und sie an den Paging-Befehl übergeben.

Öffentliche Methode

Dies ist die letzte öffentliche Methode, die in

implementiert wurde.

/**
 * 重新生成分页参数与分页数据
 * @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);
    }
};

CommonServiceDaten der aktuellen Seite abrufen

Um die Daten der aktuellen Seite zu erhalten, müssen wir die Anzahl der Datenelemente pro Seite und die Seitenzahl kennen, um die Daten aufzuteilen.

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

teilt die Daten von

bis

auf. 0sizeSeitenparameter erstellenpage * size

// 计算总页数和总数据条数
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;

Die Gesamtzahl der Daten geteilt durch die Anzahl der Datenelemente pro Seite und aufgerundet, um die Gesamtzahl der Seiten zu erhalten.

Wenn die Anzahl der Seiten

ist, ist es die erste Seite; wenn die Anzahl der Seiten die Gesamtzahl der Seiten minus

ist, ist es die letzte Seite.

<yunzhi-page></yunzhi-page>

01

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

AngularJS-Export-Excel-Befehl

AngularJS-Dokumentlesebefehlsbereich

Datenbindung für AngularJS

Das obige ist der detaillierte Inhalt vonAngularJS-Front-End-Paging-Implementierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!