基于jQuery的分页控件（C#）攻略

概述

本文将介绍如何使用jQuery编写基于C#的分页控件。分页控件可以提高页面的易读性和易用性，方便用户查看数据。

分页控件的实现方式

实现一个分页控件主要分为两个部分：

服务端代码，用于提供数据或者查询数据（本文中使用C#做演示）。
客户端代码，用于实现分页控件的交互和显示（本文中使用jQuery做演示）。

服务端代码

为了更好地演示实现过程，这里我将使用C#的AspNet MVC框架作为服务端的实现，它提供了很好的模板支持和工具集，方便我们快速地搭建出一个数据展示和分页的Web应用。

实现步骤

创建一个Asp.Net MVC应用。
配置路由（可以使用默认的）。
定义数据模型，这里以学生信息为例。

public class Student
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Age { get; set; }
}

定义数据访问层，从数据库中获取分页数据。

public interface IStudentRepository
{
    int Count();
    List<Student> GetPageList(int pageIndex, int pageSize);
}

public class StudentRepository : IStudentRepository
{
    private readonly List<Student> _students;

    public StudentRepository()
    {
        _students = new List<Student>();
        for (int i = 1; i <= 100; i++)
        {
            _students.Add(new Student { Id = i, Name = $"Student{i}", Age = 18 });
        }
    }

    public int Count() => _students.Count;

    public List<Student> GetPageList(int pageIndex, int pageSize)
    {
        return _students.Skip((pageIndex - 1) * pageSize).Take(pageSize).ToList();
    }
}

实现控制器，调用数据访问层获得分页数据。

public class StudentController : Controller
{
    private readonly IStudentRepository _repository;

    public StudentController(IStudentRepository repository)
    {
        _repository = repository;
    }

    public ActionResult Index(int pageIndex = 1, int pageSize = 10)
    {
        var totalCount = _repository.Count();
        var pageList = _repository.GetPageList(pageIndex, pageSize);

        ViewBag.TotalCount = totalCount;

        return View(pageList);
    }
}

测试

在浏览器中输入http://localhost:xxx/Student/Index，即可看到分页数据的效果。如果要实现翻页功能，请看下一节。

客户端代码

实现步骤

导入jQuery和分页控件js文件（这里使用了jquery.pagination.js）。

<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/jquery.pagination.js"></script>

创建分页控件容器。

<div id="pagination"></div>

在页面加载完成时初始化分页控件。

$(function () {
    initPagination();
});

function initPagination() {
    $("#pagination").pagination({
        totalData: $("#TotalCount").val(),
        showData: $("#PageSize").val(),
        pageCount: 0, // 分页总数，留空表示自动计算
        current: 1,   // 当前页码
        count: 5,     // 当前分页控件中显示的页码个数
        prevCls: "prev",   // 上一页样式
        nextCls: "next",   // 下一页样式
        activeCls: "active",      // 高亮样式
        coping: true,     // 是否显示首页、尾页
        isHide: true,     // 是否只有一页的时候隐藏分页控件
        homePage: "首页",
        endPage: "尾页",
        prevContent: "<",
        nextContent: ">",
        callback: function (pageIndex) {
            getData(pageIndex);
        }
    });
}

function getData(pageIndex) {
    $.ajax({
        type: "GET",
        url: "/Student/Index",
        data: { pageIndex: pageIndex },
        success: function (data) {
            // 刷新数据
            console.log(data);
        },
        error: function (e) {
            console.log(e);
        }
    });
}

获取分页数据。

public class StudentController : Controller
{
    private readonly IStudentRepository _repository;

    public StudentController(IStudentRepository repository)
    {
        _repository = repository;
    }

    public ActionResult Index(int pageIndex = 1, int pageSize = 10)
    {
        var totalCount = _repository.Count();
        var pageList = _repository.GetPageList(pageIndex, pageSize);

        ViewBag.TotalCount = totalCount;
        ViewBag.PageSize = pageSize;

        return View(pageList);
    }
}

测试

在浏览器中输入http://localhost:xxx/Student/Index，即可看到分页数据和分页控件的效果。您可以点击不同的页码来测试翻页效果。

示例

下面我将展示两个示例，一个是传统的分页效果，另一个是ajax分页。

传统分页

假设我们有一个学生列表，其中包含100条数据，每页显示10条数据。我们需要实现分页，并且每一页都需要从服务器获取数据。

public class HomeController : Controller
{
    private readonly IStudentRepository _repository;

