Implémentation de la pagination frontale AngularJS

Cet article présente principalement l'implémentation de la pagination frontale dans AngularJS, qui a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Idées de pagination

Requête de l'évaluateur, étant donné que le volume global de données est relativement faible, nous pouvons mettre la pagination au premier plan pour le traitement.

En fait, le principe de la pagination est également très simple. Nous déterminons le nombre d'éléments dans le tableau actuellement affiché en fonction du nombre de pages sélectionnées pour la pagination et du nombre d'éléments de données sur chaque page, puis construisez les paramètres de pagination et transmettez-les dans les instructions de pagination existantes.

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

Ce sont les données requises par notre commande de pagination, nous avons donc deux tâches : premièrement, intercepter les données qui doivent être affichées sur la page actuelle, et deuxièmement, générer des paramètres et les transmettre à la pagination. commande.

Méthode publique

Il s'agit de la dernière méthode publique implémentée dans

. 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);
    }
};

Obtenir les données de la page actuelle

Pour obtenir les données de la page actuelle, nous devons connaître le nombre d'éléments de données par page et le numéro de page pour diviser les données .

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

divisez les données. Les données doivent être de

à 0 L'ajout de size correspond à la quantité de données dans les pages précédentes. page * size

Construire les paramètres de pagination

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

Le nombre total de données est divisé par le nombre d'éléments de données par page et arrondi pour obtenir le nombre total de pages.

Si le nombre de pages est

, c'est la première page ; si le nombre de pages est le nombre total de pages moins 0, c'est la dernière page. 1

<yunzhi-page></yunzhi-page>

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au chinois PHP. site web!

Recommandations associées :

Commande Excel d'exportation AngularJS

Portée de la commande de lecture de document AngularJS

Liaison de données pour angulairejs

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!