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主頁