首页 > 代码库 > ajax 分页完全代码整理

ajax 分页完全代码整理

/* ajax分页 */var page_cur = 1; //当前页 var total_num, page_size, page_total_num;//总记录数,每页条数,总页数function getData(page) { //获取当前页数据     $.ajax({         type: ‘GET‘,         url: 处理数据地址,         data: {             ‘page‘: page,             ‘catid‘: ‘{$video_info.catid}‘         },         dataType: ‘json‘,         success: function(json) {             $("#ul_lists").empty();             total_num = json.total_num; //总记录数             page_size = json.page_size; //每页数量             page_cur = page; //当前页             page_total_num = json.page_total_num; //总页数             var li = "";             var list = json.list;             $.each(list,             function(index, array) { //遍历返回json                var curid = {$video_info.id};                var cur = curid == array[‘id‘] ? "class=‘cur‘" : "";                li += "<li "+cur+"><a href=http://www.mamicode.com/‘地址/id/"+array[‘id‘]+"‘>" + array[‘title‘] + "</a><span>"+array[‘time‘]+"</span></li>";             });             $("#ul_lists").append(li);         },         complete: function() {             getPageBar(); //js生成分页,可用程序代替         },         error: function() {             alert("数据异常,请检查是否json格式");         }     }); }function getPageBar() { //js生成分页     if (page_cur > page_total_num) page_cur = page_total_num; //当前页大于最大页数     if (page_cur < 1) page_cur = 1; //当前页小于1     page_str = "<span>共" + total_num + "条</span><span>" + page_cur + "/" + page_total_num + "</span>";     if(page_total_num > 1){        if (page_cur == 1) { //若是第一页             page_str += "<span>首页</span><span>上一页</span>";         } else {             page_str += "<span><a href=‘javascript:void(0)‘ data-page=‘1‘>首页</a></span><span><a href=‘javascript:void(0)‘ data-page=‘" + (page_cur - 1) + "‘>上一页</a></span>";         }         if (page_cur >= page_total_num) { //若是最后页             page_str += "<span>下一页</span><span>尾页</span>";         } else {             page_str += "<span><a href=‘javascript:void(0)‘ data-page=‘" + (parseInt(page_cur) + 1) + "‘>下一页</a></span><span><a href=‘javascript:void(0)‘ data-page=‘" + page_total_num + "‘>尾页</a></span>";         }    }    $("#page").html(page_str); }$(function() {    getData(1);//默认第一页    $("#page a").live(‘click‘, function() { //live 向未来的元素添加事件处理器,不可用bind        var page = $(this).attr("data-page");//获取当前页        getData(page)    });});

数据处理端就正常的接收参数查询数据然后返回json前台处理

ajax 分页完全代码整理