jQuery插件select2利用ajax高效查询大数据列表（可搜索、可分页）
select2是一款jQuery插件，是普通form表单select组件的升级版。
可以定制搜索、远程数据集（Remote data，本篇主要介绍点）、无限滚动（数据分页功能，这一点很妙）、还有很多高端的参数设置（有需要的下次介绍）。
内置了40种国际化语言，不过这里我们只需要用到中文。
同时支持现代和传统浏览器内置，甚至包括惹人不高兴的IE8。
那么，现在让我们开始一段select2的奇幻之旅吧！
一、惊艳的效果，来一睹为快吧
本地实战结果
二、导入css和js到网站上
1.使用CDN，节省自己网站的流量
第三步、Java端接收参数并返回结果集，不用我强调，这步很重要
分页参数的转换，需要和
前台select2进行匹配，下文放
代码
BaseConditionVO vo = getBaseConditionVOForTable(request);
vo.addParams("username",StrUtil.getUTF8String(request.getParameter("username")));
vo.addParams("uid",uid);
// 封装结果集，和
前台select2也是匹配的。
PageGrid page = createPageGrid(this.membersMapper.getPromoterList(vo,vo.createRowBounds()),vo,this.membersMapper.searchPromoterTotalCount(vo));
// 以json格式写入到response
out(page,response);
}
接下来，把关键的源码贴出来，可能和你的项目不吻合，但可以参考。
mo = new HashMap
();
public int getPageNum() {
return pageNum;
}
public void setPageNum(int pageNum) {
this.pageNum = pageNum;
}
public int getNumPerPage() {
return numPerPage > 0 ? numPerPage : PAGE_SHOW_COUNT;
}
public void setNumPerPage(int numPerPage) {
this.numPerPage = numPerPage;
}
public String getOrderField() {
return orderField;
}
public void setOrderField(String orderField) {
this.orderField = orderField;
}
public String getOrderDirection() {
return "desc".equals(orderDirection) ? "desc" : "asc";
}
public void setOrderDirection(String orderDirection) {
this.orderDirection = orderDirection;
}
public int getTotalCount() {
return totalCount;
}
public void setTotalCount(int totalCount) {
this.totalCount = totalCount;
}
public int getStartIndex() {
int pageNum = this.getPageNum() > 0 ? this.getPageNum() - 1 : 0;
return pageNum * this.getNumPerPage();
}
public RowBounds createRowBounds() {
RowBounds ro = new RowBounds(this.getStartIndex(),this.getNumPerPage());
return ro;
}
/**
* @Title: addParams
* @Description: 添加查询条件
* @param key
* @param value
*/
public void addParams(String key,Object value) {
this.getMo().put(key,value);
}
/**
* @Title: getParams
* @Description: 获取查询条件
* @param key
* @return
*/
public Object getParams(String key) {
return this.getMo().get(key);
}
/**
* @return the mo
*/
public Map getMo() {
return mo;
}
/**
* @param mo
* the mo to set
*/
public void setMo(Map mo) {
this.mo = mo;
}
}
selec2的分页和Java端分页参数匹配
显示多少行
int sizes = StrUtil.parseStringToInt(req.getParameter("rows"));
// 排序
String sortOrder = StrUtil.getString(req.getParameter("sord"));
String sortCol = StrUtil.getString(req.getParameter("sidx"));
vo.setNumPerPage(sizes);
vo.setPageNum(currentPage);
vo.setOrderField(sortCol);
vo.setOrderDirection(sortOrder);
return vo;
}
Java端到select2端的数据封装
MysqL获取的数据源和PageGrid进行转换匹配
mybatis的分页，超简单，只要设置了createRowBounds，mybatis就会自动为你分页，这个就厉害了。
sql语句，这里的关键点是必须要回传id（m.uid as id）到select2.
order by m.username DESC
你是不是没看见MysqL的分页limit，嗯，这里无须关注，这就是框架要为我们做的事情。
总数
count(0)就好
out输出到response中
到这，select2的remote功能在代码部分就完全贴出来完了。
不过，我最后还是要强调几个点：
1.分页的参数Java端和select2一定要对照起来。
2.回传的数据一定要传递一个id回来，否则回来的列表不能选中，为什么呢？调查select2的源码可以知道。
删除的aria-selected，而aria-selected恰好又是列表选中的关键
属性。
// 这个就是个坑，只能这么说，select2给出的api上完全不讲这点，我去！！！！！！！
if (data.id == null) {
delete attrs['aria-selected'];
}
......
}
3.form表单如何获取select2的值？答案是，1.返回结果集必须有id，2.input标签上必须要name属性。
4.如何自定义inputMessage呢？
在select2.js中找到以下代码，注意注释部分
select2.js中defaults中增加上inputMessage
然后在zh-CN.js文件中修改inputTooShort方法
增加inputMessage
} else {
var t = e.minimum - e.input.length,n = "请再输入至少" + t + "个字符";
return n
}
},
以上所述是小编给大家介绍的jQuery插件select2利用ajax高效查询大数据列表（可搜索、可分页）。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/ajax/39158.html
