JS處理數(shù)據(jù)實現(xiàn)分頁功能
這幾天有小伙伴討論起了分頁的相關(guān)問題,這里我也簡單講下前端如何簡單便捷的利用Js(庫)寫出優(yōu)雅,好用的分頁工具。
分頁是個很簡單又超多接觸的技術(shù)點,粗略來講分如下兩種:
真分頁——每次根據(jù)頁碼、頁大小獲取數(shù)據(jù)并展示。
假分頁——一次性獲取所有數(shù)據(jù),根據(jù)頁碼、頁大小展示。
公認比較好的做法是真分頁,這樣可以避免很多問題(如內(nèi)存占用過多)。
有一點需要注意,單純的前端是無法獨立完成數(shù)據(jù)分頁的(廢話),所以后端支持是必須的。
作為支持,webapi除了返回所請求的數(shù)據(jù),還應(yīng)返回數(shù)據(jù)總量以便計算頁數(shù):
如上圖所示,我們可以看出數(shù)據(jù)總量27,分頁大小10(這邊只請求了10條數(shù)據(jù))。
如果你擁有如上圖的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(), {參數(shù)列表}, function (data) {<br data-filtered="filtered"> //展示數(shù)據(jù) $(ele).html(createHtml(data.rows, tagName, tag2Name)); //設(shè)置分頁信息 $(ele2).attr('index', index).attr('rowcount', size).attr('total', data.total); //填充分頁 PagerTool(ele, ele2, Post, tagName, tag2Name, where); }); } }
Load、createHtml和PagerTool是我自己封裝的幾個方法,代碼如下:
///公共加載方法 //[turl]訪問地址 ///[postData]提交數(shù)據(jù)(標準post格式) //[callback]回調(diào)函數(shù)(可匿名) function Load(turl, postData, callback) { jQuery.support.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); } } ///創(chuàng)建Html結(jié)構(gòu) //[data]數(shù)據(jù)源 ///[tagName]一級元素標簽名稱 //[tag2Name]二級元素標簽名稱 function createHtml(data, tagName, tag2Name) { 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]數(shù)據(jù)主體 //[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="javaScript:void(0)" class="prePage">上一頁</a>'; for (var i = 1; i <= count; i++) { if (index != i) { Html += `<a href="javaScript: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, ele, tag1, tag2, 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, ele, tag1, tag2, 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()); obj.Pager(dataEle, ele, tag1, tag2, $(this).text(), where); }); }
調(diào)用方式會是這樣的:
Post.Pager(testBox, pagerBox, 'ul', 'li', 1, `篩選數(shù)據(jù)的條件`);
使用了如上代碼,即可按照所返回的json數(shù)據(jù)的格式自動映射到容器內(nèi)(按照傳入的tagName生成dom):
切換后效果:
分頁工具條,生成在頁面是這樣的:
<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>
到此這篇關(guān)于JS處理數(shù)據(jù)實現(xiàn)分頁功能的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
利用 JavaScript 構(gòu)建命令行應(yīng)用
這篇文章主要介紹了利用 JavaScript 構(gòu)建命令行應(yīng)用,下面文章圍繞如何利用JavaScript 構(gòu)建命令行應(yīng)用的相關(guān)資料炸開詳細內(nèi)容,需要的朋友可以參考一下2021-11-11next.js源碼解析getStaticProps?getStaticPaths使用場景
這篇文章主要為大家介紹了next.js源碼解析getStaticProps?getStaticPaths使用場景,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08