is there any solution for datatables, for get only filtered data in DOM, I found some solution but not working for me.
Explanation - I have angular datatables with >250 objects. And I show 10 items on first datatables page, second page another 10 etc. Also, I use filters for show only data what I need. For check (select) item I use checklist-model. And now, when I use filter GREEN, datatables show me only filtered items, but when I click CHECK ALL, all items are checked not only filtered.
here is my 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>
for check (select item) this is controller
$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= [];
};
and here is controller for datatables
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- here in code, some function and key have name only for example, this code above working. I only need, when click on CHECK ALL, check only filtered data. Thnx
