ajax 分页完全代码整理

发布时间:2020-07-16 16:07:41 作者:张涛泽
来源:网络 阅读:281

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='地址/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)
    });
});

ajax 分页完全代码整理

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


推荐阅读:
  1. Beginning JavaScript with DOM Scripting and Ajax
  2. ThinkPHP如何整合Bootstrap Ajax分页样式

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

ajax success function

上一篇:Django中如何使用filter的pk进行多值查询操作

下一篇:红米手机使用应用沙盒一键修改分辨率信息

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》