核心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加载远程数据示例的更多相关文章

  1. jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据

    jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() ...

  2. Jquery.ajax 详细解释 通过Http请求加载远程数据

    首先请看一个Jquery.ajax的例子 $.ajax({ type: "GET", url: "/api/SearchApi/GetResults", dat ...

  3. 通过 HTTP 请求加载远程数据(ajax,axios)

    1.http://blog.csdn.net/liaoxiaojuan233/article/details/54176798 (Axios(JS HTTP库/Ajax库)) 2.https://ww ...

  4. ExtJS ComboBox同时加载远程和本地数据

    ExtJS ComboBox同时加载远程和本地数据 原文:http://gblog.hbcf.net/index.php/archives/233 ComboBox比较特殊需求,将远程数据和本地数据同 ...

  5. Tree:加载列表数据

    Tree控件,需要提供一个树形的JSON数据,才能正常显示. 通常,开发者在后台可以这样做: 1)从数据库查询出一个列表数据 2)在后台,将列表数据转换为树形数据 3)通过JSON方式返回 在前台页面 ...

  6. xss如何加载远程js的一些tips

    在早期 , 对于xss我们是这样利用的 <script>window.open('http://xxx.xxx/cookie.asp?msg='+document.cookie)</ ...

  7. Swift - 网页控件(UIWebView)加载本地数据,文件

    使用UIWebView加载本地数据或资源有如下三种方式: 1,使用loadHTMLString方法加载HTML内容 2,使用loadRequest方法加载本地资源(也可用于加载服务器资源) 3,先将内 ...

  8. Mego开发文档 - 加载关系数据

    加载关系数据 Mego允许您使用模型中的导航属性来加载相关数据对象.目前只支持强制加载数据对象.只有正确配置了关系才能加载关系数据,相关内容可参考关系配置文档. 加载对象属性 您可以使用该Includ ...

  9. WinForm ListView不分页加载大量数据

    WinForm的ListView在加载大量数据时会出现闪烁的问题,同时数据加载很慢.如果你的列表中有超过千条的数据且不做特殊处理还是用普通的ListView.Items.Add(),估计你的用户得抱怨 ...

随机推荐

  1. Filter应用之-自动登录

    自动登录,是为了帮助用户多次使用这个网页时,不用再次输入用户名和密码就可以登录. 是指用户将用户的登录信息,人,保存到本地的文件中Cookie中. Name,value – 声明时 new Cooki ...

  2. javascript双等号引起的类型转换

    隐性类型转换步骤 一.首先看双等号前后有没有NaN,如果存在NaN,一律返回false. 二.再看双等号前后有没有布尔,有布尔就将布尔转换为数字.(false是0,true是1) 三.接着看双等号前后 ...

  3. nginx pcre错误

    以上错误是因为pcre的路径指定的不对,--with-pcre模块应该指向的是pcre解压后的源码包,而不是pcre的安装路径. ]$./configure --prefix=/data01/logs ...

  4. Etcd安全配置之Basic Auth认证

    <中小团队落地配置中心详解>文章中我们介绍了如何基于Etcd+Confd构建配置中心,最后提到Etcd的安全问题时说了可以使用账号密码认证以达到安全访问的目的,究竟该如何开启认证以及怎么设 ...

  5. 使用epublib解析epub文件(章节内容、书籍菜单)

    链接地址https://blog.csdn.net/sonnyching/article/details/47407549

  6. NoSQL数据库--简介

    一.What's NoSQL? NoSQL,全称是”Not Only Sql”,指的是非关系型的数据库.这类数据库主要有这些特点:非关系型的.分布式的.开源的.水平可扩展的.原始的目的是为了大规模we ...

  7. 【angular5项目积累总结】文件下载

    download() { const token = localStorage.getItem('token'); let headers: HttpHeaders = new HttpHeaders ...

  8. unity 中的协程

    //The coroutine will continue after all Update functionshave been calledon the next frame. ; //Conti ...

  9. IDEA相关设置

    今天终于放弃了MyEclipse,在使用MyEclipse中的各种心酸就不多说,总结成一句话就是:珍爱生命,远离MyEclipse. 换到IDEA后,安装了IdeaVim插件,支持vim的操作,提高的 ...

  10. 【基于初学者的SSH】struts2 环境配置

    01:导入Jar包 下载地址:http://struts.apache.org/ 将下好的jar包放导WEB-INF下的lib文件夹下 02:创建Action:com.action.LoginActi ...