I want to include datatable information in the print view.
Example I want to show this information in the print view: Showing 1 to 9 of 9 entries
Any help will be appreciated.
I've just played with the print option myself to see if I can wing it; including the footer didn't do much but add the same footer to the bottom of the table in print view; however; if you use the custom message you may be able to produce a good result; you can for example set a custom message showing total entries above or below your printed document.
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'print',
messageBottom: function () {
var oTable = $('#example').DataTable();
var info = oTable.page.info();
var count = info.recordsTotal;
return 'Showing total entries of ' + count;
}
}
]
} );
});
You can play with either messageBottom or messageTop; or display both with two different messages.
Related
I try to export my datatable into Excel.
Every time when exporting the table I want to add 3 default rows at the very top.
I saw a datatable message option but that might not help me because I want 3 rows.
Actual
Now I have this data (without any extra rows):
Expected
But I want to export data with these extra rows :
I have this code right now. and i have tried adding header with message but that didn't work for me because i need 3 header rows.
$(document).ready(function() {
var table = $('#example').DataTable( {
lengthChange: false,
buttons: [{ extend: 'pdf', className: 'btn-success' },
{ extend: 'print', className: 'btn-success' },
{ extend: 'excel', className: 'btn-success' } ]
}
}
);
table.buttons().container()
.appendTo( '#example_wrapper .col-md-6:eq(0)' );
} );
Assumed you use the button for Excel export.
You thought about the excelHtml5, Option named messageTop ?
I would rather add the 3 additional header rows via buttons.exportData( [ options ] ).
There you have an option key customizeData:
function customizeData (since Buttons 1.5.2) - Function that can be used to modify the data used for the export, after all of it has been gathered and pre-processed by the above formatting options. A single argument is passed in and no return parameter is expected (mutate the object passed in to alter the data):
Data for export. This is an object with the following properties:
header - Array of data for the header
footer - Array of data for the footer
body - 2D array of data for the body.
For example add the 3 rows to this header array:
var table = $('#myTable').DataTable();
var data = table.buttons.exportData( {
customizeData: function(dataForExport) {
dataForExport.header.push("Header line 1");
dataForExport.header.push("Header line 2");
dataForExport.header.push("Header line 3");
}
} );
// Do something with the 'data' variable
I have setup my table in Tabulator with responsiveLayout:"collapse" and responsiveLayoutCollapseStartOpen:false.
My table display properly with collapsed columns.
I added formatter:"responsiveCollapse" as column and I properly get the column with + and - icons and can manually expand/collapse the columns.
But for usability on a smartphone, the icon renders really a bit small.
I want to add to expand/collapse based on callback rowClick.
I found responsiveCollapse and toggleList in tabulator.js, so I think I know what needs to happen. However I am totally struggling how to return it out of rowClick.
Thank you very much for a hint in advance.
In the tabulator constructor I have:
columns:[
{ formatter:"responsiveCollapse", width:30, minWidth:30,
hozAlign:"center", resizable:false, headerSort:false, responsive:0 },
{ title:"Ren.", field:"Race_Number", sorter:"number",
hozAlign:"center", minWidth:60, widthGrow:1, responsive:0 },
]
And basically I want to achieve the some functionality as formatter:"responsiveCollapse" in rowClick:
rowClick:function(e, id, data, row){
//trigger an alert message when the row is clicked
//what to do here to achieve same as formatter:"responsiveCollapse"
},
You could copy some of the code from the built-in responsiveCollapse formatter to achieve this. It will involve accessing some private variables, which is a bit naughty, but it will do the job:
rowClick:function(e, id, data, row){
var config = cell.getRow()._row.modules.responsiveLayout; //get the responsive config object for the row
var collapseEl = config.element; //get the collapsible element for the row
if(collapseEl){ //check if the row has any collapsed data
config.open = !config.open; toggle the open state
//toggle the collapse element
if(config.open){
el.classList.add("open");
collapseEl.style.display = '';
}else{
el.classList.remove("open");
collapseEl.style.display = 'none';
}
}
}
this was very helpful, remember to comment out "toggle the open state" and also update
el.classList.remove("open");
to
collapseEl.classList.remove("open");
The documentation shows by adding printVisibleRows:false the table.print(false,true) function will print all rows. My table only prints the 20 rows that are visible due to pagination. I would like to print all rows. Is that possible?
//define setup options
var tabData = [{
invalidOptionWarnings: false,
layout: fitDatafill,
printAsHtml:true,
printVisibleRows:false,
printCopyStyle:true, //copy Tabulator styling to HTML table
printHeader:"<h1>"+tdata[0].tablenamedisplay+"<h1>",
printFooter:"<h2><h2>",
autoResize:true,
pagination:"local",
paginationAddRow:"page",
paginationSize:20,
paginationSizeSelector:[25,40,50,100],
movableColumns:false,
tooltipsHeader:true,
columns:tdata[0],
data:tdata[1],
footerElement:myfooter,
rowClick:function(e, row){},
rowContext:function(e, row){
e.preventDefault(); // prevent the browsers default context menu form
appearing.},
}];
//create table
tabEquip[p] = new Tabulator("#"+vDDest, tabData[0] );
My table only prints the 20 rows that are visible due to pagination. I would like to print all rows.
You can do this as of Tabulator v4.8 in one of two ways.
Either by setting the printRowRange option to "active" in the table constructor, and then calling the print function:
///define table
var table = new Tabulator("#example-table", {
printRowRange:"active", //print all active rows
});
//print table
table.print();
Or by passing the string "active" into the print function when you call it:
table.print("active", true);
In jquery datatable, single check box should be selected.
This link is working fine.
But above link is using jquery.dataTables 1.10.16 version. And I am using jquery.dataTables 1.9.4.
Can the same functionality as listed in example given above be possible with jquery.dataTables 1.9.4 instead of jquery.dataTables 1.10.16?
In the same page which you give the link, there are many explanation about to using "single check" oparetion.
At the end of the listed attachment, you can see the referanced .js file is
https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js
In your page, you should add this file referance after dataTable.js.
I think, the version of jquery is not important. The important file is "dataTables.select.js"!
Secondly, you must update your dataTable maker codes like the sample below;
$(document).ready(function() {
$('#example').DataTable( {
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
targets: 0
} ],
select: {
style: 'os',
selector: 'td:first-child' // this line is the most importan!
},
order: [[ 1, 'asc' ]]
} );
} );
UPDATES :
Why dont you try to write your own selector function?
for example;
$(document).ready(function() {
$('#example').DataTable( {
/// put your options here...
} );
$('#example').find("tr").click(function(){ CheckTheRow(this); });
} );
function CheckTheRow(tr){
if($(tr).find("td:first").hasClass("selected")) return;
// get the pagination row count
var activePaginationSelected = $("#example_length").find("select").val();
// show all rows
$("#example_length").find("select").val(-1).trigger("change");
// remove the previous selection mark
$("#example").find("tr").each(function(i,a){
$(a).find("td:first").removeClass("selected");
$(a).find("td:first").html("");
});
// mark the picked row
$(tr).find("td:first").addClass("selected");
$(tr).find("td:first").html("<i class='fa fa-check'></i>");
// re turn the pagination to first stuation
$("#example_length").find("select")
.val(activePaginationSelected).trigger("change");
}
Unfortunately, legacy data table does not support or have that select extension.
Workaround:
Create checkbox element inside 'mRender' callback.
Bind action to the checkbox. (This can be done inside the fnRowCallback or outside as in my example in below fiddle
https://jsfiddle.net/Rohith_KP/dwcatt9n/1/
$(document).ready(function() {
var userData = [
["1", "Email", "Full Name", "Member"],
["2", "Email", "Full Name", "Member"]
];
var table = $('#example').DataTable({
'data': userData,
'columnDefs': [{
'targets': 0,
'className': 'dt-body-center',
'mRender': function(data, type, full, meta) {
return '<input type="checkbox" value="' + $('<div/>').text(data).html() + '">';
}
}],
'order': [1, 'asc']
});
$('#example tr').click(function() {
if ($(this).hasClass('row_selected'))
$(this).removeClass('row_selected');
else
$(this).addClass('row_selected');
});
});
Also, I suggest you to upgrade your datatable version. Then you can use that select extension.
Can the same functionality as listed in example given above be possible with jquery.dataTables 1.9.4 instead of jquery.dataTables 1.10.16?
Yes.
But, not using the Select Extension since it requires at least version 1.10.7.
For 1.9.4, a possible solution would be:
$(document).ready(function() {
$('#example').find("td input[type='checkbox']").click(function() {
selectRow(this);
});
var table = $('#example').DataTable();
function selectRow(clickedCheckBox) {
var currentPage = table.fnPagingInfo().iPage;
// Being unchecked
if (!$(clickedCheckBox).is(':checked')) {
$(clickedCheckBox).removeAttr('checked');
getRow(clickedCheckBox).removeClass('selected');
return;
}
var selectEntries = $("#example_length").find("select");
var showEntriesCount = selectEntries.val();
var totalRows = table.fnGetData().length;
// If show entries != totalRows append total rows opiton that can be selected
if (totalRows != showEntriesCount)
selectEntries.append($('<option>', {
value: totalRows,
text: totalRows
}));
// Display all rows
selectEntries.val(totalRows).trigger("change");
// Removes all checked attribute from all the rows
$("#example").find("td input[type='checkbox']").each(function(value, key) {
getRow(key).removeClass('selected');
$(key).removeAttr('checked');
});
// Check the clicked checkBox
$(clickedCheckBox).prop('checked', true);
getRow(clickedCheckBox).addClass('selected');
// Re set the show entries count
selectEntries.val(showEntriesCount).trigger("change");
// If added, Remove the additional option added to Show Entries
if (totalRows != showEntriesCount)
selectEntries.find("[value='" + totalRows + "']").remove();
// Go to the page on which the checkbox was clicked
table.fnPageChange(currentPage);
}
function getRow(element) {
return $(element).parent().parent();
}
});
The above will require fnPagingInfo to take the user back to initial page. I haven't tested the solution on large dataset, tested it on a table with 150 rows, but should work fine on larger datasets too.
JSFiddle
Have you tried below code and I checked and it is working fine, you need to update styles and scripts:
You havr to update the latest styles and scripts to achieve latest functionality.
Single check box selection with jquery datatable
Using the DataTable plugin I am able to generate a table just fine but I want a custom hyperlink on one of the columns that links to another page but taking information from the rest of the row...for example in row 1 I want a hyperlink: http://url/?data['imdata'][i]['faultInst']["attributes"]["code"] or something like that. I've seen a lot of complicated examples from other forms but couldn't get it to work. Looking for the simplest solution as this is a side project and I need it to be completed.
$(document).ready(function(){
$.getJSON('/static/faults.json', function (data) {
var test = $('#table5').DataTable({
});
var tr;
for (var i = 0; i < data["totalCount"]; i++) {
test.row.add([
data['imdata'][i]['faultInst']["attributes"]["code"],
data['imdata'][i]['faultInst']["attributes"]["cause"],
data['imdata'][i]['faultInst']["attributes"]["descr"],
data['imdata'][i]['faultInst']["attributes"]["created"],
data['imdata'][i]['faultInst']["attributes"]["changeSet"],
data['imdata'][i]['faultInst']["attributes"]["childAction"],
data['imdata'][i]['faultInst']["attributes"]["dn"],
data['imdata'][i]['faultInst']["attributes"]["domain"],
data['imdata'][i]['faultInst']["attributes"]["highestSeverity"],
data['imdata'][i]['faultInst']["attributes"]["lastTransition"],
data['imdata'][i]['faultInst']["attributes"]["lc"],
data['imdata'][i]['faultInst']["attributes"]["occur"],
data['imdata'][i]['faultInst']["attributes"]["origSeverity"],
data['imdata'][i]['faultInst']["attributes"]["prevSeverity"],
data['imdata'][i]['faultInst']["attributes"]["rule"],
"test",
//data['imdata'][i]['faultInst']["attributes"]["Severity"],
data['imdata'][i]['faultInst']["attributes"]["subject"],
data['imdata'][i]['faultInst']["attributes"]["type"],
//data['imdata'][i]['faultInst']['attributes']["ack"]
"test",
"test"
])
}
test.draw();
});
});
When you have a setup like this, just avoid to define data, by that you get the proper value you can turn into a link. dataTables know which data it should pass to the render function by the targets value. Example :
var table = $('#example').DataTable({
columnDefs : [
{ targets : [0],
render : function(data) {
return '<a href="'+data+'" target_blank>'+data+'</a>'
}
}
]
})
table.row.add(['https://example.com', 'david', 'programmer']).draw()
demo -> http://jsfiddle.net/47k7nhkb/