我的前端分页

标签：

如下：

@{
    ViewBag.Title = "OrderList";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="~/Scripts/TMinjiCommon.js"></script>
<script>
    (function () {

        var getOrderList = function (pageNumber, pageSize) {
            $.ajax({
                type: "post",
                datatype: "json",
                url: "/order/GetAllOrder",
                async: true,
                cache: false,
                data: { pageNumber: pageNumber, pageSize: pageSize },
                success: function (data) {
                    if (data.F == 1) {
                        alert(data.M);
                        return;
                    }

                    var firstPage = 1;
                    var prePage = 1;
                    var nextPage = 1;
                    var lastPage = 1;
                    var currentPage = 1;

                    if (data.O == null || data.O.length == 0) {
                        $("#pageInfo").html("对不起，没有数据！");
                    }
                    else {
                        currentPage = Math.ceil(data.O[0].ReqIndex / 10);
                        lastPage = Math.ceil(data.O[0].ReqCount / 10);
                        prePage = currentPage - 1;
                        nextPage = currentPage + 1;
                        if (prePage < 1)
                            prePage = 1;
                        if (nextPage > lastPage)
                            nextPage = lastPage

                        $("#firstPage").one("click", function () {
                            $("#pcontent").html("");
                            $("#pageInfo").html("获取数据中……");
                            getOrderList(1, 10);
                        });

                        $("#prePage").one("click", function () {
                            $("#pcontent").html("");
                            $("#pageInfo").html("获取数据中……");
                            getOrderList(prePage, 10);
                        });

                        $("#nextPage").one("click", function () {
                            $("#pcontent").html("");
                            $("#pageInfo").html("获取数据中……");
                            getOrderList(nextPage, 10);
                        });

                        $("#lastPage").one("click", function () {
                            $("#pcontent").html("");
                            $("#pageInfo").html("获取数据中……");
                            getOrderList(lastPage, 10);
                        });

                        var pi = "总" + data.O[0].ReqCount + "条，总"
                            + lastPage + "页，当前第"
                            + currentPage + "页";// + "，上一页"+ prePage + "下一页" + nextPage;

                        $("#pageInfo").html(pi);
                    }

                    var con = "";
                    //alert(data.F);
                    $.each(data.O, function (i, item) {
                        con += ‘<tr>‘;
                        con += ‘<td><input type="checkbox" name="checkbox" /></td> ‘;
                        con += ‘<td>‘ + item.UserName + ‘</td>‘;
                        con += ‘<td>‘ + item.order_code + ‘</td>‘;
                        con += ‘<td>￥‘ + item.price1 + ‘</td>‘;
                        con += ‘<td>‘ + TMinjiCommon.FormatTime(item.order_time) + ‘</td>‘;
                        con += ‘<td><span class="label label-important">未支付</span></td>‘;
                        con += ‘<td><span class="label label-important">未配送</span></td>‘;
                        con += ‘<td><span class="label label-success">详细信息</span></td>‘;
                        con += ‘<td></td>‘;
                        con += ‘</tr>‘;
                    });
                    //alert(data.F);

                    $("#orderCon").html(con);
                },
                error: function (xhr, status, err) {
                    alert(err);
                }
            });
        };

        return TMinji = {
            GetOrderList: getOrderList
        };
    })();

    $(function () {
        TMinji.GetOrderList(1, 10);
    });
</script>

<div class="panel panel-default">
    <div class="panel-heading">订单管理</div>
    <div class="panel-body">
        <div class="panel">
            <table>
                <tr>
                    <td>订单编号：</td>
                    <td><input type="text" name="search1" id="search1" value="" /></td>
                    <td><button class="btn btn-warning" type="button"> 检索</button></td>
                    <td style="width:5px;"></td>
                </tr>
            </table>
        </div>
        <div class="panel panel-default">
            <table class="table table-striped table-bordered table-hover">
                <thead>
                    <tr>
                        <th width="30"><input type="checkbox" class="checkall" /></th>
                        <th width="100">购买会员</th>
                        <th width="100">订单编号</th>
                        <th width="100">订单总价</th>
                        <th width="150">下单时间</th>
                        <th width="100">支付状态</th>
                        <th width="100">配送状态</th>
                        <th width="180">操作</th>
                    </tr>
                </thead>
                <tbody id="orderCon"></tbody>
            </table>
        </div>

        <div>
            <span><a href="#" id="firstPage">首页</a></span>
            <span><a href="#" id="prePage">上一页</a></span>
            <span><a href="#" id="nextPage">下一页</a></span>
            <span><a href="#" id="lastPage">末页</a></span>
            <span id="pageInfo"></span>
        </div>
    </div>

</div>

我的前端分页

标签：

原文地址：http://www.cnblogs.com/luminji/p/4792425.html