我的前端分页
如下:
@{ 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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 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性能优化之构建自定义文件缓存