ajax+json异步分页。

发布时间：2020-12-16 19:19:06 所属栏目：百科来源：网络整理

导读：!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"head title/title script src="Scripts/jquery-1.4.1.js" type="text/javascript"/sc

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="js/jquery.pagination.js" type="text/javascript"></script>
    <link href="Css/pagination.css" rel="stylesheet" type="text/css" />
    <script src="js/jsonpager.js" type="text/javascript"></script>
</head>
<body>
    <table>
        <tr class="newrow">
            <td>
            </td>
        </tr>
    </table>
    <!--content list-->
    <ul id="PageContain" class="newslist">
        <!--加载图片-->
        <li id="loadImg" style="width: 100%; height: 60px; text-align: center; margin-top: 50px;">
            <img src="images/spinner3-greenie.gif" alt="" /></li>
        <!--内容会动态输出到这里面-->
    </ul>
    <!--pageNumber-->
    <div id="pagerNumber" class="digg">
    </div>
</body>
</html>

jsonpager.js

$(function () {
    // 计算分页总条数
    var pageCount = 0;
    $.ajax({
        type: "POST",cache: false,async: false,dataType: "text",url: "ashx/getdata.ashx",data: "action=pageCount",success: function (data) {
            pageCount = data;
        }
    });
 
    // 初始化数据(显示第一页)
    InitData("OrderDate","Desc",20,pageCount);
    //处理翻页,page_id为当前页索引(0为第一页)
    function pageselectCallback(page_id,jq) {
        InitData("OrderDate",page_id,pageCount);
    }
    // ★分页主函数(排序字段，排序类型，页大小，页索引，总条数)
    function InitData(order,ordertype,PageSize,pageindx,pageCount) {
        // Ajax取出分页列表数据
        $.ajax({
            type: "POST",dataType: "json",// 数据格式:JSON
            url: "ashx/getdata.ashx",data: "action=pager&order=" + order + "&orderType=" + ordertype + "&pageSize=" + PageSize + "&pageIndex=" + (pageindx + 1),// 发送数据之前显示Loading图片，接收结束后隐藏
            beforeSend: function () { $("#loadImg").show(); $("#pagerNumber").hide() },// 发送数据之前
            complete: function () { $("#loadImg").hide(); $("#pagerNumber").show() },// 接收数据完毕
            // Ajax成功
            success: function (json) {
                try {
                    var listDate = json.Orders;
                    var html = "";
                    $.each(listDate,function (i,n) {
                        html += "<li class="b"><span class="title">" + n.OrderID + "</span><span class="date">" + n.pos + "</span></li>";
                    });
                    // 输出HTML
                    $("#PageContain").html(html);
                } catch (e) {
                    alert(e);
                }
            }
        }); // Ajax_end
        // 加入分页插件的绑定，第一个参数pageCount为总共多少条数据
        $("#pagerNumber").pagination(pageCount,{
            callback: pageselectCallback,prev_text: '? 上一页',next_text: '下一页 ?',items_per_page: PageSize,// 每页显示条数
            current_page: pageindx,// 当前页索引,这里0为第一页
            num_display_entries: 6,// 前面显示几个按钮
            num_edge_entries: 2  // 后面显示几个按钮
        });
    }  // InitData_fun_end
});// ready_end

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!