如何实现DataTable中的搜索（Web应用开发教程）

Question

我对 ABP 框架完全陌生。我遵循了“Web 应用程序开发教程”。现在我想使用数据表中的搜索。在文件“Index.js”中，我将“搜索”设置为“true”，但什么也没有发生。

var dataTable = $('#WordsTable').DataTable(
   abp.libs.datatables.normalizeConfiguration({
   serverSide: true,
   paging: true,
   order: [[1, "asc"]],
   searching: true,
   scrollX: true,
   ...

怎样才能实现搜索呢？
问候，汤姆

Answer 1

如果您searching:true为数据表设置，它只会按行搜索当前页面值。（https://datatables.net/reference/option/searching）

因此，如果您想根据所有记录搜索记录，您需要在.cshtml文件中添加搜索输入并获取该搜索输入的值并将该值传递给GetList方法（当然您需要重写也来自 YourAppService 的 GetList 方法）。

脚步：

• 创建新的DTO

MySearchFilterDto.cs ->（在 ApplicationContracts 下）

public class MySearchFilterDto : PagedAndSortedResultRequestDto
{
   public string Filter { get; set; }
}

• 更改IBookAppService和BookAppService

IBookAppService.cs

public interface IBookAppService :
        ICrudAppService< 
            BookDto, 
            Guid, 
            MySearchFilterDto, //Used for paging/sorting + filtering (we've defined)
            CreateUpdateBookDto> 
    {

    }

请注意，我们已更改PagedAndSortedResultRequestDto为MySearchFilterDto.

BookAppService.cs

public class BookAppService :
        CrudAppService<
            Book, 
            BookDto,
            Guid, 
            MySearchFilterDto, //Used for paging/sorting + filtering (we've defined)
            CreateUpdateBookDto>, 
        IBookAppService 
    {
        public BookAppService(IRepository<Book, Guid> repository)
            : base(repository)
        {

        }

        //override the GetList method to enable searching (in here I only search by book name, you can also search by other props)
        public override async Task<PagedResultDto<BookDto>> GetListAsync(MySearchFilterDto input)
        {
            var queryable = await base.Repository.GetQueryableAsync();
            var query = queryable.WhereIf(!string.IsNullOrWhiteSpace(input.Filter), book => book.Name.ToLower()
                .Contains(input.Filter.ToLower()))
                .OrderBy(input.Sorting ?? nameof(Book.Name).ToLower())
                .PageBy(input);


            var count = await AsyncExecuter.CountAsync(query);
            var books = await AsyncExecuter.ToListAsync(query);

            var result = ObjectMapper.Map<List<Book>, List<BookDto>>(books);

            return new PagedResultDto<BookDto> { Items = result, TotalCount = count };
        }
    }

• 打开Index.cshtml（在“页面”->“书籍”下）并添加搜索输入。

索引.cshtml

//...

<abp-card>
    <abp-card-header>
        <h2>@L["Books"]</h2>
    </abp-card-header>
    <abp-card-body>
        <abp-column size="_3">
           Search: 
            <input name="Search" /> @* add search input *@
        </abp-column>
        <abp-table striped-rows="true" id="BooksTable"></abp-table>
    </abp-card-body>
</abp-card>

• 打开Index.js（在“页面”->“图书”下）并获取搜索输入的值并将其传递给 GetList 方法。

索引.js

//...

<abp-card>
    <abp-card-header>
        <h2>@L["Books"]</h2>
    </abp-card-header>
    <abp-card-body>
        <abp-column size="_3">
           Search: 
            <input name="Search" /> @* add search input *@
        </abp-column>
        <abp-table striped-rows="true" id="BooksTable"></abp-table>
    </abp-card-body>
</abp-card>

执行这些步骤后，您应该能够按名称搜索您的图书。