I have data in my SQLite table and it has 985 rows, so I used DataTable to organise (searching and export to Pdf, CSV...), the problem is that the DataTable is limited rows and just shows the first 200 rows!.
my code is
<script>
$(document).ready( function () {
$('#table_id').DataTable({
dom: 'B<"clear">lfrtip',
buttons: {
name: 'primary',
buttons: [ 'copy', 'csv', 'excel', 'pdf' ]
}
});
});
</script
the data is stored in table Sqlite
and in the HTML page:
so what's the solution with?
There is more than one option for this:
You can use the paging option and set it to false, or you can use the pageLength option to choose how many results you want to show on one page.
paging:
<script>
$(document).ready( function () {
$('#table_id').DataTable({
dom: 'B<"clear">lfrtip',
paging: false,
buttons: {
name: 'primary',
buttons: [ 'copy', 'csv', 'excel', 'pdf' ]
}
});
});
</script
pageLength:
<script>
$(document).ready( function () {
$('#table_id').DataTable({
"pageLength": 1000,
dom: 'B<"clear">lfrtip',
buttons: {
name: 'primary',
buttons: [ 'copy', 'csv', 'excel', 'pdf' ]
}
});
});
</script
Related
i am trying to export data from a datatable to an excel file.
But everytime i use the excel button it changes the format of my numbers.
For example a 0,023 is copied to excel as a 23.
Is there a way to use the excel export button so that excel isnt changing the format?
The other things is that i use the datatable on different data from a DB. So the column isnt always the same which has to be formated. Even the User can select which column should be exported. So the Format sould be used.
So possible Datatable could look like:
A
B
C
abc
1
1,2
A
B
C
abc
1,2
dcf
Thx in advance.
<script type="text/javascript" language="javascript">
$(document).ready(function() {
var table = $('#tbl').DataTable( {
dom: "lfBptrip",
select: {
style: 'multi'
}
,
columnDefs: [
{
targets: 0,
className: 'noVis'
}
],
language: {
searchBuilder: {
button: 'Filter',
}
},
buttons:[
'searchBuilder',
{
extend: 'colvis',
columns: ':gt(0)',
collectionLayout: 'fixed columns',
text: 'Spaltenauswahl',
postfixButtons: [{
extend: 'colvisRestore',
text: 'Show All',
}, {
extend: 'colvisGroup',
text: 'Hide All',
hide: ':visible'
},
]
},
{
extend: 'copy',
text: 'Zwischenablage',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'excelHtml5',
text: 'Excel',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdf',
pageSize: 'LEGAL',
orientation: 'landscape',
text: 'PDF',
exportOptions: {
columns: ':visible'
}
}
],
colReorder: true,
scrollX: true,
});
});
</script>
I have a table and it is sorted by the old date.
I just want to make its default sorting by the recent date (1st column).
the code is:
<script>
$(document).ready( function () {
$('#table_id').DataTable({
dom: 'B<"clear">lfrtip',
buttons: {
name: 'primary',
buttons: [ 'copy', 'csv', 'excel', 'pdf' ]
}
});
});
</script>
and it looks like:
I tried many solutions on the net but all didn't work!
<script>
$(document).ready( function () {
$('#table_id').DataTable({
dom: 'B<"clear">lfrtip',
buttons: {
name: 'primary',
buttons: [ 'copy', 'csv', 'excel', 'pdf' ]
}
}).asSorting([[0, "desc"]]);
});
</script>
and this
<script>
$(document).ready( function () {
$('#table_id').DataTable({
dom: 'B<"clear">lfrtip',
buttons: {
name: 'primary',
buttons: [ 'copy', 'csv', 'excel', 'pdf' ]
}
}).fnSort([[0, "acs"]]);
});
</script>
and this too
<script>
$(document).ready( function () {
$('#table_id').DataTable({
"order": [[ 0, "desc" ]]
dom: 'B<"clear">lfrtip',
buttons: {
name: 'primary',
buttons: [ 'copy', 'csv', 'excel', 'pdf' ]
}
});
});
</script>
and this one
> <script>
> $(document).ready( function () {
> $('#table_id').DataTable({
> "aoColumnDefs": [
> { "asSorting": [ "asc" ], "aTargets": [ 0 ] }
> ]
> dom: 'B<"clear">lfrtip',
> buttons: {
> name: 'primary',
> buttons: [ 'copy', 'csv', 'excel', 'pdf' ]
> }
> }); }); </script>
any suggestions?
I created an example off of the data provided in your screenshot, except in my example all values other than the Dates are the same so I can demonstrate how it works.
You were pretty close, you just needed to include the following DataTables option
DataTables order option
Here:
var data = [
{
"DateofTest": "2006-10-26",
"OIL": "17.79",
"WATER": "30.7",
"GAS": "15380",
"Gas-Lift": "5330"
},
{
"DateofTest": "2007-05-26",
"OIL": "17.79",
"WATER": "30.7",
"GAS": "15380",
"Gas-Lift": "5330"
},
{
"DateofTest": "2008-03-26",
"OIL": "17.79",
"WATER": "30.7",
"GAS": "15380",
"Gas-Lift": "5330"
}
];
$(document).ready( function () {
$('#example').DataTable({
data: data,
"columns" : [
{"data":"DateofTest"},
{"data":"OIL"},
{"data":"WATER"},
{"data":"GAS"},
{"data":"Gas-Lift"}
],
dom: 'B<"clear">lfrtip',
// 0 is the first column it is ordering by (Date of Test)
// 'desc' (descending) is ordering from most recent date to the oldest dates on bottom
//'asc' (ascending) is ordering from the oldest date to the most recent on bottom
order: [0, 'desc'],
buttons: {
name: 'primary',
buttons: [ 'copy', 'csv', 'excel', 'pdf' ]
}
});
});
td {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/jszip-2.5.0/dt-1.11.0/b-2.0.0/b-colvis-2.0.0/b-html5-2.0.0/b-print-2.0.0/date-1.1.1/r-2.2.9/rg-1.1.3/datatables.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/jszip-2.5.0/dt-1.11.0/b-2.0.0/b-colvis-2.0.0/b-html5-2.0.0/b-print-2.0.0/date-1.1.1/r-2.2.9/rg-1.1.3/datatables.min.js"></script>
</head>
<body>
<div class="container">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Date of Test</th>
<th>OIL (m3/d)</th>
<th>WATER (m3/d)</th>
<th>GAS (m3/d)</th>
<th>Gas Lift (m3/d)</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
There are number of plugins of Javascript that can export table data. Take the example of this. Can I add dropdown value to select number of rows in every page? In default setting there are 10 rows/page. I want to increase this to 20. I tried several options but couldn't make it.
Something has to be added on this
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );
Continuation to Rio answer.
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
"pageLength": 50,
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print', 'pageLength'
]
} );
} );
The example in documentation is here
https://datatables.net/reference/option/pageLength
$('#example').dataTable( {
"pageLength": 50
} );
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 have problem when I load data-tables with requirejs.
Following is my code
require.config({
paths: {
"datatables" : "https://cdn.datatables.net/u/dt/jq-2.2.3,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.12,b-1.2.1,b-colvis-1.2.1,b-flash-1.2.1,b-html5-1.2.1,b-print-1.2.1,fc-3.2.2,fh-3.1.2,r-2.1.0,sc-1.4.2,se-1.2.0/datatables.min",
}
});
requirejs( ["datatables"], function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf'
]
});
});
I have generated datatables.min.js from the following link:
https://www.datatables.net/download/
Already included the jquery and other extensions, but I got this error:
$(...).DataTable is not a function
Can anyone help me?
You should use Jquery ready function, for example :
requirejs( ["datatables"], function() {
$(function(){ // ready function
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf'
]
});
});
});