weUI之分页查询实现
程序员文章站
2022-03-11 07:53:15
本文旨在介绍移动端h5分页查询实现 1.前端html 前端基于weui 样式库实现 参考http://jqweui.com/ 1
view code
view code
view code
本文旨在介绍移动端h5分页查询实现
1.前端html
前端基于weui 样式库实现 参考
1 <div class="weui-search-bar" id="searchbar"> 2 <form class="weui-search-bar__form"> 3 <div class="weui-search-bar__box"> 4 <i class="weui-icon-search"></i> 5 <input type="search" class="weui-search-bar__input" id="searchinput" placeholder="搜索您想要的商品" required=required /> 6 <a href="javascript:" class="weui-icon-clear" id="searchclear"></a> 7 </div> 8 <label class="weui-search-bar__label" id="searchtext" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);"> 9 <i class="weui-icon-search" id="search"></i> 10 <span>搜索您想要的商品</span> 11 </label> 12 </form> 13 <button type="button" class="btn btn-info btn-xs" style="margin-left:5px" id="btn-search">搜索</button> 14 15 </div>
2.js前端分页
1 //全局变量 2 var load = false; // load为判断接口是否请求完成,防止多次触摸、多次点击导致接口的多次请求出错 3 var page = 1;//默认第一页 4 5 $(function () { 6 getdata(page, "/home/getprolistjson"); //初始化数据从第一页数据开始请求 7 }); 8 9 //请求后台数据 10 function getdata(page, url) { //请求接口的方法,方法带page,url两个参数。 11 $('#more').text('正在加载中...'); 12 $.ajax({ 13 url: url, //请求接口的url 14 type: 'get',//请求方式(post或get)默认为get 15 async: true, //默认情况下是true表示所有请求为异步请求,如果要为同步则用false 16 cache: false,//默认为false,设置为false将不会从浏览器缓存中加载请求信息。 17 datatype: "json", 18 data: { 19 'page': page, 20 'limit': 6, 21 'name': $("#searchinput").val() 22 }, 23 success: function (data) { //请求成功调用的回调函数 24 if (data.code == 0) { 25 $("#pagenum").val(parseint(data.currentpage) + 1); 26 showlist(data); 27 if (data.currentpage >= data.totalpage) { //这里判断接口数据是否到底部 28 load = true; 29 $("#more").html('已经到底了'); 30 } else if (data.currentpage < data.totalpage) { 31 load = false; 32 $("#more").html('查看更多'); 33 } 34 } 35 }, 36 error: function (error) { //请求失败调用的回调函数 37 console.log(error); 38 } 39 }); 40 } 41 //显示数据 42 function showlist(data) { //显示列表的html内容 43 for (var i = 0; i < data.list.length; i++) { 44 var html = "<li>" 45 html += "<a href='/home/proinfo?id=" + data.list[i].goods_id + "'>" 46 html += " <div class='proimg'><img src='" + data.list[i].img_url + "' /></div>"; 47 html += " </a>"; 48 html += " <div class='protxt'>"; 49 html += " <div class='name'>" + data.list[i].goods_name + "</div>"; 50 html += " <div class='wy-pro-pri'>¥<span>" + data.list[i].goods_price + "</span></div>"; 51 html += "</div>"; 52 html += "<div class='button_sp_area'><a href='javascript: ;' class='weui-btn weui_btn_mini weui-btn_primary' id='btn-mianfei'>免费领取</a></div>"; 53 $("#goodslist").append(html); 54 55 } 56 } 57 //继续加载按钮事件 ,点击按钮后请求换页的数据 58 $(document).on("click", '#more', function () { 59 if (load == false) { 60 $("#goodslist").append(html); 61 load = true; 62 $("#pagenum").val(1); 63 page = $("#pagenum").val(); 64 getdata(page, "/home/getprolistjson"); 65 } 66 }) 67 //搜索功能 68 $(document).on("click", "#btn-search", function () { 69 if (load == false) { 70 $("#goodslist").empty(); 71 load = true; 72 $("#pagenum").val(1); 73 page = $("#pagenum").val(); 74 getdata(page, "/home/getprolistjson"); 75 } 76 }); 77 78 //==============核心代码============= 79 //鼠标向下滚动加载下一页数据,或者移动端向下滑动加载下一页数据 80 var winh = $(window).height(); //页面可视区域高度 81 var scrollhandler = function () { 82 var pageh = $(document.body).height(); 83 var scrollt = $(window).scrolltop(); //滚动条top 84 var aa = (pageh - winh - scrollt) / winh; 85 if (aa < 0.02) {//0.02是个参数 86 if (load == false) { 87 load = true; 88 page = $("#pagenum").val(); 89 getdata(page, "/home/getprolistjson"); 90 } 91 92 } 93 } 94 //定义鼠标滚动事件 95 $(window).scroll(scrollhandler);
3.后端数据接口
后端实现比较简单,只要注意返回json数据格式的定义,这里只介绍下控制器实现代码
1 [httpget] 2 public actionresult getprolistjson(pagination pagination) 3 { 4 var ret = new 5 { 6 code = 0, 7 msg = "", 8 list = goodsapp.getlist(request["name"], pagination), 9 currentpage = pagination.page, 10 count = pagination.total, 11 totalpage= pagination.total/pagination.limit 12 }; 13 return content(ret.tojson()); 14 }
4.总结
1.首先定义请求参数,这里面参数是{'page': page,limit': 6,'name': $("#searchinput").val()}
2.确定哪些参数是从页面获取,比如这里面查询参数name;确定哪些参数是动态变化的,这里面是page
3.页面状态的变化,比如在这有两种状态,数据已加载完和未加载完
4.还有js方法的封装,注意单一职能原则,毕竟js也是面向对象的语言
推荐阅读
-
SqlServer参数化查询之where in和like实现详解
-
SqlServer参数化查询之where in和like实现之xml和DataTable传参介绍
-
SQL行号排序和分页(SQL查询中插入行号 自定义分页的另类实现)
-
存储过程实现(可带查询条件/万能分页/通用)
-
在Spring Boot中使用Spring-data-jpa实现分页查询
-
ASP.NET MVC5 实现分页查询的示例代码
-
IntelliJ IDEA中ajax开发实现分页查询示例
-
序列化表单为json对象,datagrid带额外参提交一次查询 后台用Spring data JPA 实现带条件的分页查询 多表关联查询
-
java使用插件pagehelper在mybatis中实现分页查询
-
MyBatis之自查询使用递归实现 N级联动效果(两种实现方式)