Develop Reference

jQuery Datatable preInit event not firing

I would like to access the dropdown list for length display of the jQuery Datatable before the data is loaded in the table, i have a problem that whenever the user select the lenght of records to display in the table , the table resize and trigger window.resize() and i want to access the dropdown list after the table initialization but before the data is loaded, here is what i trying to do but it doesn't work.
let table = $('#data-table').DataTable();
$(document).on('preInit.dt', function (e, settings)
{
$('select[name=data-table_length]').click(function ()
{
console.log('dropdown selected');
window_resize = false;
});
});
table = $('#data-table').DataTable({
destroy: true,
serverSide: false,
autoWidth: false,
paging: true,
order: [[1, 'asc']],
searching: true,
stateSave: true,
scrollX: true,
lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
ajax: {
url: '/Observer/GetActiveClientsByProfileId',
type: 'POST',
data: {
ProfileId: profileId
},
dataSrc: ''
},
columns: [
{
title: 'Zone',
data: 'LastKnownZone',
},
{
]
});

Show "All" pages in DataTables along with responsive tables and other attributes

I dont know how to to merge the function of my current attibutes of responsive and fixed header etc with Show "All" list function like it has in this one https://datatables.net/examples/advanced_init/length_menu.html
I dont know how to do it pls help here is my current function
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
var table = $('#example').DataTable({
responsive: true,
paging: false,
columnDefs: [{
searchable: false,
orderable: false,
targets: 0,
}],
order: [
[1, 'asc']
],
});
new $.fn.dataTable.FixedHeader(table);
table.on('order.dt search.dt', function() {
table.column(0, {
search: 'applied',
order: 'applied'
}).nodes().each(function(cell, i) {
cell.innerHTML = i + 1;
});
}).draw();
});
</script>
i am unable to merge the function with show "All" page length menu in javascript please help.
also please allow me run snippet im very new to js
thank you

var table = $('#example').DataTable({
responsive: true,
paging: false,
// Add this line
lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
columnDefs: [{
searchable: false,
orderable: false,
targets: 0,
}],
order: [
[1, 'asc']
],
});
new $.fn.dataTable.FixedHeader(table);

How to add class for td in datatable when add row runtime?

I want add class to td when get list data by ajax
Default my code html
<tr>
<td>#fisrt.System_Code.Code</td>
<td>#fisrt.System_Code.Caption</td>
<td class="text-success">#string.Format("{0:N0}", maden)</td>
<td class="text-danger">#string.Format("{0:N0}", den)</td>
<td class="text-warning nrt-bd" dir="ltr">#string.Format("{0:N0}", maden - den)</td>
</tr>
When i want get list data after filtering , i dont know how to add class
$.ajax({
type: 'GET',
url: '/Record_Professor/Search_Budget/',
data: { from: from, to: to },
success: function (results) {
results.forEach(function (item) {
$('#table_id').dataTable().fnAddData([
item.Code,
item.Caption,
item.Maden,
item.Daeen,
item.Balance
]);
});
},
error: function (error) {
alert('error; ' + eval(error));
}
});

"className": "Classname", is used to add class at run time
$('#table_id').DataTable({
data: data2,
"autoWidth": false,
deferRender: true,
pageLength: 10,
responsive: true,
scrollCollapse: true,
select: {
style: 'os',
selector: 'td:first-child'
},
"lengthMenu": [
[10, 25, 50, -1],
[10, 25, 50, "All"]
],
"columnDefs": [{
"className": "Classname",
"targets": [5,2,3,4,9,]
}]
});
$('#example').dataTable( {
"columnDefs": [
{ className: "my_class", "targets": [ 3 ] }
]
} );

how to add data in datatable?

I am trying to add data dynamically in datatable.I have initialized table on document.ready and created an instance of it.After that, I am trying to add data in the table using instance.
$(document).ready(function() {
//Initialize tooltips
table_sgdFile_list_linked = $('#sgdFile_list_linked').DataTable({
bSort: false,
destroy:true,
bLengthChange: false,
pageLength: 4,
columns: [{
title: "Name"
},
{
title: "Action"
}
]
});
});
I am trying to bind the data
table_sgdFile_list_linked.data(dataSet)
but it is not working.

