我的前端分页

简介: 如下: @{ ViewBag.Title = "OrderList"; Layout = "~/Views/Shared/_Layout.cshtml"; } (function () { var getOrderList = function (pageNumber, pageSize) { $.

如下:

@{
    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>
Creative Commons License本文基于 Creative Commons Attribution 2.5 China Mainland License发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名 http://www.cnblogs.com/luminji(包含链接)。如您有任何疑问或者授权方面的协商,请给我留言。
目录
相关文章
|
SQL 前端开发 Java
java通用分页前端(2)
java通用分页前端(2)
68 0
|
XML 前端开发 Java
JavaEE通用分页(前端实现)
JavaEE通用分页(前端实现)
65 0
|
3月前
|
前端开发 JavaScript
在 Vue3 + ElementPlus 项目中使用 computed 实现前端静态分页
本文介绍了在Vue3 + ElementPlus项目中使用`computed`属性实现前端静态分页的方法,并提供了详细的示例代码和运行效果。
166 1
在 Vue3 + ElementPlus 项目中使用 computed 实现前端静态分页
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(30)--- ABP后端和Vue+Element前端结合的分页排序处理
循序渐进VUE+Element 前端应用开发(30)--- ABP后端和Vue+Element前端结合的分页排序处理
|
5月前
|
缓存 负载均衡 前端开发
SSMP整合案例第八步 前端页面的分页功能完善与维护和实现条件查询
SSMP整合案例第八步 前端页面的分页功能完善与维护和实现条件查询
45 1
|
4月前
|
前端开发
后端一次返回大量数据,前端做分页处理
后端一次返回大量数据,前端做分页处理
172 0
|
4月前
|
前端开发
Element UI 表格常用改造(表头添加注释、翻页连续序号【内含前端分页】)
Element UI 表格常用改造(表头添加注释、翻页连续序号【内含前端分页】)
206 0
|
6月前
|
前端开发 UED
🌟前端分页加载/懒加载预览PDF🌟
🌟前端分页加载/懒加载预览PDF🌟
|
6月前
|
前端开发 JavaScript
Element纯前端分页处理
Element纯前端分页处理
37 0
|
6月前
|
前端开发 JavaScript
vue实现通用分页控件,支持前端分页、后端分页。
vue实现通用分页控件,支持前端分页、后端分页。
90 1
下一篇
无影云桌面