我的前端分页

如下:

复制代码
@{
    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>
复制代码
posted @   陆敏技  阅读(384)  评论(0编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
历史上的今天:
2011-09-08 ASP.NET性能优化之构建自定义文件缓存
Web Counter
Coupon for Contacts
点击右上角即可分享
微信分享提示