ABP Razor Page DataTables增加查询功能(续)

在《ABP Razor Page DataTables增加查询功能》中我们使用DataTables.Net自带的Search实现查询功能，但很多情况下我们希望有多个查询条件输入，在输入查询条件后按查询按钮再执行查询。这种情况下，需要增加查询条件控件和查询按钮，在查询按钮事件中触发查询。服务端的代码与《ABP Razor Page DataTables增加查询功能》中介绍得相同，这里只介绍客户端的实现。

首先在页面上增加查询条件输入框和查询按钮：

 <input type="text" id="txtKey" />   <abp-button id="SearchButton"
                                                                text="@L["Search"].Value"
                                                                icon="search"
                                                                button-type="Primary" />

然后在index.js页面中修改ajax：

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

在inputAction中获取输入的查询条件：

    var inputAction = function (requestData, dataTableSettings) {
        var ctl = $("#txtKey").val();
        return {
            key: ctl,
        };
    };

还要增加按钮的click事件响应：

    $('#SearchButton').click(function (e) {
        dataTable.ajax.reload();
    });