I have the following code
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "/functions/ajax.asp",
"ordering": false,
"bFilter": false,
"dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );
</script>
I have around hundreds of rows but when I select the an option such as CSV, it only exports what is on the screen.
Any ideas?
Thanks
The problem here is that you're using server-side processing, so the client-side dataTables plugin only has access to the data on the screen to export! You'll have to make something custom to get this data from the server.
Check out this post for a quick example: Server side excel export with DataTable
That is expected behavior for the export buttons in DataTables. They always simply export the data that is currently displayed on the screen. If you want to allow the user to export all data (and don't want to write a custom export function - if you do, see #Adam's answer), consider adding a lengthMenu option to your DataTable. This will allow users to change the number of records displayed per page, which can in turn let them show/export all records. The syntax for the lengthMenu parameter is as follows.
"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ]
The first array shows the number of records to display for each option (in this case, 10, 25, 50, and all (-1 is all)), and the second array is what should be displayed in the user's dropdown menu.
See this stack overflow question for more detail on the topic.
Related
So I'm working in angular with Angular Datatables library to display tables. I've got GeoJSON data which I'm fetching from different URLs and pushing them in different arrays.
This is how the array of all the column heading looks like.
This is how the array of all the column data looks like.
Now I have 30+ columns and 100+ rows of data that I am putting in my arrays. I have to display all this data in a table, but I want to use those arrays for the same. How do I proceed with the same? I have three different URLs to fetch data from and display it and all of them have different column names and number of rows.
It's a really big project so I can't show you all of the code, but I can try showing you how I have tried creating tables and dtOptions in my .ts file.
//Declaring dtOptions as any
dtOptions1:any = {};
//Setting options for the datatable
this.dtOptions1 = {
data: item1,
paging: false,
scrollY: 150,
// scrollX: true,
processing: true,
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'print'
]
};
<!--this is one of the methods I tried, even tried *ngFor, it works but then I can't use the options like search, sort, buttons, etc. Even tried all the thead and tbody tags-->
<table datatable [dtOptions]="dtOptions1" *ngSwitchCase="1">
</table>
If you need more info please do ask me. I would be happy to provide that if I can. Just need a way to solve this. Thanks
I'm using the jQuery pagination plugin but I'm not able to get my data to be searched or sorted by columns.
I've searched for the documentation and also watched some videos explaining how to perform this procedure, but without success.
Right now my code looks like this:
dtAjax = $('#' + pTabela).DataTable(
{
"order": [[1, 'desc']],
responsive: true,
pageLenght: 50,
searching: true,
processing: true,
serverSide: false,
deferLoading: pTotalRegistros
}
My server Side necessarily needs to be "true", otherwise the pagination will not work properly.
However, when I leave the serverSide as "true", the functionality of searching and sorting the columns is not working, only when the serverSide is set to "false".
I have no idea how to solve this anymore, in case someone can save me..
I am getting the subject error when using the following:
$("#example1").DataTable().fnPageChange(localStorage.getItem('page'),true);
From what I understand, it saves the last page of the datatable that the user clicked on. If the user has clicked on the 3rd page of the datatable, navigates to another page and then goes back to the datatable, it will still be on the 3rd page of the datatable.
And it works. The last page of the datatable is saved.
The only problem is, even though the above works, I am getting the following error in the console:
Uncaught TypeError: $(...).DataTable(...).fnPageChange is not a function
I am not sure why.
Here are some other datatable setting I have:
"iDisplayLength": 50,
"order": [[ 1, "desc" ]],
"paging": true,
"scrollY": 300,
"scrollX": true,
"bDestroy": true,
"stateSave": true,
"sPaginationType":"full_numbers",
"autoWidth": false,
"deferRender": true,
"dom": 'Bfrtip',
Why am I getting the above console error and how can I fix it?
Your use of the "stateSave": true option is what is allowing a user to return to page 3 of the DataTable, after leaving the web page entirely, and then returning.
It also saves filters and sorting selections.
If you want to do something manually, which is not handled for you by "stateSave": true, then you can use the DataTables page change event. The documentation gives an example:
$('#example').on( 'page.dt', function () {
var info = table.page.info();
$('#pageInfo').html( 'Showing page: '+info.page+' of '+info.pages );
} );
Otherwise, you can delete that line which is throwing the error - and state saving should not be affected.
Regarding fnPageChange - this is an old plug-in which has been removed from DataTables - you can see a note about this here.
DataTable começa com minúsculo é um camel case.
$("#example1").DataTable().fnPageChange(localStorage.getItem('page'),true);
change to
$("#example1").dataTable().fnPageChange(localStorage.getItem('page'),true);
I'm trying to initialize my table as:
var table = $("#table-id").DataTable({
"columnDefs": [{
"width": "8%",
"targets": 0
}],
'bSort': false,
bPaginate: false,
bFilter: false,
bInfo: false,
buttons: [
'copy', 'excel', 'pdf'
]
});
But I'm getting an error on Chrome's console that says:
Uncaught TypeError: Cannot read property 'copy' of undefined at dataTables.buttons.min.js:17
It looks like you are missing the appropriate plug-in to include the buttons. Take into account that datatables buttons "are not built into the core, but rather than be included as and when you need them" (buttons doc).
Hence, I would suggest you to either you use the download builder to customize your lib, or include them in separate files. I.e., the following libs are included in the buttons example:
//code.jquery.com/jquery-1.11.3.min.js
https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.1.0/js/dataTables.buttons.min.js
//cdn.datatables.net/buttons/1.1.0/js/buttons.flash.min.js
//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js
//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js
//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js
//cdn.datatables.net/buttons/1.1.0/js/buttons.html5.min.js
//cdn.datatables.net/buttons/1.1.0/js/buttons.print.min.js
Also, you will need the following dom modifier:
dom: 'Bfrtip',
Working jsfiddle demo: https://jsfiddle.net/jufjn9ux/
I use a dataTables table in my site with following configurations:
$('#search-table').dataTable({
"dom": "<'box-content'<'col-md-4'l><'col-md-8 text-right'f><'clearfix'>>rt<'box-content'<'col-md-6'i><'col-md-6 text-right'p><'clearfix'>>",
"aaSorting": [[ 6, "desc" ]],
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 7, 8 ] }
],
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"iDisplayLength": 50,
"pagingType": "full_numbers",
"oLanguage": {
"sSearch": 'Filter within results: ',
"sLengthMenu": '_MENU_'
}
});
I would like to know how I could get the value of "aLengthMenu" that is selected at the moment and save it as a PHP variable.
By default the first 50 lines of the table will be displayed as we can see at "iDisplayLength". Then we should have the possibility to get this number as a variable.
Then when the user changes the view to 10 (or 25, or 100, etc) the variable changes to the correspondent number.
Many thanks in advance!
I think what you are looking for is the page.len() API call that will allow you at anytime to see the page length. http://datatables.net/reference/api/page.len()
I believe, but am not certain, that the page event is fired when the page length is changed. http://datatables.net/reference/event/page
You can write a method that listens for the page event and then finds out how many records are shown, then send that data off via AJAX to the server to be stored, or handled.
Simple example:
var table = $('#data-table').DataTable();
$('#data-table').on( 'page.dt', function(){
var len = table.page.len();
alert(len);
//Sample Post
//$.post('server.php',{len:len},function(){...});
});
EDIT
I feel I should mention that the dataTables version you are using is probably not current based on the option names you included. The options changed to a more readable format fairly recently, but I believe the naming convention is still technically supported for the current version. I would update the options though to the new names in case future releases of dataTables does not support the backwards compatability.