一、概述

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

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. 调整Linux最大打开文件数

    #!/bin/bash ## 文件数限制 ulimit -n ulimit -Sn ulimit -Hn ## fs.nr_open,进程级别 ## fs.file-max,系统级别 ## 最大文件描 ...

  2. cesium随笔 — 隐藏三维场景下方版权信息

    上图中的版权信息相信很多人都想去掉,那么下面我将介绍一种简单粗暴的方法将其隐藏起来: .cesium-widget-credits { display: none!important; visibil ...

  3. 控制 MediaElement（播放、暂停、停止、音量和速度）

    控制 MediaElement(播放.暂停.停止.音量和速度) WPF中对于多媒体的支持非常完整,一般都是通过MediaElement来实现的. http://msdn.microsoft.com/z ...

  4. 论文研读之Spinnaker

    论文:Using Paxos to Build a Scalable, Consistent, and Highly Available Datastore Motivation 可扩展性: 随着数据 ...

  5. c语言第六次作业---结构体&文件

    1.本章学习总结 1.1思维导图 1.2学习体会 这次应该是本学期最后一次博客了,总结一下这个学期的学习,一开始就基础薄弱还一直畏难一直懒惰,不想去解决问题导致后面问题越来越多就觉得学习越来越难,后面 ...

  6. kolla-ansible 重新部署 ceph 遇到的问题

    问题 TASK [ceph : Fetching Ceph keyrings] ******************************************* fatal: [controll ...

  7. Android Studio设置字体

    一,点"Settings"按钮,调出配置界面: 然后如图找到 Editor-colors&font-font ,默认的不让修改 所以先点击save as  随便起个名字 , ...

  8. 域名可以解析(ping域名可以获取正确ip)，服务器本地telnet 域名+端口 无法连接，通过建立本地虚拟域名指定的方法解决该问题

    环境: 服务器A,网管已为A开通外网ip,且设置有映射域名:假如内网ip为172.16.2.6.外网ip为123.123.123.123.域名为test.sstest.com 现象: 服务器A,tel ...

  9. PDF转HTML的方法。

    上个项目客户提出了一个需求,要求把PDF格式的文件转化为HTML格式. 上网查了一下,要么使用软件处理,要么是HTML格式转化为PDF.因为涉及到图文识别问题,所以说仅仅依靠前端不能实现.在网上查了几 ...

  10. C语言奇淫技巧，字符串的三种表示方法，不会用不是合格的程序员

    1.在C语言中,是将字符串作为字符数组来处理的,字符串是逐个存放到数组元素中的 例如用一个一维的字符数组存放字符串"I am a boy.",如下代码: char c[12] = ...