javascript - 你們要怎麼實現前端分頁的？

Question

後端的nodejs我能夠實現分頁但是前端的程式碼如何寫呀？

欧阳克 · Answer

估計題主需要的是前端分頁腳本吧：

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 '' + item.name + '';
        }).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'});
/*
    首页
    上一页
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    下一页
    尾页
*/

如果提主恰巧使用的是 AngularJS，可以下載直接使用我的開源小專案：ng-pagination。

滿天的星座 · Answer

前端直接寫啊
1，2，3，4，5....
點擊的時候把相應的數字如'4'，發送到後端
後端寫sql語句如：select ＊ from tab limit a *10,b

這個sql應該可以懂把，

註：如果資料庫資料很多的話使用這種sql效率不高

给我你的怀抱 · Answer

前端根據後端需要的參數來發送請求啊，發什麼參數取到對應的數據，就實現分頁了，就是每次翻頁都是需要發送ajax的

伊谢尔伦 · Answer

比如。後台進行200個每頁的資料分頁傳給前端，並傳回來總頁數。前端就可以做每頁10、20、50、100等不同條數的展示。前端做個計算，把前端的頁碼和後台分頁頁碼相對應。每頁資料就直接在200條裡面取就好了。像angular，ng-repeat="item in items.slice(page*10, 10)"。封裝個指令，屢試不爽

javascript - 你們要怎麼實現前端分頁的？

全部回覆(4)我來回復