zoukankan      html  css  js  c++  java
  • 我的前端分页

    如下:

    @{
        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="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>
  • 相关阅读:
    模拟Spring创建Bean和dom4j读取xml文件(视频学习传智播客Spring2.503)
    三种实例化Bean的方式
    junit4测试用例
    Spring注解方式管理事务以及事务传播行为Propagation(视频笔记23)
    Hibernate注解Annotation
    SSH框架整合(二)
    Oracle命令行中启动服务创建用户,权限,密码丢失
    Spring事务管理
    嚯嚯~~第一篇
    fedora下配置dhcpv6服务器
  • 原文地址:https://www.cnblogs.com/luminji/p/4792425.html
Copyright © 2011-2022 走看看