selectPage组件下拉分页动态加载数据源

最新推荐文章于 2024-09-12 14:36:17 发布

Javaxiaobaismc

最新推荐文章于 2024-09-12 14:36:17 发布

阅读量2.3k

点赞数

分类专栏：踩坑与填坑文章标签： selectPage 下拉分页动态加载数据

本文链接：https://blog.csdn.net/javaxiaobaismc/article/details/106444176

版权

踩坑与填坑专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前情摘要：

有个小伙伴需要完成一个需求，就是点击输入框就动态加载一些数据下拉出来给客户选择。这个看上去很简单，他直接用了js去拼接HTML的option标签。这个在数据少只有一百多的测试环境上是没啥问题的，就是下拉列表有点长，基本都可以满足需求。但是上了生产环境，数据量一下子去到了十几万，界面上全部加载出来就挂掉了。无奈小伙伴去了其他组支援了，这个优化就落到了我的头上。

破题思路：

既然数据量太大，那肯定不能一次性加载这么多出来，自然而然的想到了分页和动态加载。经验丰富的大佬帮我找了个功能强大的组件selectPage，说这个用起来比较简单，实现起来比较方便，还甩了一个链接过来：https://terryz.gitee.io/selectpage/。

噢原来是selectPage的中文官网，里面详细地介绍了该怎么用这个组件。根据我的需求，大佬还用心的找到了这个：

说这个就可以实现分页和动态加载数据源了，只需要在data那里写上我的去到后台查询数据库的URL和在后台拼装返回的分页数据为json格式就行了。

开干：

根据大佬的方向，我首先导入了需要的静态文件：

自己鼓捣了一个晚上，数据一直拼装不对，也没对数据进行分页处理，所以页面一直返回说连接服务器时发生错误！

我以为是有什么静态文件还没引入或者版本不对才会报这个错误。第二次见到大佬，大佬一看就知道我的问题所在，让我写个分页的返回数据然后处理下格式。一试果然可以了：

输入框每次有东西输入都会传到后台去查数据库，后台的数据每次只返回十条到页面上，翻页的时候才会重新再回到后台去拿数据。这样就避免了数据一次性加载过多而出现卡慢的情况，下面是一些关键代码：

引入文件：

<script type="text/javascript" src="${basePath}/js/jquery-1.11.2.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="${basePath}/js/selectpage.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="${basePath}/css/selectpage.css" />

HTML代码

<input type="text" id="selectPage" name="bank">

JS代码：

$('#selectPage').selectPage({//固定格式
			    showField : 'bankName',//下拉展示出来的名字
		    	keyField : 'bankCode',//名字的值
 		    	searchField : 'selectPageText',//传进去的查询参数
 		    	dropButton : false,//关闭三角符号
		   	 	pageSize : 10,//每页10条
			    data : '${basePath}/account/refundInfo_findBankDrctCodes.do',//后台获取数据的方法
			    params : function(){
					var type = $("#accountcType  option:selected").val();
					return {
					"type" : type//另外传的参数
				};},
				
			    eAjaxSuccess : function(d){//固定格式
			        var result;
			        if(d) result = d.values.gridResult;
			        else result = undefined;
			        return result;
		    	}
			});
// 		$('#selectPage_text').removeAttr("class");
    });

后台代码：

	public String findBankDrctCodes(){
		JSONObject jsonObject = new JSONObject();
		JSONObject jsonObject2 = new JSONObject();
		JSONObject jsonObject3 = new JSONObject();
		pager.setPageSize(pageSize);
		pager.setCurrentPage(pageNumber);
			pager = refundInfoService.findBankDrctCode(pager,selectPageText,type);//分页sql
			bankdrctcodes = pager.getResultList();
			
			jsonObject.put("pageSize", pageSize);
			jsonObject.put("pageNumber", pageNumber);
			jsonObject.put("totalRow", pager.getTotalSize());//数据总数
			jsonObject.put("totalPage", pager.getTotalPage());//页码
			jsonObject.put("list",bankdrctcodes);//展示的数据
			jsonObject2.put("gridResult", jsonObject);//固定格式
			jsonObject3.put("values", jsonObject2);//固定格式
			outMessage(jsonObject3.toString());
			return null;
	}