select2加载远程数据示例
核心js
$("#query_pack_code").select2({
language: "zh-CN",
allowClear: true,
width: "150px",
placeholder: "请选择",
ajax: {
url: "monitor/historyQuery/getPackCodeOptions.mvc",
dataType: 'json',
delay: 250,
data: function (params) {
params.offset = 10; //显示十条
params.page = params.page || 1; //页码
return {
name: params.term,
page: params.page,
offset: params.offset
};
},
cache: false,
/*
*@params res 返回值
*@params params 参数
*/
processResults: function (res, params) {
var users = res.data;
var options = [];
for (var i = 0, len = users.length; i < len; i++) {
var option = {
"id": users[i]["serialNo"],
"text": (users[i]["serialNo"])
};
options.push(option);
}
return {
results: options,
pagination: {
more: (params.page * params.offset) < res.total
}
};
},
escapeMarkup: function (markup) {
return markup;
},
minimumInputLength: 1
}
});
后台使用的springmvc+mybatis 分页使用的插件com.github.miemiedev.mybatis.paginator.domain.PageBounds;
/**
*
* <p>Description: 下拉框异步加载</p>
* @param res 请求
* @return 结果集
*/
@RequestMapping(value="/getPackCodeOptions.mvc")
@ResponseBody
public Object getPackCodeOptions(HttpServletRequest res){
//分页
PageBounds pageBounds;
pageBounds = new PageBounds();
//查询条件
String name = res.getParameter("name");
//每页显示条数
Integer offset = Integer.valueOf(res.getParameter("offset"));
//当前页码
Integer page = Integer.valueOf(res.getParameter("page"));
if (page == 1) {
page = 0;
} else {
page = (page - 1) * offset;
}
pageBounds.setLimit(offset);
pageBounds.setPage(page);
Map<String, Object> params;
params = new HashMap<String, Object>();
params.put("name", name);
EntityPageBean<TmPackSerial> pageBean;
Map<String, Object> dataMap=new HashMap<String, Object>();
try {
pageBean = this.tmPackSerialService.getPackCodeOptions(params, pageBounds);
dataMap.put("total", pageBean.getiTotalRecords());
dataMap.put("recordsFiltered", pageBean.getiTotalRecords());
dataMap.put("data", pageBean.getResults());
} catch (DaoException e) {
logger.error("查询出错:", e);
return null;
}
return dataMap;
}
效果图:

参考资料: select2主页
select2加载远程数据示例的更多相关文章
- jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据
jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() ...
- Jquery.ajax 详细解释 通过Http请求加载远程数据
首先请看一个Jquery.ajax的例子 $.ajax({ type: "GET", url: "/api/SearchApi/GetResults", dat ...
- 通过 HTTP 请求加载远程数据(ajax,axios)
1.http://blog.csdn.net/liaoxiaojuan233/article/details/54176798 (Axios(JS HTTP库/Ajax库)) 2.https://ww ...
- ExtJS ComboBox同时加载远程和本地数据
ExtJS ComboBox同时加载远程和本地数据 原文:http://gblog.hbcf.net/index.php/archives/233 ComboBox比较特殊需求,将远程数据和本地数据同 ...
- Tree:加载列表数据
Tree控件,需要提供一个树形的JSON数据,才能正常显示. 通常,开发者在后台可以这样做: 1)从数据库查询出一个列表数据 2)在后台,将列表数据转换为树形数据 3)通过JSON方式返回 在前台页面 ...
- xss如何加载远程js的一些tips
在早期 , 对于xss我们是这样利用的 <script>window.open('http://xxx.xxx/cookie.asp?msg='+document.cookie)</ ...
- Swift - 网页控件(UIWebView)加载本地数据,文件
使用UIWebView加载本地数据或资源有如下三种方式: 1,使用loadHTMLString方法加载HTML内容 2,使用loadRequest方法加载本地资源(也可用于加载服务器资源) 3,先将内 ...
- Mego开发文档 - 加载关系数据
加载关系数据 Mego允许您使用模型中的导航属性来加载相关数据对象.目前只支持强制加载数据对象.只有正确配置了关系才能加载关系数据,相关内容可参考关系配置文档. 加载对象属性 您可以使用该Includ ...
- WinForm ListView不分页加载大量数据
WinForm的ListView在加载大量数据时会出现闪烁的问题,同时数据加载很慢.如果你的列表中有超过千条的数据且不做特殊处理还是用普通的ListView.Items.Add(),估计你的用户得抱怨 ...
随机推荐
- Android六大基本布局
一.基本理论Android六大基本布局分别是:线性布局LinearLayout.表格布局TableLayout.相对布局RelativeLayout.层布局FrameLayout.绝对布局Absolu ...
- EF CodeFirst Mirgration
新建类库Models,加入以下三个类: Product: public class Product { /// <summary> /// 编号 /// </summary> ...
- Android4.0 Launcher 源码分析3——WorkSpace结构(滑动)
3.WorkSpace结构(滑动) 桌面的左右滑动功能主要是在PagedView类中实现的,而WorkSpace是PagedView类的子类,所以会继承PagedView中的方法.当我们的手指点击Wo ...
- SPSS学习系列之SPSS Text Analytics是什么?
不多说,直接上干货! IBM® SPSS® Text Analytics 是一个IBM® SPSS® Modeler 完全集成内插式插件,它采用了先进语言技术和Natural Language Pro ...
- OpenGL-非实时渲染与实时混合使用(有图有真相)
视频教程请关注 http://edu.csdn.net/lecturer/lecturer_detail?lecturer_id=440 一个朋友在问(我也曾经遇到过这样的事情),尤其是在地理信息上面 ...
- 前端通信:ajax设计方案(二)---集成轮询技术
上一篇文章介绍了ajax技术核心方法,和跨域的问题(只要后台支持跨域默认post就可以),这篇文章讲解一下使用ajax实现的轮询技术,至于iframe,SSE服务器单向推送,以及webSocket双工 ...
- go语言接受者的选取
何时使用值类型 1.如果接受者是一个 map,func 或者 chan,使用值类型(因为它们本身就是引用类型).2.如果接受者是一个 slice,并且方法不执行 reslice 操作,也不重新分配内存 ...
- Impala 使用的端口
下表中列出了 Impala 是用的 TCP 端口.在部署 Impala 之前,请确保每个系统上这些端口都是打开的. 组件 服务 端口 访问需求 备注 Impala Daemon Impala 守护进程 ...
- Druid连接池(三)
十二.Druid缓存 连接Oracle数据库,打开PSCache,在其他的数据库连接池都会存在内存占用过多的问题,Druid是唯一解决这个问题的连接池. Oracle数据库下PreparedState ...
- elasticSearch6源码分析(1)启动过程
1.找到bin目录,下面有elasticSearch的sh文件,查看执行过程 exec \ "$JAVA" \ $ES_JAVA_OPTS \ -Des.path.home=&qu ...