1、官网资料 https://terryz.oschina.io/selectpage/demo.html
2、使用方式（下面是搬砖）
1）、资源导入 在网页上引用css样式、js脚本等文件
<!-- 基础环境引用说明 --> <!-- jQuery 基础脚本引用 --> <script type="text/javascript" src="jquery.min.js" >< /script> <!-- 插件使用的样式表文件 --> <link rel="stylesheet" href="selectpage.css" type="text/css"> <!-- 插件核心脚本 --> <script type="text/javascript" src="selectpage.js" >< /script>2）、HTML代码
<!-- 设置文本框为插件基本元素 --> <input type="text" id="selectPage" >3）、Javascript初始化插件代码
//定义数组，在服务端返回的数据也以该格式返回：Array[{Object},{...}] var tag_data = [ {id:1 ,name:'Chicago Bulls',desc:'芝加哥公牛'}, {id:2 ,name:'Cleveland Cavaliers',desc:'克里夫兰骑士'}, {id:3 ,name:'Detroit Pistons',desc:'底特律活塞'}, {id:4 ,name:'Indiana Pacers',desc:'印第安纳步行者'} ]; //初始化插件 $('#selectPage').selectPage({ showField : 'desc', keyField : 'id', data : tag_data });3、为什么用它？
1）、可以拥有多种模式
2）、可以很容易的进行AJAX回调
$('#selectPage5').selectPage({ showField : 'name', keyField : 'id', data : 'http://aaa.com/load', params : function(){return {'name':'aa','sex':1};}, //ajax请求后服务端返回的数据格式处理 //返回的数据里必须包含list（Array）和totalRow（number|string）两个节点 eAjaxSuccess : function(d){ var result; if(d) result = d.values.gridResult; else result = undefined; return result; } }); //服务端返回的JSON数据格式 //这里的示例数据，有些节点不是必须的，最重要的是list和totalRow两个节点必须存在 //所以在上面的代码中，设置了eAjaxSuccess的回调中将values.gridResult节点 //返回，因为在该节点下存在list和totalRow两个数据项 { "values": { "gridResult": { "pageSize": 10, "pageNumber": 1, "totalRow": 11, "totalPage": 2, "list": [ {"name": "计算机网络","id": "1"}, {"name": "计算机网络1","id": "2"}, {...} ] } } } //服务端处理样例（J2EE-JFinal 的 Controller 代码） public void loadUserList(){ StringBuilder sb = new StringBuilder(); List<Object> params = new ArrayList<Object>(); if(StringUtils.isNotEmpty(getPara("userName"))){//用户姓名 sb.append(" and name like ?"); params.add("%" + getPara("userName") + "%"); } if(StringUtils.isNotEmpty(getPara("userSex"))){//用户性别 sb.append(" and sex = ?"); params.add(getPara("userSex")); } if(StringUtils.isNotEmpty(getPara("userStatus"))){//用户状态 sb.append(" and status = ?"); params.add(getPara("userStatus")); } //用于查询初始化项目 if(StringUtils.isNotEmpty(getPara("searchKey")) && StringUtils.isNotEmpty(getPara("searchValue"))){ String value = getPara("searchValue"); String[] valuearr = value.split(","); String searchStr = ""; for(String val : valuearr){ if(searchStr.length() != 0) searchStr += ","; searchStr += "?"; params.add(val); } sb.append(" and " + getPara("searchKey") + " in (" + searchStr + ")" ); } this.getPageInfo(); Page<Record> plist = Db.paginate(this.getPage(), this.getPageSize(), "select *","from user where 1=1 " + sb.toString(), params.toArray()); this.setAttr("userList", plist); renderJsp("/userMain.jsp"); }提示 根据这一份服务端处理代码，就需要在插件初始化时指定searchField : "userName"，若不指定，则会默认传递"name"字段，导致服务端接收不到模糊查询的内容
