列表查询数据交互简写形式

/** User: ChanceYu* Date: 2016/05/04*/require(['common', 'dialog', 'iCheck', 'validate','jquery-form','jquery-timepicker'], function(API) {var View = {init: function() {this.popHover();this.requestData();this.dataUp();this.search();},/**************  逻辑简单的写法 开始*******************************************///设置一个 全局变量  默认没有查询条件    第一页  10条var data ={ pageNo: 1, pageSize: 10};var pageNum =0;//定义一个全局变量  用于存放总页数//设置一个 方法 用来  请求  smsIndexList   接口  function getSmsList(){$.ajax({url: ctx + "/sms/smsIndexList.do",type: "post",data:data,success: function (data) {handleData(data.smsList,data.total);//调用处理数据函数 用来 处理  循环  和分页}})}//设置一个 方法 用来  处理请求的数据function handleData(values,total){//geMath.ceil()进一法取整数pageNum=Math.ceil(parseInt(total)/10);   //总页数存入全局变量$(".totalPage").text(pageNum);//总页数$(".dangPage").text(data.pageNo);//当前页数  取全局变量data 中的    pageNoif(pageNum==0){  //如果 总页数为0就是 没有数据    都不用遍历数据//                    var nullshow='<tr><td colspan="9"><div class="v-noresult"><p>对不起！暂无数据！</p></div></td></tr>'//                    $('#tdBody').html(nullshow);//   $(".totalPage").text(0);//总页数 变为0// $(".dangPage").text(0);//当前页数 变为0$(".pagition").hide();}else{$.each(values, function (i, result) {var item = "<tr><td>" + result.createTimeStr + "</td><td>" + result.smsType + "</td><td>" + result.smsStatus + "</td><td>" + result.dayNum + "</td><td><a class='color-blue j-edit'  href='/sms/smsDetail.do?date="+result.createTimeStr+"&smsTypeId="+result.smsTypeId+"' >" + "查看详情" + "</a></td></tr>";// href='${ctx}/sms/toSmsDetailPage.do'$('#tdBody').append(item);});}$(".action a").click(goPage); // 绑定点击事件  输入 页数跳转到指定页  方法$(".next").click(goNext); //绑定 下一页$(".paging .prev").click(goPrev);//绑定上一页}//输入 页数跳转到指定页  方法function goPage(){var searchPage=$(".input-text").val();//判断页数  不等于空   和  不大于总页数     pageNum是全局变量这里可以使用if(searchPage!=="" && searchPage<=pageNum){data.pageNo=searchPage;//修改全局变量里面的  pageNo  其它条件不变getSmsList();调用函数 请求ajax}else{alert('请输入正确的页数');}}//下一页 方法function goNext(){var presentPage=parseInt($(".dangPage").text());presentPage=presentPage+1;//判断页数 不大于总页数     pageNum是全局变量这里可以使用if( presentPage<=pageNum){data.pageNo=presentPage;//修改全局变量里面的  pageNo  其它条件不变getSmsList();调用函数 请求ajax$(".dangPage").text(presentPage);}else{alert('没有下一页了');}    }//上一页 方法function goPrev(){var presentPage=parseInt($(".dangPage").text());presentPage=presentPage-1;//判断页数 是否小于0if( presentPage<=0){data.pageNo=presentPage;//修改全局变量里面的  pageNo  其它条件不变getSmsList();调用函数 请求ajax$(".dangPage").text(presentPage);}else{alert('没有上一页了');}    }//进入页面  默认 没有任何条件    requestData:function(){getsmslist(); }//点击查询的  动作search:function(){//修改 全局变量data 里面的 数据 将 查询的 条件 加入   同时pageNo 变为1$(".search").click(function(){var startTime= $("#start").val(); //获取开始时间var endTime=$("#end").val(); //获取结束时间var searchStatus=$(".searchStatus").val(); //获取状态var searchType=$(".searchType option:selected").val();//获取类型//设置全局变量data  前面 不要有var     设置请求筛选条件 和 页数data = {"startDate":startTime,"endDate":endTime,"smsTypeId":searchType,"smsStatus":searchStatus,"pageNo":1,"pageSize":10};getSmsList();  //调用函数 请求ajax}}/**************  逻辑简单的写法 结束*******************************************//*套餐剩余总量 hover信息*/popHover:function(){$(".progress").popover({ trigger: "manual" , html: true, animation:false}).on("mouseenter", function () {var _this = this;   // 这里的this触发的dom,需要存起来 否则在下面 .popover的逻辑中this会变为弹出的dom$(this).popover("show");$(".popover").on("mouseleave", function () {$(_this).popover('hide');});}).on("mouseleave", function () {var _this = this;setTimeout(function () {if (!$(".popover:hover").length) {$(_this).popover("hide");}}, 300);});},
/*协议弹窗*/dataUp:function(){if(!result){var bojbox=document.getElementById('box');window.onload=setTimeout(function(){bojbox.style.display='block'},1000);// document.getElementById('close').onclick=function(){//     bojbox.style.display = 'none';// }function pop(){bojbox.style.display ='block'}$("#statemenNo").click(function(){window.location.href='/login/skip2IndexPage.do';})$("#statementYes").click(function(){$.ajax({url: ctx + "/sms/addAgreement.do",type:"get",data:'',success: function(data) {$("#box").hide()}})});}},/*列表默认加载*/requestData:function(){$.ajax({url: ctx + "/sms/smsIndexList.do",type: "get",data: {"pageNo":"1","pageSize":"10"},success: function (data) {console.log(data);$.each(data.smsList, function (i, result) {var item = "<tr><td>" + result.createTimeStr + "</td><td>" + result.smsType + "</td><td>" + result.smsStatus + "</td><td>" + result.dayNum + "</td><td><a class='color-blue j-edit'  href='/sms/smsDetail.do?date="+result.createTimeStr+"&smsTypeId="+result.smsTypeId+"' >" + "查看详情" + "</a></td></tr>";// href='${ctx}/sms/toSmsDetailPage.do'$('#tdBody').append(item);});/*分页  */var pageNum=parseInt(parseInt(data.total)/10+1);$(".totalPage").text(pageNum);if(pageNum<1){var nullshow='<tr><td colspan="9"><div class="v-noresult"><p>对不起！暂无数据！</p></div></td></tr>'$('#tdBody').html(nullshow);}$(".action a").click(function(){var searchPage=$(".input-text").val();if(searchPage!==""){$.ajax({url: ctx + "/sms/smsIndexList.do",type: "get",data: {pageNo: searchPage,pageSize: 10},success:function(data){$("#tdBody").empty();$.each(data.smsList, function (i, result) {var item = "<tr><td>" + result.createTimeStr + "</td><td>" + result.smsType + "</td><td>" + result.smsStatus + "</td><td>" + result.dayNum + "</td><td><a class='color-blue j-edit' >" + "查看详情" + "</a></td></tr>";//href='${ctx}/sms/toSmsDetailPage.do'$('#tdBody').append(item);});}})$(".dangPage").text(searchPage)}});$(".next").click(function(){var presentPage=parseInt($(".dangPage").text());var totalPage=parseInt($(".totalPage").text());if(presentPage < totalPage){$(".dangPage").text(presentPage+1);var nextPage=parseInt($(".dangPage").text());$.ajax({url: ctx + "/sms/smsIndexList.do",type: "get",data: {pageNo: nextPage,pageSize: 10},success: function (data) {$("#tdBody").empty();$.each(data.smsList, function (i, result) {var item = "<tr><td>" + result.createTimeStr + "</td><td>" + result.smsType + "</td><td>" + result.smsStatus + "</td><td>" + result.dayNum + "</td><td><a class='color-blue j-edit' >" + "查看详情" + "</a></td></tr>";//href='${ctx}/sms/toSmsDetailPage.do'$('#tdBody').append(item);});}})}if(parseInt($(".dangPage").text()) >1){$(".prev").css('display','block');}else{$(".prev").css('display','none');}});$(".paging .prev").click(function(){var newPage=$(".dangPage").text();$('.dangPage').text(newPage-1);var xPage=parseInt($('.dangPage').text());if(xPage==1){$(".prev").css('display','none');}$.ajax({url: ctx + "/sms/smsIndexList.do",type: "get",data: {pageNo: xPage,pageSize: 10},success: function (data) {$("#tdBody").empty();$.each(data.smsList, function (i, result) {item = "<tr><td>" + result.createTimeStr + "</td><td>" + result.smsType + "</td><td>" + result.smsStatus + "</td><td>" + result.dayNum + "</td><td><a class='color-blue j-edit' href='${ctx}/sms/toSmsDetailPage.do'>" + "查看详情" + "</a></td></tr>";$('#tdBody').append(item);});}})});}})},/*点击查询*/search:function(){$(".search").click(function(){$("#pager-container").empty();var template='<div class="pagination clearfix">'+'<div class="page">'+'<div class="paging">'+'<a class="prev" href="javascript:void(0);" style="display:none" ><i></i></a>'+'<span class="text page-view-num"><em class="dangPage">1</em> /<i class="totalPage"></i></span>'+'<a class="next" href="javascript:void(0);"><i></i></a>'+'</div>'+'<div class="number">'+'<input class="input-text" type="text"></div>'+'<div class="action"><a href="javascript:void(0);">跳转</a></div>'+'</div>'+'</div>'$("#pager-container").html(template);var startTime= $("#start").val();var endTime=$("#end").val();var searchStatus=$(".searchStatus").val();var searchType=$(".searchType option:selected").val();$.ajax({url: ctx + "/sms/smsIndexList.do",type: "post",data: {startDate:startTime,endDate:endTime,smsTypeId:searchType,smsStatus:searchStatus,pageNo:1,pageSize:10},success: function (data) {console.log(data);$("#tdBody").empty();$.each(data.smsList, function (i, result) {var item = "<tr><td>" + result.createTimeStr + "</td><td>" + result.smsType + "</td><td>" + result.smsStatus + "</td><td>" + result.dayNum + "</td><td><a class='color-blue j-edit'  href='/sms/smsDetail.do?date="+result.createTimeStr+"&smsTypeId="+result.smsTypeId+"' >" + "查看详情" + "</a></td></tr>";$('#tdBody').append(item);});/*分页  */var pageNum=parseInt(parseInt(data.total)/10+1);$(".totalPage").text(pageNum);if(pageNum<1){var nullshow='<tr><td colspan="9"><div class="v-noresult"><p>对不起！暂无数据！</p></div></td></tr>'$('#tdBody').html(nullshow);}$(".action a").click(function(){var searchPage=$(".input-text").val();if(searchPage!==""){$.ajax({url: ctx + "/sms/smsIndexList.do",type: "get",data: {startDate:startTime,endDate:endTime,smsTypeId:searchType,smsStatus:searchStatus,pageNo: searchPage,pageSize: 10},success:function(data){$("#tdBody").empty();$.each(data.smsList, function (i, result) {var item = "<tr><td>" + result.createTimeStr + "</td><td>" + result.smsType + "</td><td>" + result.smsStatus + "</td><td>" + result.dayNum + "</td><td><a class='color-blue j-edit' >" + "查看详情" + "</a></td></tr>";//href='${ctx}/sms/toSmsDetailPage.do'$('#tdBody').append(item);});}})$(".dangPage").text(searchPage)}});$(".next").click(function(){var presentPage=parseInt($(".dangPage").text());var totalPage=parseInt($(".totalPage").text());if(presentPage < totalPage){$(".dangPage").text(presentPage+1);var nextPage=parseInt($(".dangPage").text());$.ajax({url: ctx + "/sms/smsIndexList.do",type: "get",data: {startDate:startTime,endDate:endTime,smsTypeId:searchType,smsStatus:searchStatus,pageNo: nextPage,pageSize: 10},success: function (data) {$("#tdBody").empty();$.each(data.smsList, function (i, result) {var item = "<tr><td>" + result.createTimeStr + "</td><td>" + result.smsType + "</td><td>" + result.smsStatus + "</td><td>" + result.dayNum + "</td><td><a class='color-blue j-edit' >" + "查看详情" + "</a></td></tr>";//href='${ctx}/sms/toSmsDetailPage.do'$('#tdBody').append(item);});}})}if(parseInt($(".dangPage").text()) >1){$(".prev").css('display','block');}else{$(".prev").css('display','none');}});$(".paging .prev").click(function(){var newPage=$(".dangPage").text();$('.dangPage').text(newPage-1);var xPage=parseInt($('.dangPage').text());if(xPage==1){$(".prev").css('display','none');}$.ajax({url: ctx + "/sms/smsIndexList.do",type: "get",data: {startDate:startTime,endDate:endTime,smsTypeId:searchType,smsStatus:searchStatus,pageNo: xPage,pageSize: 10},success: function (data) {$("#tdBody").empty();$.each(data.smsList, function (i, result) {var item = "<tr><td>" + result.createTimeStr + "</td><td>" + result.smsType + "</td><td>" + result.smsStatus + "</td><td>" + result.dayNum + "</td><td><a class='color-blue j-edit' href='${ctx}/sms/toSmsDetailPage.do'>" + "查看详情" + "</a></td></tr>";$('#tdBody').append(item);});}})});}});})},};View.init();
});

转载于:https://www.cnblogs.com/jinsuo/p/8980734.html

列表查询数据交互简写形式相关推荐

学习swing鼠标点击事件心得体会_西门子COMOS软件开发定制学习8-查询列表间的数据交互...
本篇在西门子COMOS软件开发定制学习6-管理界面定制基础上定制,简单介绍两个查询列表之间的数据交互. 实现效果: 在左侧列表中选择某一设备,右侧列表自动根据所选设备,显示该设备相关的设计图纸(如P ...
【阿里内部应用】基于Blink为新商业调控打造实时大数据交互查询服务
基于Blink为新商业调控打造实时大数据交互查询服务案例与解决方案汇总页: 阿里云实时计算产品案例&解决方案汇总从IT到DT.从电商到新商业,阿里巴巴的每个细胞都存在大数据的DNA,如何挖 ...
前后端数据交互|分页查询|表格-双向绑定|get和post的区别
目录 1 前后端数据交互 1.1 前端代码部署在前端服务器 1.2 前端代码在浏览器展示(只展示页面,没有数据)----自给自足 1.3 前端/浏览器请求后端数据 (后端死数据)----给 ...
干货 | 万字长文全面解析GraphQL，携程微服务背景下的前后端数据交互方案
作者简介古映杰,携程研发高级经理,负责前端框架和基础设施的设计.研发与维护.开源项目react-lite和react-imvc作者. 前言随着多终端.多平台.多业务形态.多技术选型等各方面的发展, ...
开源开放 | 图数据交互可视化分析框架 InteractiveGraph v0.3 版本发布
图数据交互可视化分析框架 InteractiveGraph 日前发布 v0.3 版本,下载地址:https://github.com/grapheco/InteractiveGraph/release ...
JSON数据交互和RESTful支持
JSON数据交互和RESTful支持 SpringMVC在数据绑定的过程中,需要对传递数据的格式和类型进行转换,它既可以转换String类型的数据,也你能够转换JSON等其他类型的数据. JSON数据 ...
Springboot+Vue实现简单的前端后分离数据交互
目录一,前后端分离介绍二,与传统单体结构的比较 2.1,传统单体结构开发 2.2,前后端分离结构开发三,简单实现前后端数据交互 1,准备的环境及工具 2,开发步骤 2.1,后端部分 2.2,前端 ...
图数据交互可视化分析框架InteractiveGraph v0.3版本发布
图数据交互可视化分析框架 InteractiveGraph日前发布v0.3版本,下载地址:https://github.com/grapheco/InteractiveGraph/releases/t ...
【Ajax】实现网页与服务器之间的数据交互
Per aspera ad astra 循此苦旅,以觅繁星通过这篇文章带你了解网页与服务器之间的数据交互的原理与使用方法. 一.服务器的基本概念在实现数据交互之前先了解服务器的概念,有助于我们之后 ...

列表查询数据交互简写形式

列表查询数据交互简写形式相关推荐

最新文章

热门文章