    public HomeController(IStudentRepository repository)
    {
        _repository = repository;
    }

    [HttpGet]
    public IActionResult Index(int pageIndex = 1, int pageSize = 10)
    {
        var totalCount = _repository.Count();
        var pageList = _repository.GetPageList(pageIndex, pageSize);

        ViewBag.TotalCount = totalCount;
        ViewBag.PageSize = pageSize;

        return View(pageList);
    }
}

@model List<Student>

<table>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    @foreach (var student in Model)
    {
        <tr>
            <td>@student.Id</td>
            <td>@student.Name</td>
            <td>@student.Age</td>
        </tr>
    }
</table>

<div id="pagination"></div>

<input type="hidden" id="TotalCount" value="@ViewBag.TotalCount" />
<input type="hidden" id="PageSize" value="@ViewBag.PageSize" />

@section scripts{
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="/js/jquery.pagination.js"></script>

    <script>
        $(function () {
            initPagination();
        });

        function initPagination() {
            $("#pagination").pagination({
                totalData: $("#TotalCount").val(),
                showData: $("#PageSize").val(),
                pageCount: 0,
                current: 1,
                count: 5,
                prevCls: "prev",
                nextCls: "next",
                activeCls: "active",
                coping: true,
                homePage: "首页",
                endPage: "尾页",
                prevContent: "<",
                nextContent: ">",
                callback: function (pageIndex) {
                    getData(pageIndex);
                }
            });
        }

        function getData(pageIndex) {
            $.ajax({
                type: "GET",
                url: "/Home/Index",
                data: { pageIndex: pageIndex },
                success: function (data) {
                    $("table tr:gt(0)").remove();
                    $.each(data, function (i, item) {
                        $("table").append("<tr><td>" + item.Id + "</td><td>" + item.Name + "</td><td>" + item.Age + "</td></tr>");
                    });
                },
                error: function (e) {
                    console.log(e);
                }
            });
        }
    </script>
}

Ajax分页

假设我们有一个学生列表，其中包含100条数据，每页显示10条数据。我们需要实现分页，并且每一页都使用Ajax异步获取数据（请求json格式数据）。

public class HomeController : Controller
{
    private readonly IStudentRepository _repository;

    public HomeController(IStudentRepository repository)
    {
        _repository = repository;
    }

    [HttpGet]
    public IActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public IActionResult GetPageList(int pageIndex = 1, int pageSize = 10)
    {
        var totalCount = _repository.Count();
        var pageList = _repository.GetPageList(pageIndex, pageSize);

        return Json(new { TotalCount = totalCount, PageList = pageList });
    }
}

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody id="list">

    </tbody>
</table>

<div id="pagination"></div>

@section scripts{
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="/js/jquery.pagination.js"></script>

    <script>
        $(function () {
            initPagination();
        });

        function initPagination() {
            $("#pagination").pagination({
                totalData: $("#TotalCount").val(),
                showData: $("#PageSize").val(),
                pageCount: 0,
                current: 1,
                count: 5,
                prevCls: "prev",
                nextCls: "next",
                activeCls: "active",
                coping: true,
                homePage: "首页",
                endPage: "尾页",
                prevContent: "<",
                nextContent: ">",
                callback: function (pageIndex) {
                    getData(pageIndex);
                }
            });
        }

        function getData(pageIndex) {
            $.ajax({
                type: "POST",
                url: "/Home/GetPageList",
                data: { pageIndex: pageIndex },
                dataType: "json",
                success: function (data) {
                    $("#list").empty();
                    $.each(data.PageList, function (i, item) {
                        var html = "<tr><td>" + item.Id + "</td><td>" + item.Name + "</td><td>" + item.Age + "</td></tr>";
                        $("#list").append(html);
                    });

                    $("#pagination").pagination({
                        totalData: data.TotalCount,
                        pageCount: Math.ceil(data.TotalCount / $("#PageSize").val()),
                    });
                },
                error: function (e) {
                    console.log(e);
                }
            });
        }
    </script>
}

总结

通过以上步骤，我们就能够成功地实现基于jQuery的分页控件（C#）。通过自定义的样式和代码，我们能够快速地实现适用于不同场景的分页控件效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于jquery的分页控件(C#) - Python技术站

基于jquery的分页控件(C#)

基于jQuery的分页控件（C#）攻略

概述

分页控件的实现方式

服务端代码

实现步骤

测试

客户端代码

实现步骤

测试

示例

传统分页

Ajax分页

总结

相关文章