Question

注意：我前一天也问过类似的问题，但这个问题的问题是不同的。所以我在一个单独的帖子中创建了这个问题而没有编辑上一个。

我正在使用Angular-datatable与 withFnServerData 选项进行服务器分页。我想添加一个列过滤器，以便它只过滤掉已经在浏览器中呈现的数据。我正在使用此pluncker中显示的实现来过滤掉数据。我面临的问题是，此时我尝试使用列过滤，它也访问withFnServerData自定义方法。因此，它再次尝试进行ajax调用。但我想要的是过滤和突出显示已在浏览器中呈现的数据。所以我认为这里有一些重要的东西。或者这是正常的行为？

我的代码：

    angular.module('cdms', ['datatables', 'datatables.columnfilter'])
    .controller('visitCtrl', visitCtrl);

function visitCtrl(DTOptionsBuilder, DTColumnBuilder , $scope) {
    var vm = this;
    vm.dtOptions = DTOptionsBuilder.newOptions()
        .withFnServerData(serverData)
        .withDataProp(withDataDrop)
        .withOption('processing', true)
        .withOption('serverSide', true)
        .withPaginationType('full_numbers');


    vm.dtColumns = [
        DTColumnBuilder.newColumn(null).withTitle('Visit Number').withOption('defaultContent', '').renderWith(visitNumberWithLink),
        DTColumnBuilder.newColumn('patient.chartNumber').withTitle('Chart Number').withOption('defaultContent', ''),
        DTColumnBuilder.newColumn('patient.fullName').withTitle('Full Name').withOption('defaultContent', '')
    ];

    function withDataDrop(json)
    {
        //console.log(" ajax > post > success > response > ", json.data);
        json.draw = vm.dtDraw;

        json.recordsTotal = json.data.totalResults;
        json.recordsFiltered = json.data.totalResults;
        return json.data.results;
    }

    function visitNumberWithLink(data, type, full, meta) {
        var returnVisitNumberWithLink  = '<a class="visitlink" value="'+data.visitNumber+'" target="_blank" ' +
            'href="/secure/user/visit/'+data.visitId+'">'+data.visitNumber+'</a>' ;

        return returnVisitNumberWithLink ;
    }

    function serverData(sSource, aoData, fnCallback, oSettings) {

        //All the parameters you need is in the aoData variable
        var draw = aoData[0].value;
        var order = aoData[2].value;
        var start = aoData[3].value;
        var length = aoData[4].value;

        vm.dtDraw = draw;
        var page = start == 0 ? 1 : (start/length);
        vm.page = page ;

        oSettings.jqXHR = $.ajax({
                'dataType': 'json',
                'type': 'POST',
                'url': 'secure/restapi/visits/all?page='+page+'&perPage='+length,
                'data': aoData,
                'success': fnCallback
            });
    }

    vm.dtInstance = {};
    vm.dtInstanceCallback = dtInstanceCallback;

    function dtInstanceCallback(dtInstance) {
        vm.dtInstance = dtInstance;
        var id = '#'+vm.dtInstance.id ;
        var table = vm.dtInstance.DataTable;
        $( id + ' tfoot th').each(function() {
            var title = $(id + ' thead th').eq($(this).index()).text();
            $(this).html('<input type="text" placeholder="Search ' + title + '" />');
        })
        table.columns().eq(0).each(function(colIdx) {
            $('input', table.column(colIdx).footer()).on('keyup change', function() {
                table.column(colIdx).search(this.value).draw();
            });
        });
    }

HTML部分：

<div ng-controller="visitCtrl as showCase">
                            <table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" dt-instance="showCase.dtInstanceCallback" class="row-border hover">
                                <tfoot>
                                <tr>
                                    <th>visitNumberSearch</th>
                                    <th>ChartNumber</th>
                                </tr>
                                </tfoot>
                            </table>
                            </div>
                        </div>

在github页面中提出了

issue。

在角度数据表中，如何仅过滤渲染数据

0 个答案: