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

转载于:https://www.cnblogs.com/xieshuang/p/7267340.html