search

Home  >  Q&A  >  body text

javascript - How do you implement front-end paging?

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

滿天的星座滿天的星座2699 days ago995

reply all(4)I'll reply

  • 欧阳克

    欧阳克2017-07-05 11:00:25

    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.

    reply
    0
  • 滿天的星座

    滿天的星座2017-07-05 11:00:25

    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

    reply
    0
  • 给我你的怀抱

    给我你的怀抱2017-07-05 11:00:25

    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

    reply
    0
  • 伊谢尔伦

    伊谢尔伦2017-07-05 11:00:25

    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

    reply
    0
  • Cancelreply