ABP Razor Page DataTables增加查询功能

ABP MVC/Razor Page 模板生成的基于DataTables.Net的页面支持分页和排序,但缺省情况下不支持查询,需要根据实际情况自行添加。我们可以利用DataTables.Net自带的查询功能实现查询。

首先修改Application项目,增加带有查询的Application服务。先在PagedAndSortedResultRequestDto基础上定义带有关键字的Dto:

    public class OrderNotificationSearchDto: PagedAndSortedResultRequestDto
    {
        public string Key { get; set; }
    }

然后在Application 服务中增加查询服务:

        public async Task<PagedResultDto<OrderNotificationDto>> GetSearchListAsync(OrderNotificationSearchDto input)
        {
            var query = await CreateFilteredQueryAsync(input);
            if (!string.IsNullOrEmpty(input.Key))
            {
                query = query.Where(o => o.InvoiceID.Contains(input.Key)
                || o.OptionName.Contains(input.Key) 
                || o.PackageName.Contains(input.Key)
                || o.BillToEmail.Contains(input.Key));
            }

            var totalCount = await AsyncExecuter.CountAsync(query);

            query = ApplySorting(query, input);
            query = ApplyPaging(query, input);

            var entities = await AsyncExecuter.ToListAsync(query);
            var entityDtos = await MapToGetListOutputDtosAsync(entities);

            return new PagedResultDto<OrderNotificationDto>(
                totalCount,
                entityDtos
            );
        }

然后需要改造客户端,首先将index.js中datatables的设置searching改为true:

   var dataTable = $('#OrderNotificationTable').DataTable(abp.libs.datatables.normalizeConfiguration({
        processing: true,
        serverSide: true,
        paging: true,
        searching: true,

接下来修改ajax的定义:

//ajax: abp.libs.datatables.createAjax(service.getList),
        ajax: abp.libs.datatables.createAjax(service.getSearchList, inputAction, responseCallback),

将getList修改为新的getSearchList,增加新的传入参数和Callback。这两个函数定义如下:

   var inputAction = function (requestData, dataTableSettings) {
        var ctl = $("#OrderNotificationTable_filter input").val();

        return {
            key: ctl,
        };
    };

    var responseCallback = function (result) {

        // your custom code.

        return {
            recordsTotal: result.totalCount,
            recordsFiltered: result.totalCount,
            data: result.items
        };
    };
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容