jquery pager

 VIew

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    EasyUIDemo
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div align="center">  
  <h1>Posrchev----无刷新分页</h1>  
</div>  
<div><input id="dept" type="text" value="" /><input type="button" value="search" onclick="searchData();" /> </div>
<div id="container">    
   <table id="Result"   cellspacing="0" cellpadding="0">            
            <tr>  
                <th>编号</th>  
                <th>名称</th>        
                <th>操作</th>        
            </tr>                                                                                               
   </table>  
    <div id="Pagination"></div>  
    <div id="info"></div><div id="load"></div>
</div>  
 

<script type="text/javascript">
    var pageIndex = 0;     //页面索引初始值  
    var pageSize = 2;     //每页显示条数初始化，修改显示条数，修改这里即可

    var requestdata = "";

    InitTable(0);    //Load事件，初始化表格数据，页面索引为0（第一页）  
    var pageCount = 0;
    //分页，PageCount是总条目数，这是必选参数，其它参数都是可选
    var initPager = function (json) {
        $("#Pagination").pagination(json.total, {
            callback: PageCallback,
            prev_text: '上一页',       //上一页按钮里text  
            next_text: '下一页',       //下一页按钮里text  
            items_per_page: pageSize,  //显示条数  
            num_display_entries: 6,    //连续分页主体部分分页条目数  
            current_page: pageIndex,   //当前页索引  
            params: {   "condition1": "value1" }, 
            num_edge_entries: 2        //两侧首尾分页条目数  
        });
    };
    //翻页调用  
    function PageCallback(index, jq) {
        InitTable(index);
    }
    //请求数据  
    function InitTable(pageIndex) {

        $.ajax({
            type: "POST",
            dataType: "json",
            url: '<%:Url.Action("GetRoleData","Demo") %>',      //提交到一般处理程序请求数据  
            data: "page=" + (pageIndex + 1) + "&rp=" + pageSize + "&ordername=asc&sortorder=UserName" + requestdata,          //提交两个参数：pageIndex(页面索引)，pageSize(显示条数)                  
            success: function (data) {
                var html = "";
                $("#Result tr:gt(0)").remove();
                $("#info").html("共" + data.total + "条&nbsp当前" + (pageIndex + 1) + "页");
                $.each(data.rows, function (idx, item) {
                    //在这里搞点东西就可以aa

                    html += "<tr><td>";
                    html += "<a href='#'>" + item.cell[1].toString() + "</a>";
                    html += "</td><td>";
                    html += item.cell[3].toString();
                    html += "</td><td>";
                    html += "<a href='#'>删除</a>";
                    html += "</td></tr>";
                    //移除Id为Result的表格里的行，从第二行开始（这里根据页面布局不同页变）  


                });
                $("#Result").append(html);
                $("#load").html("");
            }

        });
    }

    function LoadData() {
        var total = 0;
        $("#load").html("loading");
        $.ajax({
            type: "POST",
            dataType: "json",
            async: false,
            url: '<%:Url.Action("GetRoleData","Demo") %>',      //提交到一般处理程序请求数据  
            data: "page=" + (pageIndex + 1) + "&rp=" + pageSize + "&ordername=asc&sortorder=UserName" + requestdata,          //提交两个参数：pageIndex(页面索引)，pageSize(显示条数)                  
            success: function (data) {
           //     $("#info").html("共" + data.total + "条&nbsp来源请求Total");
                total = data.total;
                
                initPager(data);
            }
        });
        
        return total;
    }

    function searchData() {
        requestdata = "&dept=" + $("#dept").val();
        LoadData();
    }
    LoadData();

   

</script>
<%--<script type="text/javascript">
   var pageIndex = 0;     //页面索引初始值  
    var pageSize = 2;     //每页显示条数初始化，修改显示条数，修改这里即可


   
        InitTable(0);    //Load事件，初始化表格数据，页面索引为0（第一页）  
        var pageCount = 0;
        //分页，PageCount是总条目数，这是必选参数，其它参数都是可选
        var initPager = function(json) {
            $("#Pagination").pagination(json.total, {
                callback: PageCallback,
                prev_text: '上一页',       //上一页按钮里text  
                next_text: '下一页',       //下一页按钮里text  
                items_per_page: pageSize,  //显示条数  
                num_display_entries: 6,    //连续分页主体部分分页条目数  
                current_page: pageIndex,   //当前页索引  
                num_edge_entries: 2        //两侧首尾分页条目数  
            });
        };
        //翻页调用  
        function PageCallback(index, jq) {
            InitTable(index);
        }
        //请求数据  
        function InitTable(pageIndex) {
            $("#Result tr:gt(0)").remove();  
            $.ajax({
                type: "POST",
                dataType: "json",
                url: '<%:Url.Action("GetRoleData","Demo") %>',      //提交到一般处理程序请求数据  
                data: "page=" + (pageIndex + 1) + "&rp=" + pageSize + "&ordername=asc&sortorder=UserName" + "&dept=" + $("#dept").val(),          //提交两个参数：pageIndex(页面索引)，pageSize(显示条数)                  
                success: function (data) {
                    var html = "";
                   
                    alert("请求数据 =" + data.total);
                    $.each(data.rows, function (idx, item) {
                        //在这里搞点东西就可以
                        
                        html += "<tr><td>";
                        html += item.cell[1].toString();
                        html += "</td><td>";
                        html += item.cell[3].toString();
                        html += "</td></tr>";
                              //移除Id为Result的表格里的行，从第二行开始（这里根据页面布局不同页变）  
                       

                    });
                    $("#Result").append(html);
                    //                   
                    //                    $("#Result tr:gt(0)").remove();        //移除Id为Result的表格里的行，从第二行开始（这里根据页面布局不同页变）  
                    //                    $("#Result").append(data);             //将返回的数据追加到表格  
                }
            });
        }

        function LoadData(isquery) {
            var total = 0;
            $.ajax({
                type: "POST",
                dataType: "json",
                async: false,
                url: '<%:Url.Action("GetRoleData","Demo") %>',      //提交到一般处理程序请求数据  
                data: "page=" + (pageIndex + 1) + "&rp=" + pageSize + "&ordername=asc&sortorder=UserName" + "&dept=" + $("#dept").val(),          //提交两个参数：pageIndex(页面索引)，pageSize(显示条数)                  
                success: function (data) {
                    alert("请求页数=" + data.total);
                    total = data.total;
                    initPager(data);
                }
            });

            return total;
        }

        LoadData();

