列表分页查询的实现jquery 和Ajax的联合使用 HTML页面

分页实现的js文件page.jsp

var page=1,count=20,totalpage=10;
$(function() {
//生成数据
$("#btn").click(function() {
alert($("#tvc").val())
$.get("createtv",{ct:$("#tvc").val()}, function(res){
if (res == 1) {
alert("创建成功！");
location.href="Tvpage.html";
}else{
alert("创建失败！")
}
});

});
//获取数据，并分页
getData();//初始化后就加载数据

});


//通过Ajax获取json数据显示
function getData() {
$.ajax({
url:"TvPagesServlet2",
type:"get",
data:"page="+page+"&count="+count,
success:function(result){
//alert(result)
$("#tvcon").html(""); 
var tv =  $.parseJSON(result);
for (var i = 0; i < tv.length; i++) {
$("#tvcon").append(""+tv[i].id+""+""+tv[i].name+""+""+new Date(tv[i].time)+"删除修改");
}
//添加分页控件
createPage("cpage",totalpage)
}});
}


//上一页
function prepage() {
if (page>1) {
page--;
}
$("#tvp").val(page);//记录要传入后台的值
getData();
}
//下一页
function nextpage() {
if (page < totalpage) {
page++;
}
$("#tvp").val(page);//记录要传入后台的值
getData();
}


//跳转至某一页
function tzPage() {
//获取输入框的值
if($("#tz").val().length>0){
page=parseInt($("#tz").val());
if (page>totalpage) {
page=totalpage;
}
$("#tvp").val(page);//记录要传入后台的值
}
getData();//获取数据
}


//改变当前页数是触发
function changepage(i) {
page = i;
$("#tvp").val(page);
//修改完page之后重新创建page控件，获取数据
getData()//获取数据
}
//创建分页控件
function createPage(id,talpg) {
page=parseInt($("#tvp").val());
$("#cp").html(page);
//分页前先清空div
$("#"+id).html("");

if (talpg < 6) {//总页数小于6
for (var i = 1; i < 6; i++) {
$("#"+id).append(""+i+"");
}
$("#"+id).append("......");

}else {//总页数大于6
//如果当前页数小于4
if (page < 4) {
for (var i = 1; i < 6; i++) {
$("#"+id).append(""+i+"");
}
$("#"+id).append("......");
}else {//当前页数大于4
$("#"+id).append("1");
$("#"+id).append("...");

if (page < talpg-3) {
//page=97;
for(var i=page;i<=page+3;i++){
$("#"+id).append(""+i+"");
}
if(talpg-page>2){
$("#"+id).append("...");
}
}else {
//page=97;
for(var i=talpg-3;i<=talpg;i++){
$("#"+id).append(""+i+"");
}
}


}
}
$("#btn_"+page).addClass("btactive");
//创建跳转页
$("#"+id).append("上一页");
$("#"+id).append("当前"+page+"/"+talpg+"页");
$("#"+id).append("跳转至第页");
$("#"+id).append("下一页");
}

分页实现的HTML页面设置：

输入要生成的总行数：

序号	节目名称	播放时间	操作

要注意这里的id对应的page.js中的$("#值")要一致，以上的Ajax 获取的是后台传过来的json数据，大家复用的时候要注意后台解析和上传数据json类型