html
<div id="plansItemList" class="plans-item-list"> </div>
<div class="text-center margin-top-20">
<ul class="pagination jq-pagination" id="pagination"> </ul>
</div>
js
// 初始化分页控件
$.jqPaginator('#pagination', {
totalPages: 1,
visiblePages: 5,
currentPage: 1,
onPageChange: function (num, type) {
search(num);
}
});
//分页搜索
function search(pageIndex){
$.ajax({ url :urlRootContext + '/Myplan/listMyplan.do? pageIndex='+pageIndex+'&pageSize='+pageSize,
type : "post",
dataType : "json",
success : function(datas) {
var data=datas.data;
var str='';
if(datas.totalPages>0){
$('#pagination').jqPaginator('option', {
totalPages: datas.totalPages//总页数
});
}
if(data.length>0){
for(var i=0;i<data.length;i++){
str+='<div class="plans-item" id="'+data[i].id+'">'
str+='<div class="plans-item-inner" >';
str+='<div class="plans-item-title">';
str+=data[i].plan_name;
str+='</div>';
str+='<div class="plans-item-sub-title">';
str+='<i class="fa fa-clock-o"></i>';
str+=data[i].execution_Time;
str+='</div>';
str+='<div class="plans-item-content">';
if(data[i].plan_content.length>50){
str+=(data[i].plan_content).substr(0,50)+"...";
}else{
str+=data[i].plan_content;
}
str+='</div>';
str+=' <div class="row no-mg plans-item-action-zone">';
str+='<div class="pull-right">';
str+='<a class="plans-action-link" href="javascript:void(0);" onclick="showEditPlanModal(this);"';
str+='alt="editPlanLink-'+data[i].id+'" title="编辑">';
str+='<i class="fa fa-edit"></i>编辑 </a> ';
str+='<a class="plans-action-link" href="javascript:void(0);" onclick="showDeleteCurrentPlanModal(this);"';
str+='alt="delPlanLink-'+data[i].id+'" title="删除">';
str+=' <i class="fa fa-trash-o"></i>删除</a></div></div></div></div>';
}
$("#plansItemList").html(str);
}else{
$("#plansItemList").html("暂无数据……");
$('#pagination').jqPaginator('option', {
totalPages: 1
});
}
},
error:function () {
layer.msg('<i class="icon-volume-1"></i> 获取数据失败!');
}
});
}
java
java 后台返回json数据,包含data数据和totalPages总页数数据
有什么疑问,请留言,我看到会回复,有什么改善的地方请不吝指教,谢谢!