Question

我正在尝试使用角度数据表进行服务器端处理。为了过滤结果，我无法使用列过滤器插件，因为我想实现自己的自定义搜索字段和自定义“搜索”按钮，该按钮将触发对服务器的新查询。

我使用DTOptions withFnServerData而不是withOption('ajax',...)从服务器获取数据，因为这样我可以重用封装URL的角度服务，并且它适用于分页和排序。这是视图中的简化代码：

<div ng-controller="myController">
    <div ng-click="makeQuery()">Search</div>
    <table id="mytable" datatable=""  dt-instance="dtInstance" dt-options="dtOptions" dt-columns="dtColumns" >
    </table>
</div>

控制器的javascript（省略dtColumns）：

$scope.makeQuery = function() {
// how do I trigger a query to the server from here,
// that does exactly the same as the function passed to withFnServerData ?
}
$scope.dtInstance = {};

$scoper.dtOptions = DTOptionsBuilder
.newOptions()
.withBootstrap()
.withOption('responsive', true)
.withOption('processing', false)
.withOption('serverSide', true)
.withOption('searching', false)
.withPaginationType('full_numbers')
.withDataProp('data')
.withFnServerData(function (sSource, aoData, fnCallback, oSettings) {
    var draw = aoData[0].value;
    var columns = aoData[1].value;
    var order = aoData[2].value;
    var start = aoData[3].value;
    var length = aoData[4].value;
    var search = aoData[5].value;

    var queryFilter = ... // build my custom filter params extracting values from the aoData variables above

    //dataProvider encapsulates a call to the right URL using $http and returns a promise
    dataProvider(queryFilter).then(function(response) {
        var records = {
            'draw': draw,
            'recordsTotal': response.data.numRecords,
            'recordsFiltered': response.data.numRecords,
            'data': response.data.records
        };
        fnCallback(records);
    });
});

但是当我点击自定义搜索按钮时，我不知道如何触发新的服务器查询。

我的具体问题是：

实际上是否可以使其与withFnServerData一起使用？
我在此处找到了另一篇帖子Angular-DataTables custom filter，建议使用$scope.dtInstance.reloadData()，但该示例使用了DTOptions withOption('ajax', ...)，我试图避免使用。

这是让它运作的唯一方法吗？欢迎任何帮助。谢谢！

使用角度数据表withFnServerData

0 个答案: