方案一：layui下拉框分页插件

https://fly.layui.com/jie/29002/

此插件我用了下浏览器缓存有问题，而且当下拉框数据量过万后，会一直渲染不出来，期待后期作者优化

如图下拉框效果：

引入js和css 

    
     
    
                        
      
        
       下拉框        
       
         　　　　　　　　//layui原生下拉框支撑不了大数据           <%--  
                        请选择                                     selected="selected" >${sapSupplier.cardCode}                                 --%> 　　　　　　　　//这个是下拉框分页的样式，这个插件也是有问题滴，看着用              
        
            
        
         
       
    
      
                     
      
        
       
            
        保存            
        重置        
       
    
      
     

　　　　
     
            
     
 　　　　1.name 填你需要渲染的字段，新增和编辑重新渲染都是靠这个name 　　　　2. value 渲染的code 　　　　3.url和平常我们写ajax访问的后台接口一样

//url后台接口    @RequestMapping(value = "findAllSupplier")    Map
     
       findAllSupplier() {                Map
      
        map = new HashMap<>();　　　　　//数据库对应的实体集合        List
       
         sapSuppliers = sapSupplierService.findAll();        //我们需要返回前端的json实体集合        List
        
          selectPageJsons = new ArrayList<>();        if(sapSuppliers != null && sapSuppliers.size() > 0) {            for(SapSupplier sapSupplier : sapSuppliers) {                SelectPageJson selectPageJson = new SelectPageJson();                selectPageJson.setCode(sapSupplier.getCardCode());                selectPageJson.setValue(sapSupplier.getCardName());                selectPageJsons.add(selectPageJson);            }        }        map.put("code", 0);        map.put("data", selectPageJsons);        map.put("count", selectPageJsons.size());        map.put("msg", "成功");        return map;    } 　　返回的数据格式类似这样： 　　
        
       
      
     

{

"code": 0,

"msg": "",

"count": 16,

"data": [//SelectPageJson 集合

　code:"",

　value:"";

]

}

/**   * @Description: layui 分页下拉框插件json格式* @date: 2019年4月19日 下午5:28:16 */public class SelectPageJson {        private String code;        private String value;    public String getCode() {        return code;    }    public void setCode(String code) {        this.code = code;    }    public String getValue() {        return value;    }    public void setValue(String value) {        this.value = value;    }            }

 关键字搜索的jpa对应的sql

/**

* @Description: CardName模糊查询

* @date: 2019年4月26日 上午11:49:20

*/

@Query(value="SELECT card_code FROM sap_supplier s WHERE LOCATE(?1, s.card_name)>0 and s.delete_mark = false ORDER BY s.create_date",nativeQuery=true)

List<String> findListByCardName(String cardName);

 

LOCATE(?1, s.card_name)>0 模糊查询

 

 

方案二：下拉框嵌入分页表格，

tableSelect 下拉表格选择器

https://fly.layui.com/extend/tableSelect/#doc

 

    
     
    
                        
      
        
       客户/供应商        
       
            
        
                
         //下拉框样式                 
         //传入后台的code            
        
        
       
    
      
           
      
        
       
            
        保存            
        重置        
       
    
      
     
//缺少layui css等文件自己引入

java代码：

控制层

@RequestMapping(value="/findAllByPageAndLimit",method=RequestMethod.GET)    @ResponseBody    Map
     
       findAllByPageAndLimit(SapSupplierModel sapSupplierModel,int page,int limit) {        Map
      
        map = new HashMap<>();        Page
       
         p = sapSupplierService.findPage(sapSupplierModel, page, limit);                        List
        
          list = new ArrayList<>();        int a = 0;        for (SapSupplier sapSupplier : p.getContent()) {            a++;            if (sapSupplier != null) {                list.add(new SapSupplierXiaLaJson(sapSupplier,a));            }        }                map.put("code", 0);        map.put("data", list);        map.put("count", new Long(p.getTotalElements()).intValue());        map.put("msg", "成功");        return map;    }
        
       
      
     

 

实现层：

@Override    public Page
     
       findPage(SapSupplierModel sapSupplierModel, int currentPage, int pageSize) {        Specification
      
        specification = new Specification
       
        () {            @Override            public Predicate toPredicate(Root
        
          root, CriteriaQuery
          query,                                         CriteriaBuilder cb) {                List
         
           list = new ArrayList<>();                Predicate deleteMark = cb.equal(root.get("deleteMark").as(Boolean.class), false);                list.add(deleteMark);                if (!CommonUtil.isEmpty(sapSupplierModel.getCardName())) {                    Predicate cardName = cb.like(root.get("cardName"), "%" + sapSupplierModel.getCardName().trim() + "%");                    list.add(cardName);                }                Predicate[] predicates = new Predicate[list.size()];                return cb.and(list.toArray(predicates));            }        };        //排序        List
          
            orders = new ArrayList<>(); orders.add(new Order(Direction.ASC, "createDate")); Sort sort = Sort.by(orders); Pageable pageable = PageRequest.of(currentPage - 1, pageSize, sort); return sapSupplierRepository.findAll(specification, pageable); }
          
         
        
       
      
     

Page
     
       findPage(SapSupplierModel sapSupplierModel, int currentPage, int pageSize);
     

持久层：

Page
     
       findPage(SapSupplierModel sapSupplierModel, int currentPage, int pageSize);