您的位置：首页 > Web前端 > JQuery

通过ajax获取数据的分页插件的使用、jquery.paginate.js 还有搜索

2018-03-14 11:56 1006 查看

页面效果

接口回传的数据

html内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="js/jPaginate/pagination.css" rel="stylesheet"/>
</head>
<body>
<div class="search">
<input id="contaKeyword" type="text" placeholder="请输入机构或者学校名称进行搜索">
<input id="contaBtnSearch" type="button" value="Go">
</div>
<div class="conta_table_content">
<table border="0" cellspacing="0" cellpadding="0" class="conta_table_list" id="contaUnselectTableList">


</table>
<div id="resourcePagination" class="pagination"></div> 
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/jPaginate/jquery.paginate.js"></script>
<script>

//接口回传的数据:
//0 : {areaCode: "460205", cityCode: "460200", orgCode: "1146002201",…}
//1 : {areaCode: "460204", cityCode: "460200", orgCode: "2146000443",…}
//2 : {areaCode: "460204", cityCode: "460200", orgCode: "2146000297",…}
//3 : {areaCode: "460204", cityCode: "460200", orgCode: "3146000100",…}
//4 : {areaCode: "460205", cityCode: "460200", orgCode: "1146000083",…}
//5 : {areaCode: "460205", cityCode: "460200", orgCode: "1146002265",…}
//6 : {areaCode: "460205", cityCode: "460200", orgCode: "2146000340",…}
//7 : {areaCode: "460203", cityCode: "460200", orgCode: "3146000092",…}
//8 : {areaCode: "460202", cityCode: "460200", orgCode: "1146003246",…}
//9 : {areaCode: "460203", cityCode: "460200", orgCode: "1146001495",…}
//pageSize : 10
//totalPage : 32
//totalRecord : 311

function page(currentPage){ //currentPage是当前页码。
$.ajax({
url:"http://localhost/ecp/remote?callName=com.cloud.login.service.impl.CustomerAuthRS.queryAreaDetail()",
data:{
currentPage:currentPage,
pageSize: 10,
searchText:$("#contaKeyword").val(),//这个是选填的，如果用户没有输入就没有
},
dataType:'json',
type:"POST",
success:function(resdata,textStatus,jqXHResult){
if(resdata!=null&&resdata.data.length>0){
var vhtml='<tr> <th style="width:8%" class="center"></th> <th style="width:92%">学校名称</th></tr>';//z这里是那个头部的thz只有一个所以放在循环外部
for(var i=0;i<resdata.data.length;i++){
var orgCode=resdata.data[i].orgCode;
var orgName=resdata.data[i].orgName;

vhtml+='<tr><td><inputtype="radio"/></td><td>'+orgCode+'/'+orgName+'</td></tr>';
}
$("#contaUnselectTableList").append(vhtml);

//页码。后台传过来了总的页数
if(resdata.totalPage>1){
$("#resourcePagination").Pager(resdata.totalPage,{ //resdata.totalPage总页数必选参数
currentPageIndex: currentPage,//当前页索引，这个是调用函数时传过来的参数
currentPage: 1,
length: 3,
callback: function (pageIndex, currentPage, current){ //翻页调用此函数。
page(parseInt(pageIndex)); //翻页肯定是访问接口，把你点击的那个页码索引传过去。这里是在函数内访问他自己的外层函数
}
});
}
else{
$("#resourcePagination").empty();//页码小于等于o就不显示
}
}
else{
var ahtml='<tr><td></td><td>没有查询到内容</td></tr>';
$("#contaUnselectTableList").append(ahtml);
}
},
})
}

//刚进去页面就得触发一个函数显示所有数据
page(1)

// 搜索时执行上面函数，访问接口调数据
$("#contaBtnSearch").click(function(){
page(1);
})

//在输入框点击回车也触发搜素的按钮
$("#contaKeyword").keydown(function(e){
if(e.keyCode==13)
$("#contaBtnSearch").trigger("click");
})

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航