jquery.pagination实现分页查询功能

最新推荐文章于 2022-06-29 21:56:26 发布

曹振华

最新推荐文章于 2022-06-29 21:56:26 发布

阅读量2.2k

点赞数 1

分类专栏： jquery 文章标签： jquery pagination 分页

本文链接：https://blog.csdn.net/chadcao/article/details/42394853

版权

jquery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

资源下载

1）前台代码

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/pagination.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.pagination.js"></script>
    <script type="text/javascript">
        var PageSize = 5;//每页行数
        var IsInit = true;//初始化
        $(function () {
            search(1, true);//1代表第一页
        });
        var search = function (pageIndex) {
            var url = '@Url.Action("GetStudents","Home")';
            $.ajax({
                type: 'GET',
                url: url,
                data: { pageIndex: pageIndex, pageSize: PageSize },
                success: function (data) {
                    if (IsInit) {
                        initPagination(data.Count);
                        IsInit = false;
                    }
                    $('#table_student tr:gt(0)').remove();
                    $.each(data.Data, function (i, item) {
                        $('#table_student').append('<tr><td>' + item.StudentID + '</td><td>' + item.StudentName + '</td></tr>');
                    });
                },
                error: function (msg) {
                    alert(msg.responseText);
                }
            });
        }
        var initPagination = function (Count) {
            // 创建分页
            $("#Pagination").pagination(Count, {
                callback: pageselectCallback,
                items_per_page: PageSize //每页显示行数
            });
        }
        function pageselectCallback(page_index, jq) {
            if (!IsInit)
                search(page_index + 1);
            return false;
        }
    </script>
</head>
<body>
    <div> 
        <table id="table_student">
            <tr>
                <th>学生编号</th>
                <th>学生姓名</th>
            </tr>
        </table>
        <div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
    </div>
</body>
</html>

后台用linq实现分页查询

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace WebApplication62.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        [HttpGet]
        public JsonResult GetStudents(int pageIndex, int pageSize)
        {
            JsonResult returnJson = new JsonResult();
            using (StudentClassDataContext scdc = new StudentClassDataContext())
            {
                List<StudentDemo> items = scdc.StudentDemo.Where(u => u.StudentName.Contains("学生"))
                                            .OrderByDescending(u => u.StudentID)
                                            .Take(pageIndex * pageSize)
                                            .Skip((pageIndex - 1) * pageSize)
                                            .ToList();
                int count = scdc.StudentDemo.Count();
                returnJson = Json(new
                {
                    Data = items,
                    Count = count
                }, JsonRequestBehavior.AllowGet);
            }
            return returnJson;
        }
    }
}

曹振华

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery.pagination实现分页查询功能

资源下载1）前台代码@{ Layout = null;} Index var PageSize = 5;//每页行数 var IsInit = true;//初始化 $(function () { search(1, true);//1代表第
复制链接

扫一扫

专栏目录