`
annan211
  • 浏览: 459398 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

jquery 分页

 
阅读更多
jquery 和 java 后台代码 将查询到的数据 返回并分页

第一步 js函数

  var mobile = $.sysop.kit.getUrlValue('callingno');
			var userId = $.sysop.kit.getUrlValue('workno');
			var password = $.sysop.kit.getUrlValue('password');
			var calledNo = $.sysop.kit.getUrlValue('calledno');
			$('#mobile').attr("value",mobile);
// 上面几句代码 是通过请求路径(url) 获取参数值
			/*
			 * 搜索
			 */
			function searchRecodeInfo(page,disR){						
				var fn = arguments.callee;//$('#f_2').serialize() + 'mobile='+mobile+
				var req = 'mobile='+mobile+'&page='+(page||1)+'&displayRecord='+(disR=disR||10)+'&rand='+Math.random();//默认10									
				$.post("/data/searchRecodeInfoList.do", req, function(json) {	
					if(json.success !== true){
						//提示报错
						alert(json.message);
					} else{				
						var count 	= json.object.count,
						list 		= json.object.lists,
						p 			= json.object.page,
						pCount 		= json.object.pageCount;
																
						var $tbody = $('#J_tbody'), $box = $('#box');	
						var html = '';
						$.each(list,function(i,n){
							var status_class = "issues_l1";
							if(n.status == 1){
								status_class = "closed";
							}							
							var acceptedTime = (n.acceptedTime == null)?"--":new Date(n.acceptedTime).Format("yyyy-MM-dd hh:mm:ss");
							var handleTime = (n.handleTime == null)?"--":new Date(n.handleTime).Format("yyyy-MM-dd hh:mm:ss");
							// lastProcessResult 最终处理结果       recodeType  记录类型
							var lastProcessResult = n.lastProcessResult == 1?"未处理":n.lastProcessResult == 2?"处理成功":"处理失败";
							var recodeType = n.recodeType==1?"一般业务咨询":n.recodeType==2?"潜在风险类":n.recodeType==3?"投诉":"开户咨询";
							var text = "<tr class='" + status_class + "'><td><a href='/recodeInfo/recodeInfoEdit.jspx?recodeId=" + n.recodeId + 
							"'>"+n.memberName + "</a>"+'</td>' +
							'<td>'+acceptedTime+'</td>'+
							'<td>'+handleTime+'</td>'+								
							'<td>' + n.acceptMan + '</td>' +
							'<td>'+n.thecontent+'</td>'+
							'<td>'+n.followUpsituation+'</td>'+								
							'<td>' + lastProcessResult + '</td>' +
							'<td>'+recodeType+'</td>'+
							'<td>'+n.remark+'</td>'+								
							'</tr>';						
							if(null != text && text != ""){ 					
								html += text; 					
							}
						});
						$tbody.html(html);
						var sort = $('#tr_head').find('td');
						$('#count').html(" | 记录数("+count+")");					
						$('#comeMobileCount').text(count);
						//分页
						var $pag=$box.find('.paginationbar'),$dis=$box.find('.displayNum');
						$.sysop.pagination.init($pag,p,pCount,10,function(num){
							fn(num,disR);
						});
						//显示数目
						$.sysop.pagination.displayNum($dis,disR,function(){
							fn(1,this.innerHTML.slice(0,-1));
						});					
					}
				});
			}
			
  

第二部 默认执行
 $(function(){
					// $("#memberSex").attr("value",$("#sex").val());
					 // 请求来电历史列表
					 searchRecodeInfo($.crm.getPageSize(), true);					
				 });


第三部

$.crm = {
		isSuperAdmin:function(){
			if($.crm.getCurrentUserAccount() == 'linyudi' ||
					$.crm.getCurrentUserAccount() == 'sushuirong' ||
					$.crm.getCurrentUserAccount() == 'huangchaodong' ||
					$.crm.getCurrentUserAccount() == 'lidandan'){
				return true;
			}else{
				return false;
			}
		},
		/*
		 * 取单页的显示数量
		 */
		getPageSize:function(){
			pageSize = $('#displayNum_cont span.cur').text().split('条')[0];
			if(null != pageSize || pageSize != ""){
				return parseInt(pageSize);
			}else{
				return 10;
			}			
		},
		/**
		 * 取当前Cookie值
		 * 
		 */
		getCookieVal : function(name){
			var cookie=document.cookie;
			var offset=cookie.indexOf(name+'=');
			if(offset==-1) return '';
			var sIndex= cookie.indexOf ("=", offset)+1;
			var eIndex = cookie.indexOf (";", offset);
			if (eIndex == -1) eIndex = cookie.length;
			return unescape(cookie.slice(sIndex, eIndex));
		},
		
		/**
		 * 取当前系统的用户名
		 * 
		 */
		getCurrentUserAccount: function() {
			var user_name = $.ims.getCookieVal('jm_privilege_user_name');	
			return user_name;
		},


这里是 html 页面 用于存放列表
<div class="cont" id="box">
							<table class="cyan" id="over_view_table">
								<thead>
									<tr id='tr_head'>
										<td class="col1 sort issues_l1 ">来电客户姓名</td>
										<td class="col1 sort issues_l1 ">受理时间</td>
										<td class="col1 sort issues_l1 ">处理时间</td>
										<td class="col1 sort issues_l1 ">受理座席</td>
										<td class="col1 sort issues_l1 ">致电内容</td>
										<td class="col1 sort issues_l1 ">跟进处理情况</td>
										<td class="col1 sort issues_l1 ">最终处理结果</td>
										<td class="col1 sort issues_l1 ">记录类型</td>
										<td class="col1 sort issues_l1 ">备注</td>
									</tr>
								</thead>
								<tbody id="J_tbody">

								</tbody>
							</table>
							<div id="paginationbar" class="paginationbar"></div>
							<!--分页导航-->
							<div id="displayNum" class="displayNum"></div>
							<!--每页显示数目导航-->
							<div class="clear"></div>
						</div>


第四部 就是 Java后台代码处理
@MethodResourceDesc(name = "搜索来电历史列表")
	@RequestMapping(value = "/data/searchRecodeInfoList.do")
	@ResponseBody	
	public Result searchRecodeInfo(HttpServletRequest request,HttpServletResponse response){
		Result result = new Result();
		try{
			Query query = CRMQueryHelper.makeSearchRecodeInfoQuery(
					RequestHelper.getQueryFields(request, RecodeInfo.ACCEPTMAN),
					RequestHelper.getQueryFields(request, RecodeInfo.MEMBERACCOUNT),
					RequestHelper.getQueryFields(request, RecodeInfo.MEMBERNAME),
					RequestHelper.getQueryFieldsInt(request, RecodeInfo.RECODETYPE),
					RequestHelper.getQueryFieldsInt(request, RecodeInfo.SERIZECLASS),
					RequestHelper.getQueryFields(request, RecodeInfo.DISTRIBUTORNAME),
					RequestHelper.getQueryFields(request, RecodeInfo.MOBILE),
					RequestHelper.getQueryFields(request, RecodeInfo.MEMBERTYPE),
					RequestHelper.getQueryFieldsDate(request, "begin", "yyyy-MM-dd"),
					RequestHelper.getQueryFieldsDate(request, "end", "yyyy-MM-dd"),
					RecodeInfo.ACCEPTEDTIME, 
					Order.ASCENDING
					);		
			int allCount = (int)recodeService.count(query);			
			int pageSize = RequestHelper.getPageSize(request);
			
			if(0 == pageSize){
				pageSize = 20;
			}
						
			List<RecodeInfo> list = recodeService.listRecodeInfo(
					query.skip(
							(RequestHelper.getPageIndex(request) - 1) * pageSize
							).limit(pageSize)
							);
			
			PagingVO pagingObject = new PagingVO();
			pagingObject.setPageCount((allCount + pageSize) / pageSize);
			pagingObject.setPage(RequestHelper.getPageIndex(request));
			pagingObject.setCount(allCount);
			pagingObject.setLists(list);
			result.setCode(ResultCode.SUCCESS);
			result.setObject(pagingObject);	
					
		}catch(Exception e){
			result.setMessage(e.getMessage());
			logger.error(e.getMessage());
		}					
		return result;
	}


下面相应的代码 附加  jar包太大
分享到:
评论

相关推荐

    jQuery分页插件设置分页内容显示数量的分页代码

    本篇文章将详细讲解如何使用jQuery分页插件来设置分页内容显示的数量。 首先,我们需要选择一个适合的jQuery分页插件。有许多开源的选项可供选择,例如jQuery Pagination Plugin、jQuery UI Paginator、Bootstrap-...

    jQuery分页插件(实例详尽,简单易用

    jQuery分页插件是网页开发中常用的一种工具,它能够帮助开发者轻松地在大量数据中实现页面的分段展示,提高用户体验,同时减轻服务器负担。本文将深入探讨jQuery分页插件的工作原理、优势以及如何在实际项目中进行...

    jquery分页插件结合jsp实例

    本教程将详细介绍如何使用jQuery分页插件与JavaServer Pages(JSP)结合,实现一个高效的分页功能。我们将重点讨论jQuery分页插件jPagination的使用方法,以及它与JSP的集成。 首先,`jQuery`是一种轻量级的...

    jQuery分页

    jQuery分页是网页开发中常用的一种技术,用于处理大量数据的显示,特别是在用户需要浏览多页内容时。这种技术能够将大块数据分成若干小部分,每次只加载一部分到页面上,提高页面加载速度,优化用户体验。jQuery分页...

    jQuery分页插件 很实用

    在本教程中,我们将深入探讨jQuery分页插件的使用方法、核心功能和优点。 首先,jQuery分页插件的工作原理是通过JavaScript库jQuery来动态加载和展示页面内容。当用户点击分页按钮时,插件会向服务器发送请求,获取...

    jQueryPager(JQuery分页插件pagination实现Ajax分页)

    jQueryPager是一款轻量级的jQuery分页插件,它允许开发者通过Ajax无刷新的方式实现网页数据的分页加载。此插件名为`pagination`,在CSDN等技术交流平台上被广泛讨论和分享。 **1. jQuery与Ajax** jQuery是一个强大...

    jquery分页插件-内有演示说明

    **jQuery分页插件**是Web开发中常用的一种工具,用于在大量数据中实现高效的页面导航,提升用户体验。本资源包含一个演示说明,使得理解和应用变得更加直观和简单。以下将详细解析jQuery分页插件的核心知识点及其...

    .net 类的JQuery分页.net 类的JQuery分页

    在.NET开发中,jQuery分页是一种常见的用于网页数据展示的技术,尤其在大数据量的列表或者表格中,分页能够提高用户体验,避免一次性加载过多数据导致页面加载缓慢。本项目主要探讨了如何在.NET环境中结合jQuery实现...

    jquery分页插件带总数分页代码

    本知识点将详细讲解如何使用jQuery分页插件实现带总数的分页代码。 首先,我们需要一个分页插件。这里提到的"jquery分页插件带总数分页代码"可能是指包含总条数显示功能的插件,例如"jQuery Pagination Plugin with...

    自己写的jQuery分页根据json分页

    在IT行业中,jQuery分页是一种常见的网页数据展示技术,它能有效地管理大量数据,提高用户体验。本项目名为“自己写的jQuery分页根据json分页”,表明这是一个使用jQuery库实现的自定义分页功能,该功能依赖于JSON...

    简单实用的jquery分页插件

    要实现jQuery分页,我们首先需要引入jQuery库。确保在HTML文件中包含以下代码,以便在页面中使用jQuery: ```html &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; ``` 接着,选择一个合适的...

    五款漂亮的jquery分页插件

    以下是对"五款漂亮的jquery分页插件"的详细分析: 1. **Bootstrap Pagination** Bootstrap是广泛使用的前端框架,它自带的Pagination组件简洁而实用。这款jQuery分页插件具有响应式设计,可以自适应不同设备的屏幕...

    jQuery分页插件jPagination 超实用

    jQuery分页插件jPagination是Web开发中一个非常实用的工具,它可以帮助开发者轻松地在大量数据中实现分页功能,提升用户体验。jPagination利用了jQuery的强大功能,以简洁的API设计,使得分页功能的集成变得简单易行...

    jQuery分页插件页码跳转代码.zip

    jQuery分页插件是实现这一功能的强大工具,它简化了JavaScript代码,让开发者可以快速实现动态分页效果。本资源"jQuery分页插件页码跳转代码.zip"提供了实现这一功能的代码示例。 首先,我们需要了解jQuery分页的...

    简单的jQuery分页插件下载.zip

    **jQuery分页插件简介** 在网页开发中,分页是一种常见的数据展示方式,它能够帮助用户有效地浏览大量数据,避免一次性加载过多内容导致页面响应变慢或内存消耗过大。jQuery是一个轻量级的JavaScript库,它简化了...

    jQuery分页排序插件.zip

    jQuery分页排序插件是前端开发中常用的工具,它极大地提升了网页数据展示的用户体验,尤其在处理大量数据时。这款插件允许用户对HTML结构进行排序、分页和过滤,无需复杂的后端处理,减轻了服务器负担,同时也提高了...

    jquery分页大全

    **jQuery分页插件概述** 在网页开发中,分页是一种常见的数据展示方式,它能够有效地组织大量数据,提高用户体验。jQuery,一个流行的JavaScript库,提供了丰富的插件和方法来实现分页功能。"jQuery分页大全"这个...

    JS+Jquery分页插件

    总结来说,JS+jQuery分页插件通过利用jQuery库的强大功能,结合CSS样式表,可以轻松实现网页的高效分页功能,提高用户在浏览大量数据时的体验。对于前端开发者而言,理解并掌握这种插件的使用和实现原理,有助于提升...

    jquery分页

    分页,并使用jquery ajax传数据。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。...

Global site tag (gtag.js) - Google Analytics