JPAGES分页控件案例

//需要导入的样式表,与js文件

/**

*css

*jPages.css控制分页按钮条的样式，不需要样式的可以不用导入

*animate.css控制要显示的数据的动画效果,不需要动画可以不用导入

*github.css这个不知道是搞什么的，不导入也没发现改变了什么

*js文件jPages.js和jquery肯定是必须的,其他的就看自己了

*/

Js代码:

$("#tbody").empty();//删除tbody中已经存在的数据

var str="";

$.ajax({

url:'jq/getShipInfoByShipName.action',

data:{"shipName":$("#shipNameId").val()},//执行后台Action参数

dataType:'json',

type:'post',

//回调函数执行之前的动作

beforeSend:function(){

//这是我设置的一个加载中的图标,trShow为图标显示的行

//在数据加载出来之前,显示加载中这个图标,加载完成,隐藏

$('#trShow').css("display","block");

},

success:function(data){

var result=data;

//返回数据位json格式，遍历json，拼凑成table中的行

for(var i=0;i

str+="

"+result[i].shipId+""+result[i].shipName+"

"+result[0].remark+"";

}

//追加如tbody中

$("#tbody").append(str);

//执行分页函数,

$(function(){

//设置页数按钮所在的层,

$("div.holder").jPages({

containerID:"tbody",//显示数据所在的块的ID

first:'首页',

last:'尾页',

previous:'上页',

next:'下页',

perPage:12,//每页显示数据为多少行

startPage:1,//起始页

startRange:2,//开始页码为2个

midRange:3,//最多显示几个页码页码,其余用..代替

endRange:2,//结束页码为2个

animation:'wobble',//数据显示的动画效果

keyBrowse:true

});

});

//数据加载完成之后,隐藏加载中这个图标

$('#trShow').css("display","none");

},

error:function(status){

alert('超时');

}

});

Html:

Check	ID	Name	Remark