javascript - Comment implémenter la pagination frontale?

Question

Je peux implémenter la pagination sur les nodejs back-end, mais comment écrire le code front-end ?

Answer 1

Je suppose que ce dont l'interlocuteur a besoin, c'est d'un script de pagination frontal :

var getPageList = function(options){
    if(typeof options != "object" || !('pageId' in options) || !('pageRecord' in options)){
        throw Error("options Error! eg:{pageId:1, pageRecord:12, pageUrlTemplate : '/page/{PAGE}/'}");
    };
    options.pageId = parseInt(options.pageId);
    options.pageRecord = parseInt(options.pageRecord);
    options.pageSize = options.pageSize || 10;
    
    options.pageUrlTemplate = options.pageUrlTemplate || "?page={PAGE}";
    options.pageCount = parseInt(( options.pageRecord - 1 ) / options.pageSize ) + 1;
    
    var page = [];
    var firstPage = parseInt(( options.pageId - 1 ) / options.pageSize ) * options.pageSize + 1;
    
    options.getLink = options.getLink || function(pageId){
        return options.pageUrlTemplate.replace("{PAGE}", pageId);
    };
    
    page.push({
        name    : '首页',
        style   : options.pageId == 1 ? "disabled" : "",
        link    : options.getLink(1)
    });
    page.push({
        name    : '上一页',
        style   : options.pageId == 1 ? "disabled" : "",
        link    : options.getLink(options.pageId - 1)
    });
    for( var pageId = firstPage; pageId < firstPage + 10; pageId ++){
        if( pageId >= 1 && pageId <= options.pageCount ){
            page.push({
                name    : pageId,
                link    : options.getLink(pageId),
                style   : pageId == options.pageId ? "active" : ""
            });
        }
    }
    page.push({
        name    : '下一页',
        style   : options.pageId == options.pageCount ? "disabled" : "",
        link    : options.getLink(options.pageId + 1)
    });
    page.push({
        name    : '尾页',
        style   : options.pageId == options.pageCount ? "disabled" : "",
        link    : options.getLink(options.pageCount)
    });
    page.toString = function(){
        return page.map(function(item){
            return '<a href="' + item.link + '" class="' + item.style + '">' + item.name + '</a>';
        }).join("");
    };
    return page;
};

getPageList({pageId:1,pageRecord:1200});
/*
    [
        {"name":"首页","style":"disabled","link":"?page=1"},
        {"name":"上一页","style":"disabled","link":"?page=0"},
        {"name":1,"link":"?page=1","style":"active"},
        {"name":2,"link":"?page=2","style":""},
        {"name":3,"link":"?page=3","style":""},
        {"name":4,"link":"?page=4","style":""},
        {"name":5,"link":"?page=5","style":""},
        {"name":6,"link":"?page=6","style":""},
        {"name":7,"link":"?page=7","style":""},
        {"name":8,"link":"?page=8","style":""},
        {"name":9,"link":"?page=9","style":""},
        {"name":10,"link":"?page=10","style":""},
        {"name":"下一页","style":"","link":"?page=2"},
        {"name":"尾页","style":"","link":"?page=120"}
    ]
*/
'' + getPageList({pageId:1,pageRecord:1200,pageUrlTemplate:'/category/{PAGE}/view'});
/*
    <a href="/category/1/view" class="disabled">首页</a>
    <a href="/category/0/view" class="disabled">上一页</a>
    <a href="/category/1/view" class="active">1</a>
    <a href="/category/2/view" class="">2</a>
    <a href="/category/3/view" class="">3</a>
    <a href="/category/4/view" class="">4</a>
    <a href="/category/5/view" class="">5</a>
    <a href="/category/6/view" class="">6</a>
    <a href="/category/7/view" class="">7</a>
    <a href="/category/8/view" class="">8</a>
    <a href="/category/9/view" class="">9</a>
    <a href="/category/10/view" class="">10</a>
    <a href="/category/2/view" class="">下一页</a>
    <a href="/category/120/view" class="">尾页</a>
*/

Si l'affiche utilise AngularJS, vous pouvez télécharger et utiliser directement mon petit projet open source : ng-pagination.

Answer 2

Le front-end écrit directement
1, 2, 3, 4, 5....
Lorsque vous cliquez dessus, le numéro correspondant tel que « 4 » est envoyé au back-end
Le back-end écrit des instructions SQL telles que : sélectionnez ＊ dans la limite de l'onglet a *10,b

Vous devriez être capable de comprendre ce SQL,

Remarque : Si la base de données contient beaucoup de données, l'utilisation de ce SQL n'est pas efficace

Answer 3

Le front-end envoie la demande en fonction des paramètres requis par le back-end. Quels paramètres sont envoyés pour obtenir les données correspondantes, puis la pagination est réalisée, c'est-à-dire que chaque fois que la page est tournée, ajax doit être envoyé

.

Answer 4

Par exemple. L'arrière-plan effectue la pagination de 200 éléments de données par page, les envoie au front-end et renvoie le nombre total de pages. Le frontal peut afficher différents nombres d'éléments tels que 10, 20, 50, 100, etc. par page. Le frontal effectue un calcul et fait correspondre le numéro de page du front-end au numéro de page de la page d'arrière-plan. Il suffit de prendre les données de chaque page directement à partir des 200 éléments. Comme angulaire, ng-repeat="item in items.slice(page*10, 10)". Encapsulez une commande et cela fonctionne à chaque fois