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



数据表是否有任何解决方案,对于仅在DOM中获取过滤数据,我找到了一些解决方案,但对我不起作用。 解释 - 我有带有>250 个对象的角度数据表。我在第一个数据表页面上显示 10 个项目,第二个页面上显示另外 10 个项目,依此类推。此外,我使用过滤器仅显示我需要的数据。对于检查(选择)项目,我使用checklist-model.现在,当我使用过滤器 GREEN 时,数据表仅显示筛选的项目,但是当我单击"全部检查"时,不仅筛选了所有项目,还会选中所有项目。 这是我的 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- 在代码中,某些函数和键仅具有名称,例如,上面的代码可以工作。我只需要,当单击全部检查时,仅检查过滤的数据。谢谢

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

最新更新