JS處理資料實現分頁功能

阿新 • • 發佈：2022-01-25

這幾天有小夥伴討論起了分頁的相關問題，這裡我也簡單講下前端如何簡單便捷的利用（庫）寫出優雅，好用的分頁工具。

分頁是個很簡單又超多接觸的技術點，粗略來講分如下兩種：

真分頁——每次根據頁碼、頁大小獲取資料並展示。

假分頁——一次性獲取所有資料，根據頁碼、頁大小展示。

公認比較好的做法是真分頁，這樣可以避免很多問題（如記憶體佔用過多）。

有一點需要注意，單純的前端是無法獨立完成資料分頁的（廢話），所以後端支援是必須的。

作為支援，webapi除了返回所請求的資料，還應返回資料總量以便計算頁數：

JS處理資料實現分頁功能

如上圖所示，我們可以看出資料總量27，分頁大小10（這邊只請求了10條資料）。

如果你擁有如上圖的webapi的支援，就可以接著往下寫了。

我使用物件字面量封裝的方法：

var Post = {
    Url: function () {
        return "webAPI路徑";
    },///返回帶分頁資訊
    //[ele]填充資訊元素ID
    ///[ele2]填充分頁元素ID
    //[tagName]資訊元素一級元素名
    ///[tag2Name]資訊元素二級元素名
    //[index]頁碼
    Pager: function (ele,ele2,tagName,tag2Name,index,where) {
        //頁大小
        var size = $.cookie('pageSize') == undefined ? 10 : $.cookie('pageSize');
        //封裝的Ajax
        Load(Post.Url(),{引數列表},function (data) {<br data-filtered="filtered">　　　　　　  //展示資料
            $(ele).html(createHtml(data.rows,tag2Name));
            //設定分頁資訊
            $(ele2). 
attr('index',index).attr('rowcount',size).attr('total',data.total);
            //填充分頁
            PagerTool(ele,Post,where);
        });
    }
}

Load、createHtml和PagerTool是我自己封裝的幾個方法，程式碼如下：

///公共載入方法
//[turl]訪問地址
///[postData]提交資料(標準post格式)
//[callback]回撥函式(可匿名)
function Load(turl,postData,callback) {
    .supporthttp://www.cppcns.com 
.cors = true;
    try {
        $.ajax({
            url: turl,timeout: 10000,type: "post",data: postData,success: function (data) {
                if (data != null) {
                    Json = eval("(" + data + ")");
                    callback(Json);
                }
            }
        });
    } catch (e) {
        Mbox.Show(e.message);
    }
}
 
///建立Html結構
//[data]資料來源
///[tagName]一級元素標籤名稱
//[tag2Name]二級元素標籤名稱
function createHtml(data,tag2Name) {www.cppcns.com
    var Html = '';
    for (var i = 0; i < data.length; i++) {
        Html += `<${tagName}>`;
        $.each(data[i],function (i,v) {
            Html += `<${tag2Name}>${v}</${tag2Name}>`;
        });
        Html += `</${tagName}>`;
    }
    return Html;
}

PagerTool方法：

//公共分頁工具條
///[dataEle]資料主體
//[ele]分頁主體
///[obj]被傳入的類
//[where]條件
///[w]按照何種方式搜尋
function PagerTool(dataEle,ele,obj,tag1,tag2,where) {
    var total = $(ele).attr('total') - 0;
    var rowcount = $(ele).attr('rowcount') - 0;
    var index = $(ele).attr('index') - 0;
    var count = total % rowcount == 0 ? total / rowcount : Math.floor(total / rowcount) + 1;
    var Html = '';
    Html += '<p class="page">';
    Html += '<a href=":void(0)" class="prePage">上一頁</a>';
    for (varwww.cppcns.com i = 1; i <= count; i++) {
        if (index != i) {
            Html += `<a href="Script:void(0)" class="nowPage">${i}</a>`;
        } else {
            Html += `<a href="javaScript:void(0)" class="nowPage" style="background:#ACDDEA; color:#226F83; border:#93D3E4 1px solid;">${i}</a>`;
        }
    }
    Html += '<a href="javaScript:void(0)" class="nextPage">下一頁</a>';
    Html += '</p>';
    $(ele).html('').html(Html);
    //上一頁
    $(ele).find('a[class=prePage]').bind('click',function () {
        var index = $(this).parent().parent().attr('index') - 0;
        if (index > 1) {
            $(this).parent().parent().attr('index',index - 1);
            obj.Pager(dataEle,index - 1,where);
        }
    });
    //下一頁
    $(ele).find('a[class=nextPage]').bind('click',function () {
        var index = $(this).parent().parent().attr('index') - 0;
        if (index < count) {
            $(this).parent().parent().attr('index',index + 1);
            obj.Pager(dataEle,index + 1,where);
        }
    });
    //當前頁
    $(ele).find('a[class=nowPage]').bind('click',function () {
        var index = $(this).parent().parent().attr('index') - 0;
        $(this).parent().parent().attr('index',$(this).text());
        obwww.cppcns.comj.Pager(dataEle,$(this).text(),where);
    });
}

呼叫方式會是這樣的：

Post.Pager(testBox,pagerBox,'ul','li',1,`篩選資料的條件`);

使用瞭如上程式碼，即可按照所返回的json資料的格式自動對映到容器內（按照傳入的tagName生成dom）：

JS處理資料實現分頁功能

切換後效果：

JS處理資料實現分頁功能

分頁工具條，生成在頁面是這樣的：

<p class="page"><br data-filtered="filtered">    <a href="javaScript:void(0)" class="prePage">上一頁</a><br data-filtered="filtered">    <a href="javaScript:void(0)" class="nowPage" style="background:#ACDDEA; color:#226F83; border:#93D3E4 1px solid;">1</a><br data-filtered="filtered">    <a href="javaScript:void(0)" class="nowPage">2</a><br data-filtered="filtered">    <a href="javaScript:void(0)" class="nowPage">3</a><br data-filtered="filtered">    <a href="javaScript:void(0)" class="nextPage">下一頁</a><br data-filtered="filtered"></p>

到此這篇關於JS處理資料實現分頁功能的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支援我們。