SelectPage下拉分页选择插件

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"字段，导致服务端接收不到模糊查询的内容