Pulling Data Piece by Piece in a Data Table. | Help
Pulling Data Piece by Piece in a Data Table. | Help
TurksEmperor
Posts: 9Questions: 3Answers: 0
in General
Hello, I have a lot of data in my table. For this reason, there is a lot of waiting while the page is loading. my table displays 10 rows on the first page.
I have a request like this;
When the page is first opened, it only needs to display the first 10 lines. can we load the second page only when we click the next button?
Is it possible to do this?
My English is not very good. I'm sorry for that.
The codes I use in the table are as follows.
$(function () {
// Setup - add a text input to each footer cell
$('#example5 tfoot th').each(function () {
var title = "Arama Yap"/* $(this).text();*/
$(this).html('<input type="text" placeholder="' + title + '" />');
});
// DataTable
var table = $('#example5').DataTable({
dom: 'Bfrtip',
lengthMenu: [
[10, 25, 50, 100, 500, 1000, -1],
['10 Satır Göster', '25 Satır Göster', '50 Satır Göster', '100 Satır Göster', '500 Satır Göster', '1000 Satır Göster', 'Hepsini Göster']
],
buttons: ['pageLength'],
"buttons": [{
text: 'Yeni Personel Ekle',
className: 'btn-info',
action: function (e, dt, node, config) {
alert('Personel Eklemek İçin Personel Tablosunun Yukarısında Bulunan Açılabilen Alana Dokunun.');
/*location.href = "/PersonelList/Create";*/
}
},
{
extend: 'colvis',
text: '<i">Sütun Aç/Kapa</i>',
className: 'btn-warning',
},
{
extend: 'pageLength',
text: '<i">Satır Göster</i>',
className: 'btn-warning',
},
{
extend: 'copyHtml5',
text: '<i">Kopyala</i>',
className: 'btn-success',
exportOptions: {
columns: [0, ':visible']
}
},
{
extend: 'excelHtml5',
className: 'btn-success',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdfHtml5',
className: 'btn-success',
exportOptions: {
columns: [0, 1, 2, 3, 4, 5, 6]
}
},
{
extend: 'print',
message: 'Tozlu.com',
className: 'btn-danger',
exportOptions:
{
columns: [0, 1, 2, 3, 4, 5, 6]
}
}
],
select: true,
fixedHeader: true
});
// Apply the search
table.columns().every(function () {
var that = this;
$('input', this.footer()).on('change', function () {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});
});
Replies
This section of the FAQ should help, it discusses various techniques to improve performance.
deferRender
, orserverSide
should help you out,Cheers,
Colin
Your guidance got me the result I was looking for.
Thank you very much for your interest.