javascript - How do you implement front-end paging?

Question

I can implement paging in the back-end nodejs, but how to write the front-end code?

Answer 1

I guess what the questioner needs is a front-end paging script:

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>
*/

If the poster happens to be using AngularJS, you can download and use my open source small project directly: ng-pagination.

Answer 2

The front-end writes directly
1, 2, 3, 4, 5....
When clicked, the corresponding number such as '4' is sent to the back-end
The back-end writes SQL statements such as: select ＊ from tab limit a *10,b

You should be able to understand this sql,

Note: If the database has a lot of data, using this SQL is not efficient

Answer 3

The front end sends the request according to the parameters required by the back end. What parameters are sent to get the corresponding data, then paging is realized. That is, every time the page is turned, ajax needs to be sent

Answer 4

For example. The background performs paging of 200 pieces of data per page and sends them to the front end, and returns the total number of pages. The front end can display different numbers of items such as 10, 20, 50, 100, etc. per page. The front-end does a calculation and corresponds the front-end page number to the background paging page number. Just take the data on each page directly from the 200 items. Like angular, ng-repeat="item in items.slice(page*10, 10)". Encapsulate a command and it works every time