How do I initialise specific tables without the search filter and length select menu?
Apparently it can be done with the sDom option, but the documentation is pretty bad and I can't understand exactly what I am supposed to do.
http://datatables.net/usage/options#sDom
You can set to false such properties during initialization of datatable:
"bFilter" : false,
"bLengthChange": false
Since Datatables 1.10 you can use those 2 options :
lengthChange
"lengthChange": false
searching
"searching": false
Full example :
$('#example').dataTable( {
"lengthChange": false,
"searching": false
} );
Without search filter and length
var options = {"sDom": 'rtip'}
var myDataTable = $('#myDataTable')
myDataTable.dataTable(options)
Here is an example from the official documentation: https://datatables.net/examples/basic_init/dom.html
I agree that sDom is tricky, I got the hang of it by practicing. Run the example below and see the "info" will appear in the top. Replace sDom with "sDom": 'rtlp' and see info disappear. Now use "sDom": 'rtil' and see info is back at the bottom, but paging is gone. Keep experimenting and you will get it.
<!DOCTYPE html>
<html>
<head>
<link href="demo_table.css" rel="stylesheet">
</head>
<body>
<table class="display dataTable" id="example">
<thead>
<tr role="row">
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
</table>
<script src="jquery.js"></script>
<script src="jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
"aaData": [
[ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X" ],
[ "Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A" ],
[ "Webkit", "Safari 3.0", "OSX.4+", 522.1, "A" ]
],
"sDom": '<"top"i>rtlp'
} );
} );
</script>
</body>
</html>
Related
When exporting my dataTable to a PDF I'd like to add an extra blank column that doesn't exist on the dataTable itself. All it needs is the headline and a blank field for each row. Is that possible somehow?
I was able to add a custom column by adding the following to my exportOptions in my dataTabel config:
customizeData: function (data) {
data['header'].push('Custom Field');
$.each(data['body'], function(key, row) {
row.push('');
});
}
You can add an extra empty column to the PDF by manipulating the PDFMake document structure.
You can access this structure using the pdfHtml5.customize function.
A simple demo:
$(document).ready(function() {
$('#example').DataTable({
dom: 'Bfrtip',
buttons: [{
extend: 'pdf',
customize: function (pdf) {
addExtraColumn(pdf);
}
}
]
});
});
function addExtraColumn(pdf) {
pdf.content[1].table.body.forEach(function(row, idx) {
let newCell = structuredClone(row[0]);
newCell.text = idx === 0 ? "New Heading" : "";
row.push( newCell );
console.log( row );
})
};
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Export to PDF</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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/1.12.1/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display nowrap dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Data</th>
</tr>
</thead>
<tbody>
<tr>
<td>Adelaide Nixon</td>
<td>One</td>
</tr>
<tr>
<td>Bruna Nash</td>
<td>Two</td>
</tr>
</tbody>
</table>
</div>
</body>
So, if you start with a table which looks like this:
Then the PDF will look like this:
From there, you may want to further customize the PDF - for example, by drawing lines around every cell, and so on.
You can read the PDFMake documentation for tables, and see examples for more guidance.
I have a table with start and finish dates in the rows, and I want to create a date filter which chooses rows for which the date in the filter is between the start and finish dates. The start or finish dates might be empty which means "unspecified" so the range is open on that side of the start/finish span.
I messed around with range date on the two columns but wasn't able to get that to work, and decided the best solution was probably to use the date_custom_func. This works for the most part, but seems like clearing the date in the filter causes the filterVal in the custom_func to be passed the last value of the filter rather than ''.
I think this is a bug but know https://stackoverflow.com/users/617373/daniel prefers to see things first on stackoverflow to triage.
Reference https://jsbin.com/cixawez/edit?html,js,output
Steps to cause problem:
pick filter date
click x to clear
last filter date is used
Second problem is exFilterColumn doesn't seem to have any case handling for filter_type = 'date_custom_func', so has no effect on the filter.
My initialization:
$(document).ready(function() {
var table = $("#tbl").DataTable({
dom: "Bfrtip",
columns: [
{ data: 'name', name: 'name' },
{ data: 'startdate', name: 'startdate', type: 'datetime' },
{ data: 'finishdate', name: 'finishdate', type: 'datetime' },
],
});
function yadcf_between_dates(fromdateattr, todateattr) {
function yadcf_between_dates_fn(filterVal, columnVal, rowValues, stateVal) {
console.log('filterVal='+filterVal);
console.log('columnVal='+columnVal);
console.log('rowValues='+rowValues);
console.log('stateVal='+stateVal);
if (filterVal === '') {
return true;
}
if ( (stateVal[fromdateattr] === '' || filterVal >= stateVal[fromdateattr])
&& (stateVal[todateattr] === '' || filterVal <= stateVal[todateattr])) {
return true;
} else {
return false;
}
}
return yadcf_between_dates_fn;
}
yadcf.init(
table,
[
{
column_selector: 'startdate:name',
filter_type: 'date_custom_func',
custom_func: yadcf_between_dates('startdate', 'finishdate'),
filter_container_id: 'filter-container',
date_format: 'yyyy-mm-dd',
},
]
);
// second problem is exFilterColumn doesn't seem to work for date_custom_func, there's
// no case handling for that filter_type
var today = new Date();
today = today.toISOString().substr(0,10);
var startdate = table.column('startdate:name').index();
yadcf.exFilterColumn(table,[[startdate, today]]);
});
the html (for completeness)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment-with-locales.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/dataTables.jqueryui.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/dataTables.jqueryui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.4-beta.45/jquery.dataTables.yadcf.css" integrity="sha512-u7Rj4AxBJlMX6GXYVig6earpVdk4dxdZfT2nJFo2OJmB9j2PSY7CrIRtXWuELPTZbLdqk7oNQlsnxOfhYA7KSw==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.4-beta.45/jquery.dataTables.yadcf.js" integrity="sha512-iOI77irpDUJ8r06rUaeBfn6ZUmsWZJB0PsmZdtRuHjfhkw5JhmBXvxl1frwrxBHlD/pUUIEeDln/njSvcZx5sA==" crossorigin="anonymous"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<body>
<span>in start/finish span: </span><span id='filter-container'></span>
<table id=tbl>
<thead>
<tr>
<th>name</th>
<th>start</th>
<th>finish</th>
</tr>
</thead>
<tbody>
<tr>
<td>fred</td>
<td>2020-01-19</td>
<td></td>
</tr>
<tr>
<td>jill</td>
<td>2020-12-20</td>
<td>2020-12-31</td>
</tr>
<tr>
<td>toby</td>
<td>2020-12-20</td>
<td></td>
</tr>
</tbody>
</table>
</body>
I'm exporting the datatables in csv. And when I open the file with excel, I've got problem with big numbers (around 20 digits). I also have problem with the special characters.
I guess it's a formatting problem. But I don't know How to correct the problem.
The code in my Js file:
dom: 'Bfrtip',
buttons: [
{
extend: 'csv',
text: 'csv',
fieldSeparator: ';' // with ';' we can export the file in csv and each column is in one column. Without ';' everything is in one column
},
'pdf',
'print'
]
An image of the problem:
Thanks for your help.
There is a self-contained example at the end of this answer, but here are your two problems:
Large Numbers
The best way to fix this is to use 'excel' instead of 'csv' here:
dom: 'Bfrtip',
"buttons": [
'excel'
]
This will ensure the Excel cell format is "number" instead of "general".
I don't know of a way to automatically control the Excel cell format when using the CSV export option - unless you are prepared to save the CSV as a text file, then import into Excel and format it during the import (a manual process).
Accented Characters
There are various reasons why you could be having this issue - many of which are outside the scope of DataTables - so the following may not help you, but...
Make sure your HTML page contains this inside the head tag:
<meta charset="UTF-8">
This is sufficient for me to get my demo working (see below). For example:
However, like I say, there could be many other reasons - for example, see here.
Full Example
Paste the following HTML into a text file (use Notepad++ not Notepad, if you are on Windows). Assuming Notepad++, make sure the file is saved as UTF-8 - menu > Encoding > UTF-8. Then open the file in any browser.
You don't need all of those JS imports provided below (for example the PDF one); feel free to remove extra ones. (I have them for a fuller demo and was too lazy to remove them.)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Export to Excel</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
<!-- buttons -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.1/css/buttons.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script>
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display nowrap dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Adélaïde Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>6123456789012345</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable({
dom: 'Bfrtip',
"buttons": [
'excel'
]
});
});
</script>
</body>
Note on the CSV Option
If you do use "csv" instead of "excel" in your button definition, and if you open the resulting file in a text editor, instead of Excel, you will see this data:
"Name","Position","Office","Age","Start date","Salary"
"Adélaïde Nixon","System Architect","Edinburgh","6123456789012345","2011/04/25","$320,800"
The data is the way you need it to be - it's just that Excel will make various assumptions about how to format the data when opening the csv file.
I have used the datatables in my html page.
I have inserted a pdf button which will save the document/table in pdf format.This is a default feature in datatables.
However, the button is not working though it is displayed in the html page.
Below is my code :
datatable.html
<html>
<link rel="stylesheet" type="text/css" href="DataTables-1.10.7/media/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="DataTables-1.10.7/media/js/jquery.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.7/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.7/extensions/TableTools/js/dataTables.tableTools.js"></script>
<link rel="stylesheet" type="text/css" href="DataTables-1.10.7/extensions/TableTools/css/dataTables.tableTools.css">
<!--<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>-->
<body>
<table id="example" class="display">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
</table>
<script>
$(document).ready( function () {
var data = [
[
"Tiger Nixon",
"System Architect"
],
[
"Garrett Winters",
"Accountant"
]
];
$('#example').dataTable({
"aaData": data,
"dom" : 'T<"clear">lfrtip',
"tableTools" : {
"sSwfPath": "DataTables-1.10.7/extensions/TableTools/swf/copy_csv_xls_pdf.swf"
}
});
} );
</script>
</body>
</html>
What to do ?
Try this :
add following js and css in following sequence :
https://www.datatables.net/release-datatables/media/js/jquery.js
https://www.datatables.net/release-datatables/media/js/jquery.dataTables.js
https://www.datatables.net/release-datatables/extensions/TableTools/js/dataTables.tableTools.js
https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css
<table id="example" class="display">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
</table>
$(function () {
var data = [
[
"Tiger Nixon",
"System Architect"],
[
"Garrett Winters",
"Accountant"]
];
$('#example').dataTable( {
"aaData": data,
"dom": 'T<"clear">lfrtip',
"tableTools": {
"sSwfPath": "/swf/copy_csv_xls_pdf.swf"
}
} );
});
can anybody please help me get a working sample of MVC application with tablesorter plugin applied ? I am a bit confused about how to apply latest tablesorter plugin to my MVC sample..I am trying to implement something like
$('table').trigger('sortReset')
in the below teble.
<table class="tablesorter">
<thead>
<tr>
<th>AlphaNumeric Sort</th>
<th>Currency</th>
<th>Alphabetical</th>
<th>Sites</th>
</tr>
</thead>
<tbody>
<tr><td>abc 123</td><td>£10,40</td><td>Koala</td><td>http://www.google.com</td></tr>
<tr><td>abc 1</td><td>£234,10</td><td>Ox</td><td>http://www.yahoo.com</td></tr>
<tr><td>abc 9</td><td>£10,33</td><td>Girafee</td><td>http://www.facebook.com</td></tr>
<tr><td>zyx 24</td><td>£10</td><td>Bison</td><td>http://www.whitehouse.gov/</td></tr>
<tr><td>abc 11</td><td>£3,20</td><td>Chimp</td><td>http://www.ucla.edu/</td></tr>
<tr><td>abc 2</td><td>£56,10</td><td>Elephant</td><td>http://www.wikipedia.org/</td></tr>
<tr><td>abc 9</td><td>£3,20</td><td>Lion</td><td>http://www.nytimes.com/</td></tr>
<tr><td>ABC 10</td><td>£87,00</td><td>Zebra</td><td>http://www.google.com</td></tr>
<tr><td>zyx 1</td><td>£99,90</td><td>Koala</td><td>http://www.mit.edu/</td></tr>
<tr><td>zyx 12</td><td>£234,10</td><td>Llama</td><td>http://www.nasa.gov/</td></tr>
</tbody>
</table>
Also the js and css files I am referring are as follows
<head>
<meta charset="utf-8">
<title>Basic Tablesorter Demo</title>
<link href="~/Content/jq.css" rel="stylesheet" />
<link href="~/Content/theme.default.css" rel="stylesheet" />
<script src="~/Scripts/jquery-latest.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
<script src="~/Scripts/jquery.tablesorter.min.js"></script>
<script src="~/Scripts/jquery.tablesorter.widgets.min.js"></script>
<script>
$(function () {
$('.tablesorter').tablesorter({
widgets: ['zebra', 'columns'],
usNumberFormat: false,
sortReset: true,
sortRestart: true
});
});
</script>
Not sure why I am not getting this working..It thorows an error like "Uncaught TypeError: undefined is not a function " for tablesorter()
Note: I learned that this functionality of resetting is available with plugin 2.4.7 onward.
Your help is greatly appreciated.
Thanks
You'll need to add an element on the page that allows the user to click to reset the sort. In this example, I'll use a button:
<button type="button" class="reset">Reset Sort</button>
then apply the appropriate script to give that button the ability to trigger the reset event:
$(function () {
$('.tablesorter').tablesorter({
widgets: ['zebra', 'columns'],
usNumberFormat: false,
sortReset: true,
sortRestart: true
});
// make button reset the sort
$('.reset').click(function(){
$('.tablesorter').trigger('sortReset');
});
});
Alternatively, the user can use Ctrl + Left Click on any header cell to reset the sort. The key can be changed using the sortResetKey option.