原生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\">&nbsp;/&nbsp;</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\">&nbsp;/&nbsp;</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 Core 开发环境
安装 .Net Core 执行代码任务时间:时间未知 .NET Core 的官方文档很详细,本实验带你建立一个.NET Core 1.1的Web运行环境,更多内容可以可以查阅微软官方文档. 安装 . ...
.Net C# 阿拉伯数字转为中文金额数字
一个练习,将阿拉伯数字转为中文金额数字,针对包含整数的金额有问题代码: public string ReturnStr(string inputNum) { ", }; string[] ...
利用反射(Reflection)处理对象
创建一个学生类: public class Student { public int Id { set; get; } public string Name { set; get; } public ...
django def validate_column和validate
VIewDemo class RegUserSet(mixins.CreateModelMixin,viewsets.GenericViewSet): serializer_class = RegUs ...
vsftp -samba-autofs
摘要: 1.FTP文件传输协议,PAM可插拔认证模块,TFTP简单文件传输协议. 注意:iptables防火墙管理工具默认禁止了FTP传输协议的端口号 2.vsftpd服务程序三种认证模式?三种认证模 ...
ActionBarSherlock（一）在Eclipse中如何引入ActionBarSherlock和它的例子？
ActionBarSherlock,是一个开源的Actionbar项目(http://actionbarsherlock.com/download.html).为什么我们要用它呢?谷歌已经不强制要求厂 ...
Android性能测试－内存
前言: 近阶段都在探索android性能测试方面的东西,其中一个很重要的指标就是内存.对于内存,主要是一些gc是不是及时,或者说一些引用有没有及时释放,有没有导致oom或者内存持续增加导致卡顿,有没有 ...
深入了解java虚拟机（JVM）第八章常见的jvm调优策略
一般来说,jvm的调优策略是没有一种固定的方法,只有依靠我们的知识和经验来对项目中出现的问题进行分析,正如吉德林法则那样当你已经把问题清楚写出来,就已经解决了一半.虽然JVM调优中没有固定的策略,但是 ...
Windows server 2008启动remote dosktop services服务报错1079
原创欢迎转载,届时请注明出处报错场景今天,刚开始启动win server的远程连接服务(remote desktop services)时该服务可以正常启动,然后选择了 “计算机--> ...
form-inline+form-group 实现表单横排显示（Bootstrap）
运行后的效果如下: 使用时要注意如下: 如果form元素有form-line修饰,那么form-group 所修饰的元素内部只能包含一个元素,否则,不会达到预期效果

原生javascript实现分页效果+搜索功能

原生javascript实现分页效果+搜索功能的更多相关文章

随机推荐

热门专题