ASP.NET Core表格如何通过库快速实现分页/排序/搜索功能？

后端实现方案 #

Entity Framework Core 原生支持 #

如果你的项目已经在用EF Core，直接用它的原生方法就能搞定，无需额外装包，新手友好：

• 分页：通过Skip((pageIndex-1)*pageSize).Take(pageSize)实现
• 排序：根据前端传入的字段，动态拼接OrderBy或OrderByDescending
• 搜索：在查询中添加Where条件，匹配目标字段的关键词

示例代码：

public async Task<(List<YourModel> Data, int TotalCount)> GetTableData(int pageIndex, int pageSize, string sortField, string sortDir, string searchKeyword)
{
    var query = _dbContext.YourModels.AsQueryable();

    // 搜索逻辑
    if (!string.IsNullOrEmpty(searchKeyword))
    {
        query = query.Where(m => m.Name.Contains(searchKeyword) || m.Description.Contains(searchKeyword));
    }

    // 排序逻辑
    if (!string.IsNullOrEmpty(sortField))
    {
        query = sortDir == "desc" 
            ? query.OrderByDescending(m => EF.Property<object>(m, sortField)) 
            : query.OrderBy(m => EF.Property<object>(m, sortField));
    }

    var totalCount = await query.CountAsync();
    var data = await query.Skip((pageIndex - 1) * pageSize).Take(pageSize).ToListAsync();

    return (data, totalCount);
}

PagedList.Core #

专门的分页封装库，简化分页逻辑，返回包含分页元数据的集合：

1. 安装包：Install-Package PagedList.Core
2. 示例用法：

public async Task<IPagedList<YourModel>> GetPagedTableData(int pageIndex, int pageSize, string searchKeyword)
{
    var query = _dbContext.YourModels.AsQueryable();
    if (!string.IsNullOrEmpty(searchKeyword))
    {
        query = query.Where(m => m.Name.Contains(searchKeyword));
    }
    return await query.ToPagedListAsync(pageIndex, pageSize);
}

返回的IPagedList自带TotalItemCount、PageCount等分页信息，直接传给前端即可。

前端实现方案 #

Bootstrap Table #

基于Bootstrap的轻量表格插件，开箱即用支持分页、排序、搜索：

1. 引入依赖（项目已用Bootstrap的话，仅需添加表格专属JS和CSS）
2. 初始化示例：

<table id="dataTable" data-toggle="table"
       data-url="/YourController/GetTableData"
       data-pagination="true"
       data-search="true"
       data-sortable="true"
       data-page-size="10"
       data-side-pagination="server">
    <thead>
        <tr>
            <th data-field="id" data-sortable="true">ID</th>
            <th data-field="name" data-sortable="true">名称</th>
            <th data-field="description">描述</th>
        </tr>
    </thead>
</table>

data-side-pagination="server"表示由后端处理分页、排序、搜索，插件会自动把page、limit、sort、order、search等参数传给后端接口。

DataTables #

功能更全面的表格插件，配置灵活：

1. 引入依赖
2. 初始化示例：

<table id="dataTable" class="display" style="width:100%"></table>

<script>
$(document).ready(function() {
    $('#dataTable').DataTable({
        "ajax": "/YourController/GetTableData",
        "serverSide": true,
        "pagination": true,
        "searching": true,
        "ordering": true,
        "columns": [
            { "data": "id" },
            { "data": "name" },
            { "data": "description" }
        ]
    });
});
</script>

开启serverSide: true后，插件会自动向后端发送分页、排序、搜索参数，后端按参数处理后返回指定格式的JSON数据即可。

注意事项 #

• 后端接口需接收前端传入的分页（页码、每页条数）、排序（字段、方向）、搜索关键词参数
• 使用前端插件的服务端模式时，需注意参数名称与插件约定一致，或在后端做参数映射
• 搜索逻辑可根据需求调整，比如模糊匹配、精确匹配，或多字段组合搜索

内容的提问来源于stack exchange，提问作者UTrocket23