检查全部 - 仅在角度数据表中过滤数据

时间:2017-04-13 13:49:10

标签: javascript jquery angularjs datatables

有没有数据表的解决方案,为了只获取DOM中的过滤数据,我找到了一些解决方案但不适合我。 说明 - 我有角度数据表,其中包含> 250个对象。我在第一个数据表页面上显示10个项目,在第二个页面上显示另外10个等等。此外,我使用过滤器仅显示我需要的数据。对于检查(选择)项目,我使用checklist-model。现在,当我使用过滤器GREEN时,数据表只显示过滤的项目,但是当我单击CHECK ALL时,所有项目都会被检查,不仅被过滤。 这是我的HTML:

<table id="strip_table" ng-if="isTherePersons" datatable="ng" dt-options="showCase.dtOptions" dt-column-defs="showCase.dtColumnDefs" class="dataTable row-border table-hover" ng-cloak>
        <thead>
            <tr>
                <th width="2%"></th>
                <th width="5%" class="th_datatables">{{'ID'| translate}}</th>
                <th width="5%" class="th_datatables">{{'TYPE'| translate}}</th>
                <td width="5%"></td>
            </tr>

        </thead>
        <tbody class="table_klupe">
            <tr role="row" ng-repeat="a in city">
                <td><input type="checkbox" checklist-model="selected.a" checklist-value="a.id" ng-click="selecteda(selected.a)"></td>
                <td such-href="info/{{a.id}}">{{::a.id}}</td>
                <td such-href="info/{{a.id}}">{{::a.type}}</td>

            </tr> 

        </tbody>
        <tr>
            <button ng-click="checkAll()" ng-model="option">check all</button>
            <button ng-click="uncheckAll()">uncheck all</button>
            </tr>
        <tfoot>

            <tr>
                <td></td>
                <td></td>
                <td>Type</td>
                <td>Location</td>
                <td>Country</td>
                <td></td>
                <td></td>

            </tr>
        </tfoot>  

    </table>

用于检查(选择项目)这是控制器

$scope.selecteda = function (odabrano) {
        if (odabrano.length > 0) {
            $scope.aSelected = true;
        } else {
            $scope.aSelected = false;
        }
    };
    $scope.selected = {
        a: []
    };
    $scope.selected = {};
    $scope.checkAll = function () {
        $scope.aSelected = true;
        $scope.selected.a= $scope.a.map(function (item) {
            return item.id;
        });
    };
    $scope.uncheckAll = function () {
        $scope.aSelected = false;
        $scope.selected.a= [];
    };

这里是数据表的控制器

var vm = this;
    vm.persons = [];
    vm.dtOptions = DTOptionsBuilder.newOptions()
            .withPaginationType('full_numbers')
            .withDisplayLength(10)
            .withOption('order', [1, 'desc'])
            .withOption('stateSave', true)
            .withButtons([
                {extend: 'excel', title: 'Export'},
{
  extend: 'pdf',
  filename: 'Previsto arrivo per marca',
  title: "",
  orientation: "landscape",
  customize: function (doc, btn) {

    doc.footer = function (currentPage, pageCount) {
      return {
        text: currentPage.toString() + ' di ' + pageCount,
        alignment: 'center',
        margin: [10, 10, 10, 10]
      };
    };

    doc.header = function (currentPage, pageCount) {
      return {text: 'Previsto arrivo per marca', style: 'header'};
    }

    doc.styles.header = {
      fontSize: 22,
      bold: true,
      alignment: 'center',
      margin: [10, 10, 10, 10]
    };

    doc.styles.tableHeader.fontSize = 10;
    doc.styles.tableFooter.fontSize = 10;
    doc.styles.tableBodyOdd.fontSize = 9;
    doc.styles.tableBodyEven.fontSize = 9;
  }
},
{
  extend: 'print',
  customize: function (win) {
    $(win.document.body).addClass('white-bg');
    $(win.document.body).css('font-size', '10px');

    $(win.document.body).find('table')
      .addClass('compact')
      .css('font-size', 'inherit');
  }
}
            ])
            .withColumnFilter({
                aoColumns: [
                    null,
                    null,
                    {
                        type: 'select',
                        bRegex: false,
                        values: function (aoData, oSettings) {
                            var keys = new Array();
                            var values = new Array();
                            for (i = 0; i < aoData.length; i++) {
                                var item = aoData[i]._aData[3];
                                if (keys[item] == null) {
                                    keys[item] = true;
                                    //values.push(item);
                                    values.push({value: item, label: 'The ' + item});
                                }
                            }
                            console.log(values);
                            return values;
                        }
                    },
                    {
                        type: 'select',
                        bRegex: false,
                        values: function (aoData, oSettings) {
                            var keys = new Array();
                            var values = new Array();
                            for (i = 0; i < aoData.length; i++) {
                                var item = aoData[i]._aData[3];
                                if (keys[item] == null) {
                                    keys[item] = true;
                                    //values.push(item);
                                    values.push({value: item, label: 'The ' + item});
                                }
                            }
                            return values;
                        }
                    },
                    {
                        type: 'select',
                        bRegex: false,
                        values: function (aoData, oSettings) {
                            var keys = new Array();
                            var values = new Array();
                            for (i = 0; i < aoData.length; i++) {
                                var item = aoData[i]._aData[3];
                                if (keys[item] == null) {
                                    keys[item] = true;
                                    //values.push(item);
                                    values.push({value: item, label: 'The ' + item});
                                }
                            }
                            return values;
                        }
                    },
                    null,
                    null,
                    {
                        type: 'select',
                        bRegex: false,
                        values: function (aoData, oSettings) {
                            var keys = new Array();
                            var values = new Array();
                            for (i = 0; i < aoData.length; i++) {
                                var item = aoData[i]._aData[3];
                                if (keys[item] == null) {
                                    keys[item] = true;
                                    //values.push(item);
                                    values.push({value: item, label: 'The ' + item});
                                }
                            }
                            return values;
                        }
                    },
                    {
                        type: 'select',
                        bRegex: false,
                        values: function (aoData, oSettings) {
                            var keys = new Array();
                            var values = new Array();
                            for (i = 0; i < aoData.length; i++) {
                                var item = aoData[i]._aData[3];
                                if (keys[item] == null) {
                                    keys[item] = true;
                                    //values.push(item);
                                    values.push({value: item, label: 'The ' + item});
                                }
                            }
                            return values;
                        }
                    }
                ]

            });
    vm.dtColumnDefs = [
        DTColumnDefBuilder.newColumnDef(null).notSortable(0),
        DTColumnDefBuilder.newColumnDef([3]).withOption('date')
    ];

OT- 这里在代码中,一些函数和键只有名称,例如,这个代码在上面工作。我只需要点击CHECK ALL,只检查过滤后的数据。日Thnx

1 个答案:

答案 0 :(得分:0)

是的,我知道,这是一个将近3年的问题,但这就是我今天的问题,我这样解决了这个问题:$scope.dtInstance.DataTable.rows( { search: 'applied' } ).data()