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/
Related
When i added excel button in data table the page length selection option disappeared.
Language : C#
VisualStudio: 15.9.24
Initalize Data Table
$(".datatable").dataTable({
language: {
search: "<span>Filter:</span> INPUT",
searchPlaceholder: "Type to filter...",
lengthMenu: "<span>Show:</span> MENU",
paginate: { "first": "First", "last": "Last", "next": $("html").attr("dir") == "rtl" ? "←" : "→", "previous": $("html").attr("dir") == "rtl" ? "→" : "←" }
},
"autoWidth": false,
dom: "Bfrtip",
buttons: [{ extend: "excelHtml5",
exportOptions: {
columns: [0,1,2]},
footer: true }]
});
You can replace dom: "Blfrtip" in place dom: "Bfrtip",
I have an existing JQuery code for DataTable which lets the hidden first column be in order of Descending.
<script>
$(document).ready(function() {
$('#dataTables-example').DataTable( {
order:[[0,"desc"]],
"columnDefs": [
{
"targets": [ 0 ],
"visible": false,
"searchable": false
}
]
} );
} );
</script>
And I want to add this lines of codes, which I copied from DataTables.net
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );
How should it be done? I tried doing this:
<script>
$(document).ready(function() {
$('#dataTables-example').DataTable( {
order:[[0,"desc"]],
"columnDefs": [
{
"targets": [ 0 ],
"visible": false,
"searchable": false
}
],
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );
</script>
But it won't work. Can someone help me correct the format?
I would like to add another relevant information to be added too. On the Print button as well as PDF button, I would like it to be in Landscape mode and with Added custom message. Like this:
extend: 'pdfFlash',
messageTop: 'PDF created by Buttons for DataTables.'
Can someone help me with this? Thank you.
You need to create array of buttons, try this way
$(document).ready(function () {
$('#dataTables-example').DataTable({
order: [[0, "desc"]],
"columnDefs": [
{
"targets": [0],
"visible": false,
"searchable": false
}
],
dom: 'Bfrtip',
buttons: [
{ extend: 'copy' },
{ extend: 'csv' },
{ extend: 'excel' },
{ extend: 'pdf', title: 'ExampleFile' },
{ extend: 'print' }
]
});
});
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() + "¬iceId=" + $("#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() + "¬iceId=" + $("#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() + "¬iceId=" + $("#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.
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.
$(document).ready(function () {
var dt = $('#example').DataTable({
"processing": true,
"serverSide": true,
"ajax": "api.php?t=clients",
"aoColumnDefs": [{
'bSortable': false,
'aTargets': [0]
}],
"columns": [{
"className": "details-control",
"data": null,
"defaultContent": " "
}, {
"data": "c_name"
}, {
"data": "c_number"
}, {
"data": "c_link"
}]
});
});
My code throw an error of SQL access violation when I included the following with
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [0] }
]
But if i remove it, everything works fine, basically I just want disable sorting for column 0
How do I achieve it.
Thanks!!
Change "aoColumnDefs" to "columnDefs"
"columnDefs": [{
'bSortable': false, 'aTargets': [0]
}]
make sure you include these script files:
http://code.jquery.com/jquery-1.11.3.min.js
https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js