原生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我觉得真实的感觉就是可以任意设计,“没有做不到只有想不到!”即使简单,但是任何东西的复杂都是从简单.基础开始的!这是我自己做的一个超简单的"搜索引擎"按钮, ...
随机推荐
- mvc和mvvm的区别？
源自:https://segmentfault.com/q/1010000000534091?_ea=178721 Model:很简单,就是业务逻辑相关的数据对象,通常从数据库映射而来,我们可以说是与 ...
- Windows10 下 github ssh 访问出现 Permission denied（publickey）错误的解决方法
Windows10 下 github ssh 访问出现 Permission denied(publickey)错误的解决方法. 错误信息: git clone git@github.com:ediw ...
- sharepoint 2013 升级要求
1. 安装过程合理: A. 可以同时在管理中心.两台前端.搜索服务器上安装重新发布的SP1补丁包(所提供的链接) B. 等待所有SP1补丁包安装完成,依次在管理中心.两台前端.搜索服务器上运行配置向导 ...
- Android 文件读写高级
往设备里写文件有几种选择,写在内存中,或SD卡中. 往内存里写好处是,可以写在 data/data/包名 文件夹里,而此文件是不可访问的(除非 root).这样可以增加文件的安全性,避免被误删.缺点也 ...
- django系列1--介绍与简单原理, wsgiref模块
一.web应用框架 Web应用框架(Web application framework)是一种计算机软件框架,用来支持动态网站.网络应用程序及网络服务的开发.这种框架有助于减轻网页开发时共通性活动的工 ...
- java学习笔记—Servlet技术（11）
如果大家要开发一个动态的网站,那么就必须要学习一种动态的网页开发技术.那么在SUN提供的JavaEE中主要包含两种开发动态网页的技术:Servlet和JSP技术. Servlet技术简介 Servle ...
- Problem D: GJJ的日常之暴富梦（水题）
Contest - 河南省多校连萌(四) Problem D: GJJ的日常之暴富梦 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 693 Solve ...
- “全栈2019”Java第一百一十二章：什么是闭包？
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- JavaScript 函数声明，函数表达式，匿名函数的区别，深入理解立即执行函数(function(){…})()
function fnName(){xxxx}; // 函数声明:使用function关键字声明一个函数,在指定一个函数名. //例如:(正常,因为 提升 了函数声明,函数调用可以在函数声明之前) f ...
- kali系统越来越大解决
Kali Linux系统提供的apt-get方式,可以很好的安装软件,对系统进行更新.但是每次执行都会下载大量的软件包.这些软件包被安装后,并不会被自动删掉,会持续占用磁盘空间.解决这个问题有两个办法 ...