//    $(function () {
//        //此demo通过Ajax加载分页元素
//        //var json;
//       var pageIndex = 0;     //页面索引初始值  
//        var pageSize = 2;
//        var initPager = function (json) {
//            var num_entries = json.total;
//            //alert(json.msg.length)
//            // 创建分页
//            $("#Pagination").pagination(num_entries, {
//                num_edge_entries: 1, //边缘页数
//                num_display_entries: 4, //主体页数
//                callback: pageClick,
//                items_per_page: 2, //每页显示1项
//                prev_text: "上一页",
//                next_text: "下一页"
//            });
//        };

//        var pageClick = function (pageIndex, jq) {
//            //InsertHtml(page_index,$("#comment"))
//            //alert(json)
//            //$("#comment").html(json.msg[page_index]["id"])
//            $.getJSON("<%:Url.Action("GetRoleData","Demo") %>", { dept: $("#dept").val(),rp: pageSize, page: pageIndex + 1 }, function (json) {
//                if (json == null) { alert('null'); return false; }

//                else   {
//                    var html = "";
//                    $.each(json.rows, function (i) {
//                        //在这里搞点东西就可以
//                        html += "err_id: " + json.rows[i][0];

//                    }) //each
//                    $("#container").html(html);
//                }
//            });
//            return false;
//        };
//        //ajax加载
//        //$("#hiddenresult").load("?key=ddd", null, initPager);

//        function loadComm() {
//            $.getJSON("<%:Url.Action("GetRoleData","Demo") %>", { rp: pageSize, page: pageIndex }, function(json) {
//                //json = json;

//                initPager(json);

//            });
//        }
//        loadComm();
//    });

</script>--%>

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="HeaderContent" runat="server">
 
   <script src="http://www.cnblogs.com/Scripts/jquery.pagination.js"   type="text/javascript"></script>      
   
    <link    href="http://www.cnblogs.com/Scripts/pagination.css" rel="stylesheet" type="text/css" />  
 <%--   <link href="http://www.cnblogs.com/css/style.css" rel="stylesheet" type="text/css" />
    <link href="http://www.cnblogs.com/css/page.css" rel="stylesheet" type="text/css" /> --%>
   <%-- <script src="http://www.cnblogs.com/Scripts/jquery-1.6.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/Scripts/jquery.cookie.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/Scripts/jquery.myPagination.js" type="text/javascript"></script>--%>
    <style type="text/css">
    tr td { border-bottom :red 1px solid ;}
    </style>
</asp:Content>

 

 

Control

  public JsonResult GetRoleData(FormCollection form)
        {
            // 分页获取全部集合调用参数
            // <param name="count">记录总数</param>
            // <param name="pageIndex">页码</param>
            // <param name="pageSize">每页大小</param>
            // <param name="orderBy">排序方式</param>
            // <param name="sort">排序字段</param>

            //获得当前要显示的页面
            int pageindex = int.Parse(form["page"]);
            //获得每页显示的记录数
            int pagesize = int.Parse(form["rp"]);
            //获得排序方式
            string orderby = form["ordername"];
            //获得排序字段
            string ordername = form["sortorder"];

            string dept = Request["dept"];
            long count;
            var querydto = new UserQueryDto{ Department = dept};
            IList<User> allRole = UserService.GetUsersByPage(out count, pageindex, pagesize, orderby, ordername,
                                                             querydto);
            //    var sb = new StringBuilder();
            //    foreach (var p in allRole)
            //    {
            //        sb.Append("<tr><td>");
            //        sb.Append(p.UserName);
            //        sb.Append("</td><td>");
            //        sb.Append(p.Sso);
            //        sb.Append("</td></tr>");
            //    }
            //    string str = sb.ToString();
            //    return this.Content(str);
            //}
            var Roles = allRole.Select(x => new
            {
                cell = new List<string>
                                                    {          
                                                           x.Sso,
                                                           x.UserName,
                                                           x.Manager,
                                                           x.Dept,



                                                    }


            });
            var result = new { page = pageindex, total = count, rows = Roles.ToList() };
            return this.Json(result, JsonRequestBehavior.AllowGet);
        }