zoukankan      html  css  js  c++  java
  • (推荐)jquery.pagination.js分页

    序言


    本来想自己对这个分页使用做一些总结的,但发现大神们已经总结的很好了。所以给推荐一下。

    转自:http://www.cnblogs.com/knowledgesea/archive/2013/01/03/2841554.html

    下面是个人测试的列子:


    前端代码


    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>JsPage</title>
        <script src="~/Scripts/jquery-1.10.2.min.js"></script>
        <script src="~/Scripts/jquery.pagination.js"></script>
        <link href="~/Style/pagination.css" rel="stylesheet" />
        <script type="text/javascript">
    
            var pageIndex = 1;     //页面索引初始值   
            var pageSize = 10;     //每页显示条数初始化,修改显示条数,修改这里即可   
            var PageCount = 100;
            $(document).ready(function () {
                InitTable(pageIndex);    //Load事件,初始化表格数据,页面索引为0(第一页)
                InitPager();
            });
    
            function InitPager() {
                //分页,PageCount是总条目数,这是必选参数,其它参数都是可选
                $("#pager").pagination(PageCount, {
                    callback: PageCallback,  //PageCallback() 为翻页调用次函数。
                    prev_text: "上一页",
                    next_text: "下一页",
                    items_per_page: pageSize,
                    num_edge_entries: 2,       //两侧首尾分页条目数
                    num_display_entries: 3,    //连续分页主体部分分页条目数
                    current_page: pageIndex - 1,   //当前页索引
                });
            }
            //翻页调用   
            function PageCallback(index, jq) {
                InitTable(index + 1);
            }
            //请求数据   
            function InitTable(pageIndex) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "/Page/GetPage",
                    dataType: "json",
                    data: "{pageIndex:'" + pageIndex + "',pageSize:'" + pageSize + "'}",          //提交两个参数:pageIndex(页面索引),pageSize(显示条数)                   
                    success: function (data) {
                        $("#divtest").html("");
                        var str = "";
                        $.each(data, function (i, item) {
                            str = str + "<span>" + item + "<span><br />";
                        });
                        $("#divtest").append(str);
                    }
                });
            }
    
        </script>
    </head>
    <body>
        <div id="divtest"></div>
        <div id="pager">
        </div>
    </body>
    </html>
    View Code

    后台代码:


    [HttpPost]
            public JsonResult GetPage(int pageIndex, int pageSize)
            {
                IList<string> list = new List<string>();
                int n = (pageIndex - 1) * pageSize + 1;
                for (int i = n; i <= n + pageSize - 1; i++)
                {
                    list.Add("aaaa" + i);
                };
                return Json(list);
            }
    View Code

    效果:

     

  • 相关阅读:
    redis问题排查
    javassist介绍
    Idea创建父子工程
    sentry的配置
    Redis的基本操作以及info命令
    es~日期类型需要注意的
    jboss~静态文件路由和自定义日志
    java~RMI引起的log4j漏洞
    链路跟踪~对接阿里ARMS
    navicat~导出数据库密码
  • 原文地址:https://www.cnblogs.com/ChangeNow/p/3613667.html
Copyright © 2011-2022 走看看