如何在DataTable中实现查找（Web应用开发教程）

Question

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

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> 
    {

    }

Notice, we've changed PagedAndSortedResultRequestDto to 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（在页面 -> 图书下）并添加搜索输入。

Index.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（在 Pages -> Books 下）并获取搜索输入的值并将其传递给 GetList 方法。

Index.js

$(function () {

   //get the value of the search input
    var getFilter = function () {
        return {
            filter: $("input[name='Search'").val(),
        };
    };

    var dataTable = $('#BooksTable').DataTable(
        abp.libs.datatables.normalizeConfiguration({
            serverSide: true,
            paging: true,
            order: [[1, "asc"]],
            searching: false,
            scrollX: true,
            ajax: abp.libs.datatables.createAjax(myDemoTest4421.books.book.getList, getFilter), //pass the filter to the GetList method
            columnDefs: [
                {
                    title: 'Name',
                    data: "name"
                },
                {
                    title: 'Type',
                    data: "type",
                    render: function (data) {
                        return data;
                    }
                },
                {
                    title: 'PublishDate',
                    data: "publishDate",
                    render: function (data) {
                        return luxon
                            .DateTime
                            .fromISO(data, {
                                locale: abp.localization.currentCulture.name
                            }).toLocaleString();
                    }
                },
                {
                    title: 'Price',
                    data: "price"
                },
                {
                    title: 'CreationTime', data: "creationTime",
                    render: function (data) {
                        return luxon
                            .DateTime
                            .fromISO(data, {
                                locale: abp.localization.currentCulture.name
                            }).toLocaleString(luxon.DateTime.DATETIME_SHORT);
                    }
                }
            ]
        })
    );
   
   //when search input changed (a new character typed) reload the datatable
   $("input[name='Search'").change(function () {
        dataTable.ajax.reload();
    });
});

执行这些步骤后，您应该可以按名称搜索图书。

如何在DataTable中实现查找（Web应用开发教程）

How to implement the search in the DataTable (Web Application Development Tutorial)

asp.net-mvc

asp.net-core

abp