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

JavaScript 前端之家
前端之家收集整理的这篇文章主要介绍了原生javascript实现分页效果+搜索功能，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

一、概述

分页技术，主要原因有以下：

分页可以提高客户体验度，适当地选择合适的数据条数，让页面显得更有条理，使得用户体验感良好，避免过多数据的冗余。

性能的需要。

搜索技术，主要原因有以下：

搜索功能，能准确的根据用户的关键字找到对应的例子，能更快速高效的找到自己需要的东西。

二、分页技术的实现过程

1.HTML代码：

<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;head</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;<a href="/tag/Meta/" target="_blank" class="keywords">Meta</a> </span><span style="color: #ff0000"&gt;charset</span><span style="color: #0000ff"&gt;="UTF-8"</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;title</span><span style="color: #0000ff"&gt;>骑马行天下demo</span><span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;title</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;link </span><span style="color: #ff0000"&gt;rel</span><span style="color: #0000ff"&gt;="stylesheet"</span><span style="color: #ff0000"&gt; href</span><span style="color: #0000ff"&gt;="css/reset.css"</span> <span style="color: #0000ff"&gt;/></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;link </span><span style="color: #ff0000"&gt;rel</span><span style="color: #0000ff"&gt;="stylesheet"</span><span style="color: #ff0000"&gt; href</span><span style="color: #0000ff"&gt;="css/index.css"</span> <span style="color: #0000ff"&gt;/></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;script </span><span style="color: #ff0000"&gt;src</span><span style="color: #0000ff"&gt;="js/jquery-3.3.1.min.js"</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;script</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;head</span><span style="color: #0000ff"&gt;></span>

<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;body</span><span style="color: #0000ff"&gt;></span>

    <span style="color: #008000"&gt;<!--</span><span style="color: #008000"&gt;库存管理-<a href="/tag/shouye/" target="_blank" class="keywords">首页</a></span><span style="color: #008000"&gt;--></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="rg-stock-manage"</span><span style="color: #0000ff"&gt;></span>
           <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="stock-manage-top"</span><span style="color: #ff0000"&gt; id</span><span style="color: #0000ff"&gt;="stockbacktop"</span><span style="color: #0000ff"&gt;></span>
                     <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="manage-top-right"</span><span style="color: #0000ff"&gt;></span>
                             <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="manage-search"</span><span style="color: #ff0000"&gt; style</span><span style="color: #0000ff"&gt;="display: none;"</span><span style="color: #0000ff"&gt;></span>
                                   <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;img </span><span style="color: #ff0000"&gt;src</span><span style="color: #0000ff"&gt;="img/search.png"</span> <span style="color: #0000ff"&gt;/></span>
                                   <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;input </span><span style="color: #ff0000"&gt;type</span><span style="color: #0000ff"&gt;="text"</span><span style="color: #ff0000"&gt; id</span><span style="color: #0000ff"&gt;="stock-searchlist"</span><span style="color: #ff0000"&gt; placeholder</span><span style="color: #0000ff"&gt;="2018-09-07"</span><span style="color: #0000ff"&gt;/></span>
                             <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
                             <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;a</span><span style="color: #0000ff"&gt;></span>
                                   <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;input </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="gopurchase"</span><span style="color: #ff0000"&gt; type</span><span style="color: #0000ff"&gt;="button"</span><span style="color: #ff0000"&gt; value</span><span style="color: #0000ff"&gt;="去采购"</span><span style="color: #0000ff"&gt;/></span>
                             <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;a</span><span style="color: #0000ff"&gt;></span>
                             <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;select </span><span style="color: #ff0000"&gt;id</span><span style="color: #0000ff"&gt;="payChanges"</span><span style="color: #ff0000"&gt; onchange</span><span style="color: #0000ff"&gt;="payChange()"</span><span style="color: #0000ff"&gt;></span>
                               <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;option </span><span style="color: #ff0000"&gt;value</span><span style="color: #0000ff"&gt;=""</span><span style="color: #0000ff"&gt;></span>全部<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;option</span><span style="color: #0000ff"&gt;></span>
                               <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;option </span><span style="color: #ff0000"&gt;value</span><span style="color: #0000ff"&gt;="已支付"</span><span style="color: #0000ff"&gt;></span>已支付<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;option</span><span style="color: #0000ff"&gt;></span>
                               <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;option </span><span style="color: #ff0000"&gt;value</span><span style="color: #0000ff"&gt;="待付款"</span><span style="color: #0000ff"&gt;></span>待付款<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;option</span><span style="color: #0000ff"&gt;></span>
                             <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;select</span><span style="color: #0000ff"&gt;></span>
                     <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
           <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
           <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="stork-manage-card"</span><span style="color: #0000ff"&gt;></span>
                     <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;ul </span><span style="color: #ff0000"&gt;id</span><span style="color: #0000ff"&gt;="txt-list"</span><span style="color: #0000ff"&gt;></span>
                            <span style="color: #008000"&gt;<!--</span><span style="color: #008000"&gt;库存管理列表</span><span style="color: #008000"&gt;--></span>
                     <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;ul</span><span style="color: #0000ff"&gt;></span>
           <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
           <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="stock-manage-bottom"</span><span style="color: #0000ff"&gt;></span>
                     <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="manage-bottom-right"</span><span style="color: #ff0000"&gt; id</span><span style="color: #0000ff"&gt;="stockbarcon"</span><span style="color: #0000ff"&gt;></span>
                         <span style="color: #008000"&gt;<!--</span><span style="color: #008000"&gt;<a href="/tag/fenye/" target="_blank" class="keywords">分页</a>按钮模块</span><span style="color: #008000"&gt;--></span>
                     <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
           <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>

