一、概述
首先，我們要明確為何需要分頁技術，主要原因有以下：
1、分頁可以提高客戶體驗度，適當地選擇合適的數據條數，讓頁面顯得更有條理，使得用戶體驗感良好，避免過多數據的冗余。
2、提高性能的需要。
為何需要搜索技術，主要原因有以下：
1、搜索功能，能准確的根據用戶的關鍵字找到對應的例子，能更快速高效的找到自己需要的東西。
2、能夠進行列表檢索篩選。
二、分頁技術的實現過程
1.HTML代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>騎馬行天下demo</title> <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/index.css" /> <script src="js/jquery-3.3.1.min.js"></script> </head> <body> <!--庫存管理-首頁--> <div class="rg-stock-manage"> <div class="stock-manage-top" id="stockbacktop"> <div class="manage-top-right"> <div class="manage-search" style="display: none;"> <img src="img/search.png" /> <input type="text" id="stock-searchlist" placeholder="2018-09-07"/> </div> <a> <input class="gopurchase" type="button" value="去采購"/> </a> <select id="payChanges" onchange="payChange()"> <option value="">全部</option> <option value="已支付">已支付</option> <option value="待付款">待付款</option> </select> </div> </div> <div class="stork-manage-card"> <ul id="txt-list"> <!--庫存管理列表--> </ul> </div> <div class="stock-manage-bottom"> <div class="manage-bottom-right" id="stockbarcon"> <!--分頁按鈕模塊--> </div> </div> </div> </body> </html>
2.js代碼：
采用的的ajax連接的接口進行列表數據渲染，具體寫法請查看博主一篇專門寫ajax的博文；
$.ajax({ url:"https://www.xxxx.cn/xxxxxx/xxxorders/",//查詢訂單接口 data: UserID, type:"get", success:function(data){ var order = JSON.parse(data).orderdetail; var str = ""; $(function(){ goPage(1,10);//分頁(第幾頁，總頁數) }) //庫存管理 $("#txt-list").empty(); ......... }
})
分頁功能采用的js代碼如下：
function goPage(pno, psize) { var itable = document.getElementById("txt-list"); var li = itable.getElementsByTagName('li'); var num = li.length; //表格所有行數(所有記錄數) var totalPage = 0; //總頁數 var pageSize = psize; //每頁顯示行數 //總共分幾頁 if (num / pageSize > parseInt(num / pageSize)) { totalPage = parseInt(num / pageSize) + 1; } else { totalPage = parseInt(num / pageSize); } var currentPage = pno; //當前頁數 var startRow = (currentPage - 1) * pageSize + 1; //開始顯示的行 var endRow = currentPage * pageSize; //結束顯示的行 endRow = (endRow > num) ? num : endRow; //遍歷顯示數據實現分頁 for (var i = 1; i < (num + 1); i++) { var irow = li[i - 1]; if (i >= startRow && i <= endRow) { irow.style.display = "block"; } else { irow.style.display = "none"; } } var tempStr =""; if (currentPage > 1) { tempStr += "<a href=\"#stockbacktop\" class=\"a2\" onClick=\"goPage(" + (1) + "," + psize + ")\" class=\"paq-sy\">"; tempStr += "<input class=\"homepagea\" type=\"button\" value=\"首頁\"/>"; tempStr += "</a>"; tempStr += "<a href=\"#stockbacktop\" class=\"a3\" onClick=\"goPage(" + (currentPage - 1) + "," + psize + ")\">"; tempStr += "<input class=\"toppages\" type=\"button\" value=\"上一頁\"/>"; tempStr += "</a>"; tempStr += "<div class=\"somepages\">"; tempStr += "<span class=\"s1\">"+currentPage+"</span>"; tempStr += "<span class=\"s2\"> / </span>"; tempStr += "<span class=\"s3\">"+totalPage+"</span>"; tempStr += "</div>"; } else { tempStr += "<a href=\"#stockbacktop\" class=\"a2\">"; tempStr += "<input class=\"homepagea\" type=\"button\" value=\"首頁\"/>"; tempStr += "</a>"; tempStr += "<a href=\"#stockbacktop\" class=\"a3\">"; tempStr += "<input class=\"toppages\" type=\"button\" value=\"上一頁\"/>"; tempStr += "</a>"; tempStr += "<div class=\"somepages\">"; tempStr += "<span class=\"s1\">"+currentPage+"</span>"; tempStr += "<span class=\"s2\"> / </span>"; tempStr += "<span class=\"s3\">"+totalPage+"</span>"; tempStr += "</div>"; } if (currentPage < totalPage) { tempStr += "<a href=\"#stockbacktop\" class=\"a4\" onClick=\"goPage(" + (currentPage + 1) + "," + psize + ")\">"; tempStr += "<input class=\"downpages\" type=\"button\" value=\"下一頁\"/>"; tempStr += "</a>"; tempStr += "<a href=\"#stockbacktop\" class=\"a5\" onClick=\"goPage(" + (totalPage) + "," + psize + ")\">"; tempStr += "<input class=\"endpagesz\" type=\"button\" value=\"尾頁\"/>"; tempStr += "</a>"; } else { tempStr += "<a href=\"#stockbacktop\" class=\"a4\">"; tempStr += "<input class=\"downpages\" type=\"button\" value=\"下一頁\"/>"; tempStr += "</a>"; tempStr += "<a href=\"#stockbacktop\" class=\"a5\">"; tempStr += "<input class=\"endpagesz\" type=\"button\" value=\"尾頁\"/>"; tempStr += "</a>"; } document.getElementById("stockbarcon").innerHTML = tempStr; }
三.搜索功能實現
搜索功能有以下兩種實現方法：
1.輸入框搜索法：
根據輸入框輸入的內容文字，在ul列表里面進行檢索，顯示出有關鍵字的那條或多條信息；
//庫存管理搜索 $(function(){ $("#stock-searchlist").bind('input propertychange', function() { var insertVal = $(this).val(); $("#txt-list li").each(function() { var paratime = $(this).children(".stork-card-top").children(".stork-card-top-con").children(".p2").children("span").html(); if(paratime.indexOf(insertVal) < 0) { $(this).hide(); $("#stock-searchlist").bind('propertychange input',function () { var intVal = $(this).val(); if(intVal.length<=0){ window.location.reload(); } }); } else { $(this).show(); } }); }); })
2.下拉列表篩選法：
根據下拉列表進行內容進行篩選，顯示出有關鍵字的那條或多條信息；
// 數據篩選 function payChange() { $("ul li").hide().filter(":contains('"+($("#payChanges").val())+"')").show(); }
四.總結
項目中經常要用到分頁和搜索功能，希望對大家有所幫助，有什么更好的方法歡迎在下面留言,共同進步。。。