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

Question

I'm absolutely new to the ABP-Framework. I've followed the "Web Application Development Tutorial". Now I want to use the search in the DataTable. In the file "Index.js" I've set the "search" to "true" but nothings happens.

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

How can the search be implemented?
Regards, Tom

Answer 1

If you set searching:true for your datatable it only searches through current page values by row. (https://datatables.net/reference/option/searching)

So, if you want to search records according to your all records, you need to add a search input on your .cshtml file and get the value of that search input and pass this value to the GetList method(of course you need to override the GetList method from YourAppService as well).

Steps:

• Create a new DTO

MySearchFilterDto.cs -> (under ApplicationContracts)

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

• Change the IBookAppService and 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 };
        }
    }

• Open your Index.cshtml (under Pages -> Books) and add the search input.

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>

• Open your Index.js (under Pages -> Books) and get the value of the search input and pass it to the GetList method.

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();
    });
});

---

After following these steps, you should be able to search your books by name.