有没有数据表的解决方案,为了只获取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
答案 0 :(得分:0)
是的,我知道,这是一个将近3年的问题,但这就是我今天的问题,我这样解决了这个问题:$scope.dtInstance.DataTable.rows( { search: 'applied' } ).data()