如何在ABP框架Web应用开发教程的DataTable中实现搜索功能

你遇到的问题核心原因是配置中开启了serverSide: true，该模式下DataTable的搜索、排序、分页逻辑全部由后端接口处理，前端仅做参数传递和结果渲染，仅设置searching: true只会显示搜索框，不会自动生效。你可以按照以下步骤调整：

后端接口调整 #

• 首先修改对应应用服务的查询方法，新增搜索参数接收逻辑，示例代码如下：

public async Task<PagedResultDto<WordDto>> GetListAsync(PagedAndSortedResultRequestDto input, string filter)
{
    // 新增搜索过滤逻辑，根据你的业务需求调整匹配字段
    var query = _wordRepository
        .WhereIf(!string.IsNullOrWhiteSpace(filter), 
            w => w.WordContent.Contains(filter) || w.Remark.Contains(filter)
        );
    
    // 原有排序、分页、DTO映射逻辑保持不变
    var totalCount = await query.CountAsync();
    var items = await query.OrderBy(input.Sorting ?? "Id desc")
        .PageBy(input)
        .ToListAsync();
    
    return new PagedResultDto<WordDto>(totalCount, ObjectMapper.Map<List<Word>, List<WordDto>>(items));
}

前端配置调整 #

• 修改Index.js中的DataTable配置，新增搜索参数传递逻辑，示例代码如下：

var dataTable = $('#WordsTable').DataTable(
   abp.libs.datatables.normalizeConfiguration({
   serverSide: true,
   paging: true,
   order: [[1, "asc"]],
   searching: true,
   scrollX: true,
   // 新增搜索参数传递配置
   ajax: abp.libs.datatables.createAjax(
       // 替换为你实际的后端接口自动生成的代理方法
       yourProjectName.words.word.getList,
       function(data) {
           return {
               filter: data.search.value
           };
       }
   ),
   // 你的原有列配置保持不变
   columnDefs: [
       // ...原有列定义
   ]
   ...

可选优化 #

你可以在配置中新增searchDelay: 500参数，设置输入后延迟500毫秒再发起请求，避免输入过程中频繁调用后端接口。

内容的提问来源于stack exchange，提问作者Metal-Frog