pagination 分页控件的使用

感觉这个控件还不错 因为使用简单 直接代码

 

html部分

<link href="~/js/pagination/pagination.css" rel="stylesheet" />
<script src="~/js/jquery/jquery-1.11.1.min.js"></script>
<script src="~/js/pagination/jquery.pagination.js"></script>
<input type="text" placeholder="请输入搜索条件" id="name" /><input type="button" value="搜索" id="btnSouSuo" />
<table>
    <thead>
        <tr><th>编号</th><th>姓名</th></tr>
    </thead>
    <tbody></tbody>
</table>
<div class="pagination"></div>

js部分

 $(function () {
        var pageSize = 3;
        var pain = function () {
            $.post('/Home/PageCount', { name: $("#name").val() }, function (data) {
                $(".Pagination").pagination(data, {
                    num_edge_entries: 3, //两侧显示的首尾分页的条目数
                    num_display_entries: 4, //连续分页主体部分显示的分页条目数
                    items_per_page: pageSize, //每页显示的条数
                    prev_text: "上一页", //默认Prev
                    next_text: "下一页", //Next
                    callback: pageselectCallback,
                });

                pageselectCallback(0);
            });
        };
　　　　　　
        var pageselectCallback = function (index) {
            $.post('/Home/PageData',
            {
                name: $("#name").val(),
                index: index,
                size: pageSize
            }, function (data) {
                var html = "";
                $.each(data, function (i) {
                    html += "<tr><td>" + data[i].ID + "</td><td>" +
                        data[i].Name + "</td></tr>";
                });
                $("table tbody").html("");
                $("table tbody").append(html);
            });
        };

        $("#btnSouSuo").click(function () {
            pain();
        });
        pain();
    });

C# 代码 由于没有链接数据库 就用list<T> 代替了

        /// <summary>
        /// 得到总条数
        /// </summary>
        /// <param name="name">页面参数</param>
        /// <returns></returns>
        public JsonResult PageCount(string name)
        {
            var page = new List<PageDataR>();
            for (int i = 0; i < 30; i++)
            {
                var pr = new PageDataR()
                {
                    ID = i + 1,
                    Name = "name" + i
                };
                page.Add(pr);
            }
            if (!string.IsNullOrWhiteSpace(name))
            {
                var pageSelect = new List<PageDataR>();
                foreach (var item in page)
                {
                    if (item.Name.Contains(name))
                    {
                        pageSelect.Add(item);
                    }
                }
                return Json(pageSelect.Count, JsonRequestBehavior.AllowGet);
            }
            return Json(page.Count, JsonRequestBehavior.AllowGet);
        }

        /// <summary>
        /// 得到数据
        /// </summary>
        /// <param name="name">搜索条件</param>
        /// <param name="index">页面索引</param>
        /// <param name="size">页面显示数据条数</param>
        /// <returns></returns>
        public JsonResult PageData(string name, int index, int size)
        {
            var page = new List<PageDataR>();
            for (int i = 0; i < 30; i++)
            {
                var pr = new PageDataR()
                {
                    ID = i + 1,
                    Name = "name" + i
                };
                page.Add(pr);
            }
            if (!string.IsNullOrWhiteSpace(name))
            {
                var pageSelect = new List<PageDataR>();
                foreach (var item in page)
                {
                    if (item.Name.Contains(name))
                    {
                        pageSelect.Add(item);
                    }
                }
                return Json(pageSelect.Skip(index * size).Take(size), JsonRequestBehavior.AllowGet);
            }
            return Json(page.Skip(index * size).Take(size), JsonRequestBehavior.AllowGet);
        }