带有angularjs的数据表中的自定义列过滤器

Question

我已经使用angularjs实现了服务器端处理数据表，引用了这个link。它很棒。现在我想在像this这样的数据表中添加自定义过滤器。我已经实现了自定义搜索。但在桌子外面。见。但我希望它在表格的标题下方，每个字段上都有关闭图标，如第一个链接所示。我也试过this link。但是我得到了jquery.datatable的错误（e [i]未定义。）。我可以设置PHP端函数来获取过滤数据。所以这对我来说并不担心。我在设置位置的文本/选择框时出现问题，如第一个链接中显示的关闭图标。如果有人可以帮助我，我们将不胜感激。这是我的HTML和JS代码。

HTML

<div class="row" ng-app="tagApp" ng-controller="tagCtrl as tagapp">
    <div class="panel-body">
        <div class="row" style="margin-bottom: 15px;">
            <div class="form-group">
                <div id="searchForm" class="col-md-10">
                    <div class="col-md-6">
                        <input type="text" placeholder="Search Tag" name="tag" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <input type="text" placeholder="Search Description" name="description" class="form-control">
                    </div>
                </div>
                <div class="col-md-2">
                    <button id="searchData" class="btn btn-submit" ng-click="tagapp.dataSearch()">Search</button>
                    <button id="clearSearch" class="btn btn-submit" ng-click="tagapp.clearSearch()">Clear</button>
                </div>  
            </div>
        </div>
        <div id="datatable" class="dataTables_wrapper no-footer">
            <div class="row">
                <div class="col-sm-12 ">
                    <table id="" datatable="" dt-options="tagapp.dtOptions" dt-columns="tagapp.dtColumns" dt-instance="tagapp.dtInstance" class="table table-striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline collapsed row-border hover">
                    </table>
                </div>
            </div>
        </div>    
    </div>
</div>

JS

angular.module('tagApp', ['datatables'])
    .controller('tagCtrl', ['DTOptionsBuilder', 'DTColumnBuilder', '$scope', '$http', '$compile', tagCtrl]);


function tagCtrl(DTOptionsBuilder, DTColumnBuilder, $scope, $http, $compile) {
    var vm = this;

    vm.API_URL = base_path + 'api/v1/';
    vm.dataSearch = dataSearch;
    vm.clearSearch = clearSearch;
    vm.dtInstance = {};
    vm.tags = {};

    var headers = {'Content-Type': 'application/x-www-form-urlencoded'};
    })

    vm.dtOptions = DTOptionsBuilder.newOptions()
        .withOption('ajax', {
            // Either you specify the AjaxDataProp here
            dataSrc: 'data',
            url: vm.API_URL + 'tags',
            type: 'GET',
            headers: headers
        })
        // or here
        .withDataProp('data')
        .withOption('processing', true)
        .withOption('serverSide', true)
        .withOption('lengthMenu', [[5, 10, 50, 100, -1], [5, 10, 50, 100, "All"]])
        .withPaginationType('full_numbers')
        .withOption('createdRow', createdRow);

    vm.dtColumns = [DTColumnBuilder.newColumn('in_tag_id').withTitle('ID').notVisible(),
    DTColumnBuilder.newColumn('st_name').withTitle('Tag'),
    DTColumnBuilder.newColumn('st_description').withTitle('Description').notSortable(),
    DTColumnBuilder.newColumn(null).withTitle('Action').notSortable().renderWith(actionHtml)
];

function createdRow(row, data, dataIndex) {
    // Recompiling so we can bind Angular directive to the DT
    $compile(angular.element(row).contents())($scope);
}

function actionHtml(data, type, full, meta) {
    vm.tags[data.in_tag_id] = data;

    var prmsn = '';
    if (data.action == 1)
    {
        prmsn = '<button class="btn btn-default btn-rounded btn-sm" id="editTag" data-toggle="modal" data-target="#tagModal" ng-click="tagapp.toggle(\'edit\', ' + data.in_tag_id + ')"><span class="fa fa-pencil"></span></button>';
    }
    else
    {
        prmsn = 'NP';
    }
    return prmsn;
}

function dataSearch()
{
    var qrystrng = '?';
    $('#searchForm input').each(function () {
        qrystrng += $(this).attr('name') + '=' + $(this).val() + '&';
    });
    $('#searchForm select').each(function () {
        qrystrng += $(this).attr('name') + '=' + $(this).val() + '&';
    });
    qrystrng = qrystrng.slice(0, -1);
    var link = vm.API_URL + 'tags' + qrystrng;
    vm.dtInstance.changeData(link);
}

function clearSearch()
{
    $('#searchForm input').each(function () {
        $(this).val('');
    });
    $('#searchForm select').each(function () {
        $(this).prop('selectedIndex', 0);
    });
    vm.dataSearch();
}
}

注意：我只使用过这些库。

• jquery.dataTables.min.js
• dataTables.bootstrap.min.js
• 角datatables.min.js