我的前端分页

如下:

@{
    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>

时间: 2024-08-28 20:08:42

我的前端分页的相关文章

js 前端分页空间控件

现在web注重用户体验与交互性,ajax 提交数据的方式很早就流行了,它能够在不刷新网页的情况下局部刷新数据.前端分页多是用ajax请求数据(其他方式也有比如手动构造表单模拟提交事件等).通过js将查询参数构造好发向后台,后台处理后以特定的格式返回,多为json,比较流行处理起来也很方便.当后台数据到达后,浏览器重新渲染界面当然也包括js分页控件,如果觉得每次绘制分页控件对前端性能有影响也可以不绘制,但实现起来相对麻烦. 本人写的分页控件参考了其他网友的代码,链接忘了,控件接受四个参数或一个对象

jQuery插件实例六:jQuery 前端分页

先来看看效果: 对于前端分页,关键是思路,和分页算法.本想多说两句,可又觉得没什么可说的,看代码吧: 如何使用? $("#pging").zPagination({ 'navEvent':function(){ console.log('取数据Ajax'); } }); JS代码 //分页Pagination ; (function ($, window) { var defaults = { rowCount: 400, //总数据行数 navPage: 10, //每次显示多少页导

前端分页(输入页号)

$('#submitgo').click(function(){        if($('#fillNum').val()!=''){ var u = location.href.toString(); if(u.indexOf('page') >=0){                var url=replaceParamVal('page',$('#fillNum').val());                location.href=url;            }else{

前端分页插件pagination

摘要: 最近在开发项目中又用到了前端分页,以前也做过,为了方便以后使用所以将他封装成第三方插件,不依赖任何库.网上已经有很多插件,问什么还要自己造轮子? 自己写的扩展性高 不依赖任何库 作为一次技术沉淀 在线预览:http://baixuexiyang.github.io/pagination/ 项目地址:https://github.com/baixuexiyang/pagination 注意: 后面我还要将自己在开发中写到的插件都总结下分享给大家,如果你喜欢用可以star或者fork,或者你

Extjs中grid前端分页使用PagingMemoryProxy【二】

    在项目中遇到Grid前端分页,本人也是刚接触extjs没多久,为了实现效果,一直找了很久才实现出来,对于代码中的一些也不能详细的说明出来, 不知道能不能帮助到遇到同样问题的朋友,所以将例子代码贴出来大家一起相互学习下. 在项目中时常会用到前端分页的效果,使用grid来进行分页, 在源代码中\examples\ux\data\PagingMemoryProxy.js,此时要使用该js文件,在项目引用该文件. <script type="text/javascript" sr

锋利的js前端分页之jQuery

原文:锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比较简单. 1 /** 2 * pageSize, 每页显示数 3 * pageIndex, 当前页数 4 * pageCount 总页数 5 * url 连接地址 6 * pager(10, 1, 5, 'Index')使用方法示例 7 */ 8 function pager(pageSize

超简单实用的前端分页---jquery插件

首先,谈谈分页,目前我所了解的分页有两种,前端分页跟后台分页. 简单说说前端分页.是通过前端技术拿到所有的数据,在前端分页处理; 而后台分页是通过前端操作,给后台返回不同的值,再由后台返回所对应的数据. 最近,下载了很多前端分页插件.感觉性价比不是模糊不清,就是显示不是自己想要的,所以想自己动手写一个属于自己的插件 这是一个面向对象思想的插件.第一次用面向对象的思想,肯定有很多不足的地方.希望能互相讨论,一起上进. 这是效果图.看起来一般,但是他的css可重塑性高 接下来将附上自己的代码. cs

前端分页

一. 前端分页 1.实现思路: 当前页 currentPage : 直接获取 后端提供数据: results ( 发送请求,获取数据 ) 数据总条数:totalCount = results.length 举个栗子: 103条数据 每页10条 一共分 11 页 第一页: firstPage: 1 上一页: previousPage = Math.max(currentPage - 1, 1); 当前页 上一页 3 2 4 3 1 1 下一页: next = Math.min(currentPag

ajax前端分页实现

本来不打算重复造轮子的,网上也已经有了很多关于前端分页的框架,插件等等,但是还是打算写出来是因为前段时间有一个功能模块需要用到前端分页,然后找了很多框架,以及插件,发现其内容非常的复杂或者有的干脆就是不能用的,一气之下就准备自己动手写一个,下面贴出代码.. 到自己写的时候其实发现,这个还是挺简单的,逻辑代码并不多,, ajax向后台发送请求,并将请求得到的数据(下面)来计算出页数页码等等这些东西.这个list设置为全局变量是可以保证不用传参给pagelist的话它也能用 这是接收到的后端数据 这

纯手写完美实现前端分页效果

经常听人提到前端分页技术,却总也没有完全的实现过,作为做过多年前后端的老码工,真的有必要好好研究一番,以飨读者; 在这里不只是有前端分页页面效果,更有真实数据的展示,实现了真正的分页哦! 内容导读 1.页面设计 2.jQuery之ajax与JSON数据 3.运行效果 说明: (1)需要将源码导入HBuilder中,打开HBuilder直接通过内置服务器运行页面即可实现分页效果 (2)一个分页小技术有时也是让人挠头,这里完全前端实现方式与Java的实现方式,我们提供给你完全的编码参考,希望能够帮到