I have this task where i have to display all the data from the table which i will provide it with an image, but i can only display the data that are shown in the data table when the pagination is: false. I need to display all the data when the pagination is: true.
This is the image display
<input class="form-control-xs" type="date" id="start" onchange="table.column(3).search(this.value).draw();">
<script>
'use strict'
let url='{{ $objApi }}';
let columnDef=[
{"title":"ID","data":"0"},
{"title":"Method","data":"1"},
{"title":"Path","data":"2"},
{"title":"Date","data":"3"},
{"title":"Counter","data":"4"}
];
let table=$('#adminuser').DataTable({
columns: columnDef,
processing: true,
serverSide: true,
paging: true,
ajax: {
'url': url,
'method': 'GET'
},
"searchCols": [
null,
null,
null,
{"search": currentDate},
null
],
"order": [[4, 'desc']],
language: {
searchPlaceholder: 'Search...',
sSearch: '',
lengthMenu: '_MENU_ items/page',
},
});
</script>
var ctx = document.getElementById("canvas").getContext("2d");
const data = {
labels: [],
datasets: [{
label: 'Counter',
data: [],
backgroundColor: [
'rgba(90, 57, 228, 0.7)',
'rgba(84, 73, 44, 1)',
'rgba(143, 105, 20, 0.1)',
'rgba(74, 3, 153, 0.1)',
'rgba(81, 35, 162, 0.6)'
]
}]
};
let mychart = new Chart(ctx, { type: 'pie', data: data, options: {plugins: {legend: {display: false}}},});
table.on( 'draw', function ()
{
rows=table.rows().data().toArray();
console.log(rows);
let labels=[];
let data=[];
rows.forEach((element) => {
labels.push(element[2] + ' ' + element[1]);
data.push(element[4]);
});
mychart.data.labels = labels;
mychart.data.datasets[0].data = data; // or you can iterate for multiple datasets
mychart.update(); // finally update our chart
} );