一、概述
首先，我们要明确为何需要分页技术，主要原因有以下：
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(); }
四.总结
项目中经常要用到分页和搜索功能，希望对大家有所帮助，有什么更好的方法欢迎在下面留言,共同进步。。。