一、概述

首先，我们要明确为何需要分页技术，主要原因有以下：

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实现分页效果+搜索功能的更多相关文章

  1. 纯原生javascript实现分页效果

    随着近几年前端行业的迅猛发展,各种层出不穷的新框架,新方法让我们有点眼花缭乱. 最近刚好比较清闲,所以没事准备撸撸前端的根基javascript,纯属练练手,写个分页,顺便跟大家分享一下 functi ...

  2. 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  3. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  4. Vue下简单分页及搜索功能

    最近利用Vue和element ui仿写了个小页面,记一哈分页和搜索功能的简单实现. 首页   emmmm..... 搜索框输入..... 搜索完成 数据是直接写在这里面的: cardPhoto:[ ...

  5. 原生js显示分页效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. 原生JavaScript实现新手引导效果（第二个玩具）

    慕课地址https://www.imooc.com/video/169 预览效果: <!DOCTYPE html> <html> <head> <meta c ...

  7. 使用JavaScript实现分页效果

    应公司需求,有时需要制作静态页面网站,而一旦涉及到文章的分页,实现起来非常麻烦,自己又刚入门,对js不是很熟悉,所以就拿来练练手. 首先页面结构如下,分别展示数据跟分页: <!DOCTYPE h ...

  8. 原生js实现分页效果（带实例）

    小小插件(静态分页) 效果图: 首先实现简单功能: <!DOCTYPE html> <html> <head> <meta http-equiv=" ...

  9. Javascript之简单按钮搜索功能

    学习JavaScript我觉得真实的感觉就是可以任意设计,“没有做不到只有想不到!”即使简单,但是任何东西的复杂都是从简单.基础开始的!这是我自己做的一个超简单的"搜索引擎"按钮, ...

随机推荐

  1. 浅析C#中的IEquatable<T>接口

    1.引言 首先我们先来看看IEquatable<T>接口的出现解决了什么问题. 我们知道,Object基类的Equals方法存在两个明显的问题.一是缺乏类型安全性,二是对于值类型而言需要装 ...

  2. WPF 内部Template 动画板 无法冻结此 Storyboard 时间线树供跨线程使用

    解决此问题,需要一定的想象力. 换个思路即可 大体是 使用Tag或者别无用的可以输入数值的属性,或者附加属性也可以的.来绑定到你要动画的属性 当然这个过程中要使用转换器了 我给出一个关于Button ...

  3. Delphi XE2 编译ralease版本,无法添加UAC解决方法

    我今天把一个原来是Delphi2007的工程升级到了Delphi XE2,在编译ralease版本时候,发现无法添加UAC,我觉得可能是升级的原因,随后我用XE2新建了一个工程,但是在编译raleas ...

  4. 375. 猜数字大小 II leetcode java

    题目: 我们正在玩一个猜数游戏,游戏规则如下: 我从 1 到 n 之间选择一个数字,你来猜我选了哪个数字. 每次你猜错了,我都会告诉你,我选的数字比你的大了或者小了. 然而,当你猜了数字 x 并且猜错 ...

  5. java下载文件注意点

    前台: 不建议使用ajax,可以使用window.location.href 后台: 三个参数--> response path filename--filename如果要防止乱码,可以用Str ...

  6. php性能优化三（PHP语言本身）

    0.用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量,单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的“函数”(译注:PHP手册 ...

  7. 【javascrpt】——图片预览和上传，兼容IE 9-

    下载DEMO:https://github.com/CaptainLiao/zujian/tree/master/Upload 对于现代浏览器来说,要实现图片预览非常简单: 1.fileReader. ...

  8. [转] 红帽7搭建Zabbix监控

    zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快速定位/解决 ...

  9. Linux 中排除掉筛选的文件

    以下命令以网站目录www为例做介绍,有时候更新网站的时候需要保留比如图片目录,或者其他目录就需要这样的操作 实例一: 删除文件夹内所有文件只保留一个文件命令 [root@linuxzgf www]# ...

  10. Python Socket 编程示例 Echo Server

    简评:我们已经从「Python Socket 编程概览」了解了 socket API 的概述以及客户端和服务器的通信方式,接下来让我们创建第一个客户端和服务器,我们将从一个简单的实现开始,服务器将简单 ...