原生javascript实现分页效果+搜索功能
一、概述
首先，我们要明确为何需要分页技术，主要原因有以下：
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(); }
四.总结
项目中经常要用到分页和搜索功能，希望对大家有所帮助，有什么更好的方法欢迎在下面留言,共同进步。。。
原生javascript实现分页效果+搜索功能的更多相关文章
- 纯原生javascript实现分页效果
随着近几年前端行业的迅猛发展,各种层出不穷的新框架,新方法让我们有点眼花缭乱. 最近刚好比较清闲,所以没事准备撸撸前端的根基javascript,纯属练练手,写个分页,顺便跟大家分享一下 functi ...
- 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）
虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...
- 原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...
- Vue下简单分页及搜索功能
最近利用Vue和element ui仿写了个小页面,记一哈分页和搜索功能的简单实现. 首页 emmmm..... 搜索框输入..... 搜索完成 数据是直接写在这里面的: cardPhoto:[ ...
- 原生js显示分页效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 原生JavaScript实现新手引导效果（第二个玩具）
慕课地址https://www.imooc.com/video/169 预览效果: <!DOCTYPE html> <html> <head> <meta c ...
- 使用JavaScript实现分页效果
应公司需求,有时需要制作静态页面网站,而一旦涉及到文章的分页,实现起来非常麻烦,自己又刚入门,对js不是很熟悉,所以就拿来练练手. 首先页面结构如下,分别展示数据跟分页: <!DOCTYPE h ...
- 原生js实现分页效果（带实例）
小小插件(静态分页) 效果图: 首先实现简单功能: <!DOCTYPE html> <html> <head> <meta http-equiv=" ...
- Javascript之简单按钮搜索功能
学习JavaScript我觉得真实的感觉就是可以任意设计,“没有做不到只有想不到!”即使简单,但是任何东西的复杂都是从简单.基础开始的!这是我自己做的一个超简单的"搜索引擎"按钮, ...
随机推荐
- [.net]ConcurrentBag源码分析
ConcurrentBag根据操作线程,对不同线程分配不同的队列进行数据操作.这样,每个队列只有一个线程在操作,不会发生并发问题.其内部实现运用了net4.0新加入的ThreadLocal线程本地存储 ...
- 浅谈TCP通讯
基于Tcp协议的Socket通讯类似于B/S架构,面向连接,但不同的是服务器端可以向客户端主动推送消息. 使用Tcp协议通讯需要具备以下几个条件: (1).建立一个套接字(Socket) (2).绑定 ...
- 跨域处理之Jsonp
一.认识Jsonp JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式 ...
- ubuntu 关闭和开启防火墙
1.关闭ubuntu的防火墙 ufw disable 2开启防火墙 ufw enable 3.卸载了iptables apt-get remove iptables 4.关闭ubuntu中的防火墙的其 ...
- 【ocp-12c】最新Oracle OCP-071考试题库（39题）
39.choose the best answer View the Exhibit and examine the description of the EMPLOYEES table. You w ...
- 【Oracle 12c】CUUG OCP认证071考试原题解析（32）
32.choose the best answer View the Exhibit and examine the data in EMP and DEPT tables. In the DEPT ...
- C# 键盘中的按键对应KeyValue
首先先看一下什麼情況下需要對按鍵進行識別: KeyPress事件響應函數中,有KeyPressEventArgs, 對應於e.KeyChar; KeyDown事件響應中有KeyEventArgs 求取 ...
- vue 路由传参
mode:路由的形式 用的哪种路由 1.hash 路由 会带#号的哈希值 默认是hash路由 2.history路由 不会带#的 单页面开发首屏加载慢怎么解决?单页面开发首屏加载白屏怎 ...
- Python str转化成数字
原地址 http://www.cnblogs.com/wuxiangli/p/6046800.html int(x [,base ]) 将x转换为一个整数 long(x [ ...
- 干货 | Elasticsearch Nested类型深入详解(转)
https://blog.csdn.net/laoyang360/article/details/82950393 0.概要在Elasticsearch实战场景中,我们或多或少会遇到嵌套文档的组合形式 ...