摘要:分页分页保存当前页调用第几页每页条数审批状态审批类型审批类型费用类别每页显示个数当前状态没有费用单当前页数,每页显示个数,总条数查询失败提交异常遍历列表每页开始的序列号为每个显示个数查看查看修改,查看,删除修改查看删除
1.css
/*分页*/ #page { width: 1250px; text-align: center; font-size: 16px; margin-top: 20px; } #page ul { overflow: hidden; display: inline-block; } ul, li { list-style: none; } #page ul li { width: 34px; height: 34px; background-color: #f1f1f1; margin: 0 10px; line-height: 34px; ; float: left; position: relative; border-radius: 100%; cursor: pointer; } #page .prve, #page .next { width: 34px; height: 34px; background-color: #f1f1f1; margin: 0 10px; float: left; position: relative; border-radius: 100%; cursor: pointer; } #page .prve i, #page .next i { width: 9px; height: 17px; display: block; background: url(../img/page.png) no-repeat; position: absolute; top: 8.5px; left: 12.5px; } #page .prve i { background-position: 0 -25px; } #page .next i { background-position: -17px -25px } #page li.active { background-color: #19a9d5; color: #fff; } /*/分页*/
2.js
// 保存 当前页 var PAGING=1; function pages(a,b,c){ var par=$("#page"); par.empty(); var yesum=Math.ceil(c/b); var html=""; html+="
3.调用
ajaxPage(PAGING); function ajaxPage(page){ /*page_now 第几页 rows 每页条数 status 审批状态 reimbur_type 审批类型 is_connect 审批类型 type_id 费用类别*/ PAGING=page; var sum=10; // 每页显示个数 $.ajax({ type:"post", url: "{:U("ReimburApi/myReimbur")}", data:{ "page_now":page, "rows":sum, }, dataType:"json", success:function(data){ //debugger console.log(data); //return false; if(data.status==0){ if (data.data.lists.length==0) { $(".biaoge tbody").html(""); } else{ setFydList(data.data.lists,data.data.total_num,PAGING); pages(page,sum,data.data.total_num); // 当前页数,每页显示个数,总条数 } }else{ console.log("查询失败!") console.log(data.msg) } }, error:function(data){ console.log("提交异常"); } }); } //遍历列表 function setFydList(data,count,page){ startNum = count - (page - 1) * 10; // 每页开始的序列号,5为每个显示个数 $(".biaoge tbody").empty(); for (var i=0;i 当前状态没有费用单! "; html += " "+data[i].create_time+" "; html += ""+data[i].admin_name+" "; html += ""+data[i].reimbur_type+" "; html += ""+data[i].item_connect+" "; html += ""+data[i].sale_name+" "; html += ""+data[i].type_title+" "; html += ""+data[i].total_amount+" "; html += ""+data[i].describe+" "; html += ""+data[i].current_status+" "; html += ""+data[i].rec_update_time+" "; html += ""+data[i].remark+" "; html += ""; if (data[i].caozuo_status==1) { //查看 html += " 查看"; } else if (data[i].caozuo_status==3){ //修改,查看,删除 html += " 修改"; html += " 查看"; html += " 删除"; } html += " "; html += ""; $(".biaoge tbody").append(html); } }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/92165.html
摘要:信息列表循环赋值分页信息部分这一步是实现无刷新分页的重点,用到了的通信,通过与数据库的交互,将获取到的数据写到模板中,替换掉之前的数据集,达到分页的目的。 前言 thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面,这种翻页的用户体验显然是不太理想的,我们希望每次翻页只刷新我们想要的数据集部分的数据,这样我们很容易想到ajax异步通信,用ajax与数据库(本人在开发过程中使用...
摘要:下载演示地址本文使用,通过实例讲解如何实现无刷新分页效果。当数据完全加载完毕后,调用函数生成分页,也可用程序来实现分页。页面可在分页的属性中获取。 下载演示地址:http://www.erdangjiade.com/js...本文使用jQuery+Ajax+PHP+Mysql,通过实例讲解如何实现Ajax无刷新分页效果。 #ul_lists以列表的形式展现数据,信...
摘要:下载演示地址本文使用,通过实例讲解如何实现无刷新分页效果。当数据完全加载完毕后,调用函数生成分页,也可用程序来实现分页。页面可在分页的属性中获取。 下载演示地址:http://www.erdangjiade.com/js...本文使用jQuery+Ajax+PHP+Mysql,通过实例讲解如何实现Ajax无刷新分页效果。 #ul_lists以列表的形式展现数据,信...
摘要:下载演示地址本文使用,通过实例讲解如何实现无刷新分页效果。当数据完全加载完毕后,调用函数生成分页,也可用程序来实现分页。页面可在分页的属性中获取。 下载演示地址:http://www.erdangjiade.com/js...本文使用jQuery+Ajax+PHP+Mysql,通过实例讲解如何实现Ajax无刷新分页效果。 #ul_lists以列表的形式展现数据,信...
摘要:下载演示地址本文使用,通过实例讲解如何实现无刷新分页效果。当数据完全加载完毕后,调用函数生成分页,也可用程序来实现分页。页面可在分页的属性中获取。 下载演示地址:http://www.erdangjiade.com/js...本文使用jQuery+Ajax+PHP+Mysql,通过实例讲解如何实现Ajax无刷新分页效果。 #ul_lists以列表的形式展现数据,信...
阅读 1924·2021-11-19 09:40
阅读 2132·2021-10-09 09:43
阅读 3293·2021-09-06 15:00
阅读 2809·2019-08-29 13:04
阅读 2766·2019-08-26 11:53
阅读 3512·2019-08-26 11:46
阅读 2319·2019-08-26 11:38
阅读 390·2019-08-26 11:27