Develop Reference

lengthChange doesn't show when I add button(print) in datatables

I'm having problem of how to show both lengthChange and print button.
Here's my code:
$(document).ready(function () {
$('.table-driver').DataTable({
"processing": true,
"serverSide": true,
"autoWidth": false,
"ajax": "{{route('users.show')}}",
"columns": [
{ "data": "name", name: "name" },
{ "data": "rate", rate: "rate" },
{ "data": "age", age: "age" },
{ "data": "status", status: "status" },
{"data":"action", action: "action", sort: false}
],
dom: 'Bfrtip',
buttons: [
'print'
]
});
});
Here's the output:
And my desired output:
Beginner of datatables, someone could help me about this please. thanks in adv. Sirs.

I encountered this and I added l to the dom element
like this
dom: 'Blfrtip',
notice the difference
'Bfrtip' and 'Blfrtip'
Hope it helps someone

Here is the doc of Page Length Options : https://datatables.net/examples/advanced_init/length_menu.html
Add option :
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
Add pageLength to the buttons list :
https://datatables.net/reference/button/pageLength
buttons: [ 'pageLength', ... ]

Try this it will help you
$('#t1').DataTable({dom: 'lBfrtip',
buttons: [
'csv'
]});
});

Please change dom: 'Bfrtip', to dom: 'lBfrtip',
Example :- http://jsfiddle.net/p33x5L3t/1/

how To get a large data in Jquerydatatable

I am new in MVC application, I have handled the large data in Jquery datatable Server side script working fine when all data loaded(ex: Select the all Records in particular table).
If I make manual filter (ex: Select * from xxx where zzz=yyy) then I am not able to send parameters to controller action.
Please find the below script.
$(document).ready(function () {
debugger
var oTable = $('#PartUpdate').dataTable({
"bServerSide": true,
"sAjaxSource": "Test/AjaxHandler",
data: $.param({ 'b':'Mani'}),
"bProcessing": true,
buttons: [
'csv', 'excel', 'print'
],
"aoColumns": [
{
"sName": "ID",
"bSearchable": false,
"bSortable": false,
"fnRender": function (oObj) {
return 'View';
}
},
{ "sName": "UserName" },
{ "sName": "FullName" },
{ "sName": "EmailId" }
]
});
});

DataTables - scrollX causing squashed header

So I'm using DataTables with the scrollX parameter set to true, however it's causing the thead columns to collapse.
Note: the datatable is appearing inside a Bootstrap Modal as part of a react project.
How can I resolve this?
When I click on one of the columns, causing it to refresh, it fixes itself. Also, if I remove the scrollX it also doesn't collapse.
Initialisation code:
$('#item-search').DataTable( {
ajax: {
"data": {
type: "map_items",
map_id: this.map_id
},
"dataSrc": (r) => {
console.log(r);
return r.data;
},
type: "POST",
url: "src/php/search.php"
},
autoWidth : false,
columns: [
{
"data": "brand"
},
{
"data": "name"
},
{
"data": "quantity"
},
{
"data": "measurement"
},
{
"data": "type"
},
],
dom: 'rtlip',
language: {
"info": "Showing page _PAGE_ of _PAGES_",
"infoFiltered": ""
},
lengthMenu: [ 1, 2, 3 ],
pageLength: 1,
processing: true,
responsive: true,
scrollX: true,
select: {
style: "multi"
},
serverSide: true
});

In data table initialization include following property.
autoWidth : true
Along with add this
"fnInitComplete": function(oSettings) {
$( window ).resize();
}
"fnDrawCallback": function(oSettings) {
$( window ).trigger('resize');
}

DataTable should be initialized with the following code to achieve horizontal scrolling:
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true,
"fixedColumns": {
"leftColumns": 1
}

This work in my angular project
this.dtTarifas = {
scrollX: true,
autoWidth: false,
lengthChange: false,
responsive: false
}
I have in my package.json "angular-datatables": "7.0.0"

$('#DataTableID').DataTable({
//"scrollX": true,
"initComplete": function (settings, json) {
$("#DataTableID").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");
},
});

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.

Incorrect header when exporting to PDF with yadcf filter

When I am trying to export to pdf my Datatable with a filter yadcf, the header show always every case from my filter, how can I hide that?
My javascript is :
var vsan = $('#vsan').DataTable( {
"lengthMenu": [ [-1, 10, 40, 50], ["All", 10, 40, 50] ],
"sDom": '<"top"i>fBltif',
"buttons": [
{
extend: 'print',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'excel',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdfHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'copyHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'csv',
exportOptions: {
columns: ':visible'
}
}
],
"bJQueryUI": true, //Enable jQuery UI ThemeRoller support
"bAutoWidth": false,
"bDestroy": true,
//"order": [[ 3, "desc" ]], //tri par défaut
"bStateSave": false, //plante ?
"bPaginate": true, //Enable or disable pagination.
"bInfo": true,
});
yadcf.init(vsan, [{column_number : 0, filter_type : "none"}, {column_number : 1, filter_type : "none"}, {column_number : 2, filter_type : "none"}, {column_number : 3, filter_type : "select"}, {column_number : 4, filter_type : "auto_complete"}, {column_number : 5, filter_type : "range_number_slider"},{column_number : 6, filter_type : "none"}, {column_number : 7, filter_type : "range_number_slider"}]);
Here is the problem :
i'm using :
http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js
https://rawgit.com/vedmack/yadcf/8e071af195106fa702f942373c65164b89ca40ff/jquery.dataTables.yadcf.js
Thanks

Ok i did it, but i think it s very weird :
exportOptions: {
columns: ':visible' ,
format: {
header: function ( data, column, row )
{
return data.substring(data.indexOf("inline-block")+15,data.indexOf("<span"));
}
}
}
I don't know if is it to me to patch that, or maybe there is a bug, but the point is that it works !

I too faced this issue and I did something like below:-
exportOptions: {
columns: ':visible' ,
format: {
header: function ( data, column, row )
{
return data.split('<')[0];
}
}
}
It worked for me. This will remove the div which is getting added.
When I checked my header data was something like: -
column name<div id="yadcf-filter-wrapper--crime_table-7" class="yadcf-filter-wrapper"><select id="yadcf-filter--crime_table-7" class="yadcf-filter " onchange="yadcf.doFilter(this, '-crime_table', 7, 'contains');" onkeydown="yadcf.preventDefaultForEnter(event);" onmousedown="yadcf.stopPropagation(event);" onclick="yadcf.stopPropagation(event);"><option value="-1">Select Column</option>............................<button type="button" id="yadcf-filter--crime_table-7-reset" onmousedown="yadcf.stopPropagation(event);
So I split the div from the column name and kept just the header.