my_list = $('#my-table-html-id').DataTable( {
"processing": true,
"serverSide": false,
"paging": true,
"bLengthChange" : true,
"bFilter": false,
"pageLength": 10,
"info": false,
"ordering": true,
"ajax": "PATH-OF-MY-API",
"columnDefs": [
{
"render": function ( data, type, row ) {
var html = data + " Modified!";
return html;
},
"orderable": false,
"targets": 1 //Last column
},
],
})

you can try this:
to add 1 row: table_sgdFile_list_linked.row.add(rowJson).draw();
to add multiple rows: table_sgdFile_list_linked.rows.add(rowsJson).draw();

following worked for me :
table_sgdFile_list_linked.clear().draw();
$('#sgdFile_list_linked').dataTable().fnAddData(trHTML);

Print all data from datatable

I'am using asp.net mvc. when datatable list, send action and response only paging data. if click to print button, I want to all data print.
var table = $('#dataTableNoticeReport');
var oTable = table.dataTable({
"bScrollCollapse": true,
"bDestroy": true,
"paging": true,
"ordering": false,
"info": true,
"bFilter": true,
"bProcessing": true,
"bLengthChange": true,
"bServerSide": true,
"sAjaxSource": "/Manage/Notice/_NoticeDatatable?readStatus=" + $(this).val() + "&noticeId=" + $("#NoticeSearch_Id").val(),
"sServerMethod": "POST",
"aoColumns": [{
"mDataProp": "Name"
}, {
"mDataProp": "SurName"
}, {
"mDataProp": "PhoneNumber"
}, ],
// Internationalisation. For more info refer to http://datatables.net/manual/i18n
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "Tabloda Gösterilecek Kayıt Bulunamadı",
"info": "Gösterilen : _START_ - _END_ / _TOTAL_ ",
"infoEmpty": "Kayıt Bulunamadı.",
"infoFiltered": "(Toplam _MAX_ kayıttan sorgulama yapıldı.)",
"lengthMenu": "_MENU_ Kayıt Sayısı",
"search": "Ara:",
"zeroRecords": "Kayıt Bulunamadı."
},
// Or you can use remote translation file
//"language": {
// url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
//},
dom: 'Bfrtip',
buttons: [{
extend: 'print',
"sButtonText": 'Export',
className: 'btn default',
oSelectorOpts: {
page: 'all'
},
bShowAll: true,
sAjaxSource: "/Manage/Notice/_NoticeDatatable?readStatus=" + $(this).val() + "&noticeId=" + $("#NoticeSearch_Id").val()
}, {
extend: 'copy',
className: 'btn default'
}, {
extend: 'pdf',
className: 'btn default'
}, {
extend: 'excel',
className: 'btn default'
}, {
extend: 'csv',
className: 'btn default'
},
],
"order": [
[0, 'asc']
],
"lengthMenu": [
[5, 10, 15, 20, 5000],
[5, 10, 15, 20, "All"] // change per page values here
],
// set the initial value
"pageLength": 10,
});
it's not working below code.
buttons: [{
extend: 'print',
"sButtonText": 'Export',
className: 'btn default',
oSelectorOpts: {
page: 'all'
},
bShowAll: true,
sAjaxSource: "/Manage/Notice/_NoticeDatatable?readStatus=" + $(this).val() + "&noticeId=" + $("#NoticeSearch_Id").val()
}, {
extend: 'copy',
className: 'btn default'
}, {
extend: 'pdf',
className: 'btn default'
}, {
extend: 'excel',
className: 'btn default'
}, {
extend: 'csv',
className: 'btn default'
},
],
When I was click to print button,return only 10 record but I want to all record print.

I am using the datatables serverside too and this is how I managed to print all data without braking anything: providing the "lengthMenu" option to let user select all data:
$('#table').DataTable({
"ajax": {
url: "my_url",
type: 'POST'
},
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"processing": true,
"serverSide": true,
"bPaginate": true,
"sPaginationType": "full_numbers",
"columns": [
{ "data": "a" },
{ "data": "b" },
{ "data": "c" },
{ "data": "d" },
{ "data": "e" }
],
"dom": 'Blfrtip',
"buttons": [
{
extend: 'print'
}
]
});
});
Here, with providing the "lengthMenu" option, the user can select a range or "All" data to view and if the user wants to export all data, then the user will select the "All" selection from the length menu drop down.

I think when server side is enabled, you need to return the number of records. See the documentation, especially the ajax section. Note the records total in the JSON response:
"recordsTotal": 57,
Here's a good Datatables support thread: https://datatables.net/forums/discussion/32031/pagination-with-server-side-processing. They discuss server side pagination in detail.