我的前端分页
2015-09-08 17:37
316 查看
如下:
@{ 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>
相关文章推荐
- poj 2763 Housewife Wind 边权的树链剖分
- javascript 中的 delete
- 18. CSS 内边距
- js创建对象
- 深入解析HTML5中的Blob对象的使用
- node-xlsx使用教程
- 前端获取元素定位位置的法宝
- jquery控制按钮的禁用与启用
- i18next-页面层语言国际化js框架介绍
- 剑指offer 算法(树的两个节点的最低祖先)
- Firebase, Netty, Feed Push
- react-native试玩(33)-状态栏API
- fastjson生成和解析json数据
- Grunt 单独对css压缩并生成min.css文件
- CSS 最核心的几个概念
- easy ui jquery 添加时样式出现问题
- javascript中加法操作符与减法操作符在字符串与数字相加时的区别
- jquery+ajax简单例子及jquery事件
- JavaScript总结(一)
- js中变量的作用域