<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;body</span><span style="color: #0000ff"&gt;></span>

<span style="color: #0000ff"></<span style="color: #800000">html<span style="color: #0000ff">>

2.js代码：

<div class="cnblogs_code">

    url:</span>"https://www.xxxx.cn/xxxxxx/xxxorders/",<span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;<a href="/tag/chaxun/" target="_blank" class="keywords">查询</a>订单接口</span>

<span style="color: #000000"> data: UserID,type:"get"<span style="color: #000000">,success:<span style="color: #0000ff">function<span style="color: #000000">(data){
<span style="color: #0000ff">var order =<span style="color: #000000"> JSON.parse(data).orderdetail;
<span style="color: #0000ff">var str = ""<span style="color: #000000">;
$(<span style="color: #0000ff">function<span style="color: #000000">(){
goPage(1,10);<span style="color: #008000">//<span style="color: #008000">分页(第几页，总页数)
<span style="color: #000000"> })
<span style="color: #008000">//<span style="color: #008000">库存管理
$("#txt-list"<span style="color: #000000">).empty();
.........
}})

分页功能采用的js代码如下：

<div class="cnblogs_code">

 itable = document.getElementById("txt-list" li = itable.getElementsByTagName('li' num = li.length; 
         totalPage = 0; 
         pageSize = psize; 显示行数
        
         (num / pageSize > parseInt(num /= parseInt(num / pageSize) + 1= parseInt(num / currentPage = pno; 
         startRow = (currentPage - 1) * pageSize + 1; 显示的行
         endRow = currentPage * pageSize; 显示的行
        endRow = (endRow > num) ?显示数据实现分页
         ( i = 1; i < (num + 1); i++ irow = li[i - 1 (i >= startRow && i <== "block"= "none"    </span><span style="color: #0000ff"&gt;var</span> tempStr =""<span style="color: #000000"&gt;;
    </span><span style="color: #0000ff"&gt;if</span> (currentPage > 1<span style="color: #000000"&gt;) {</span><span style="color: #000000"&gt;
        tempStr </span>+= "<a href=\"#stockbacktop\" class=\"a2\" onClick=\"goPage(" + (1) + "," + psize + ")\" class=\"paq-sy\"&gt;"<span style="color: #000000"&gt;;
        tempStr </span>+= "<input class=\"homepagea\" type=\"button\" value=\"首页\"/&gt;"<span style="color: #000000"&gt;;
        tempStr </span>+= "</a>"<span style="color: #000000"&gt;;
        tempStr </span>+= "<a href=\"#stockbacktop\" class=\"a3\" onClick=\"goPage(" + (currentPage - 1) + "," + psize + ")\"&gt;"<span style="color: #000000"&gt;;
        tempStr </span>+= "<input class=\"toppages\" type=\"button\" value=\"上一页\"/&gt;"<span style="color: #000000"&gt;;
        tempStr </span>+= "</a>"<span style="color: #000000"&gt;;
        tempStr </span>+= "<div class=\"somepages\"&gt;"<span style="color: #000000"&gt;;
        tempStr </span>+= "<span class=\"s1\"&gt;"+currentPage+"</span>"<span style="color: #000000"&gt;;
        tempStr </span>+= "<span class=\"s2\"&gt;&amp;nbsp;/&amp;nbsp;</span>"<span style="color: #000000"&gt;;
        tempStr </span>+= "<span class=\"s3\"&gt;"+totalPage+"</span>"<span style="color: #000000"&gt;;
        tempStr </span>+= "</div>"<span style="color: #000000"&gt;;
    } </span><span style="color: #0000ff"&gt;else</span><span style="color: #000000"&gt; {</span><span style="color: #000000"&gt;
        tempStr </span>+= "<a href=\"#stockbacktop\" class=\"a2\"&gt;"<span style="color: #000000"&gt;;
        tempStr </span>+= "<input class=\"homepagea\" type=\"button\" value=\"首页\"/&gt;"<span style="color: #000000"&gt;;
        tempStr </span>+= "</a>"<span style="color: #000000"&gt;;
        tempStr </span>+= "<a href=\"#stockbacktop\" class=\"a3\"&gt;"<span style="color: #000000"&gt;;
        tempStr </span>+= "<input class=\"toppages\" type=\"button\" value=\"上一页\"/&gt;"<span style="color: #000000"&gt;;
        tempStr </span>+= "</a>"<span style="color: #000000"&gt;;
        tempStr </span>+= "<div class=\"somepages\"&gt;"<span style="color: #000000"&gt;;
        tempStr </span>+= "<span class=\"s1\"&gt;"+currentPage+"</span>"<span style="color: #000000"&gt;;
        tempStr </span>+= "<span class=\"s2\"&gt;&amp;nbsp;/&amp;nbsp;</span>"<span style="color: #000000"&gt;;
        tempStr </span>+= "<span class=\"s3\"&gt;"+totalPage+"</span>"<span style="color: #000000"&gt;;
        tempStr </span>+= "</div>"<span style="color: #000000"&gt;;
    }

    </span><span style="color: #0000ff"&gt;if</span> (currentPage <<span style="color: #000000"&gt; totalPage) {
        tempStr </span>+= "<a href=\"#stockbacktop\" class=\"a4\" onClick=\"goPage(" + (currentPage + 1) + "," + psize + ")\"&gt;"<span style="color: #000000"&gt;;
        tempStr </span>+= "<input class=\"downpages\" type=\"button\" value=\"下一页\"/&gt;"<span style="color: #000000"&gt;;
        tempStr </span>+= "</a>"<span style="color: #000000"&gt;;
        tempStr </span>+= "<a href=\"#stockbacktop\" class=\"a5\" onClick=\"goPage(" + (totalPage) + "," + psize + ")\"&gt;"<span style="color: #000000"&gt;;
        tempStr </span>+= "<input class=\"endpagesz\" type=\"button\" value=\"尾页\"/&gt;"<span style="color: #000000"&gt;;
        tempStr </span>+= "</a>"<span style="color: #000000"&gt;;
    } </span><span style="color: #0000ff"&gt;else</span><span style="color: #000000"&gt; {
        tempStr </span>+= "<a href=\"#stockbacktop\" class=\"a4\"&gt;"<span style="color: #000000"&gt;;
        tempStr </span>+= "<input class=\"downpages\" type=\"button\" value=\"下一页\"/&gt;"<span style="color: #000000"&gt;;
        tempStr </span>+= "</a>"<span style="color: #000000"&gt;;
        tempStr </span>+= "<a href=\"#stockbacktop\" class=\"a5\"&gt;"<span style="color: #000000"&gt;;
        tempStr </span>+= "<input class=\"endpagesz\" type=\"button\" value=\"尾页\"/&gt;"<span style="color: #000000"&gt;;
        tempStr </span>+= "</a>"<span style="color: #000000"&gt;;
    }

    document.getElementById(</span>"stockbarcon").innerHTML =<span style="color: #000000"&gt; tempStr;

}

三.搜索功能实现

搜索功能有以下两种实现方法：

搜索法：

内容文字，在ul列表里面进行检索，显示出有关键字的那条或多条信息；

<div class="cnblogs_code">

搜索
$($("#stock-searchlist").bind('input propertychange',<span style="color: #0000ff">function<span style="color: #000000">() {

<span style="color: #0000ff">var insertVal = $(<span style="color: #0000ff">this<span style="color: #000000">).val();

$("#txt-list li").each(<span style="color: #0000ff">function<span style="color: #000000">() {

<span style="color: #0000ff">var paratime = $(<span style="color: #0000ff">this).children(".stork-card-top").children(".stork-card-top-con").children(".p2").children("span"<span style="color: #000000">).html();

<span style="color: #0000ff">if(paratime.indexOf(insertVal) < 0<span style="color: #000000">) {

$(<span style="color: #0000ff">this<span style="color: #000000">).hide();

$("#stock-searchlist").bind('propertychange input',<span style="color: #0000ff">function<span style="color: #000000"> () {

<span style="color: #0000ff">var intVal = $(<span style="color: #0000ff">this<span style="color: #000000">).val();

<span style="color: #0000ff">if(intVal.length<=0<span style="color: #000000">){

window.location.reload();

}

});

} <span style="color: #0000ff">else<span style="color: #000000"> {

$(<span style="color: #0000ff">this<span style="color: #000000">).show();

}

});

});


})

内容进行筛选，显示出有关键字的那条或多条信息；

"ul li").hide().filter(":contains('"+($("#payChanges").val())+"')"}

四.总结

分页和搜索功能，希望对大家有所帮助，有什么更好的方法欢迎在下面留言,共同进步。。。

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获
事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...
搞懂js中小数运算精度问题原因及解决办法
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...
搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提...
前端对base64编码的理解，原生js实现字符base64编码
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...
搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图...
js判断浏览器是否支持webGL
起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...
js判断undefined和null
js判断undefined js判断null js判断null和undefined
将文字自动转为banner打印形式的工具
http://patorjk.com/software/taag/
聊一聊 bootstrap 的轮播图插件
今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...
js实现图片无缝循环跑马灯
html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作