I have this table in HTML file. I want to show PDF button above datatable to export this in PDF file.
<table class="viewCustomerDatatable table table-striped table-bordered nowrap" cellspacing="0"
width="100%">
<thead>
<tr>
<th>First Name</th>
<th>Person</th>
<th>E-Mail<br/>Phone</th>
<th>Address</th>
<th>Update Status</th>
</tr>
</thead>
<tbody>
-------code goes here for table-------
</tbody>
</table>
I am calling this in jquery:
$('.viewCustomerDatatable').DataTable({
dom: 'Bfrtip',
"buttons": [
{
extend: 'collection',
text: 'Export',
buttons: [
'copy',
'excel',
'csv',
'pdf',
'print'
]
}
]
});
I want to show the PDF button but its not showing.
How to do this thing work?
Thanks in advance.
Related
I'm using DataTables library from https://datatables.net/ and I want to have an Excel Button to download all the table, but everything I'm trying is not working:
I tried adding
buttons: [ {
extend: 'excelHtml5',
autoFilter: true,
sheetName: 'Exported data'
} ]
Or
buttons: [
'excel'
]
Or
buttons: [
{
extend: 'excel',
text: 'Save current page',
exportOptions: {
modifier: {
page: 'current'
}
}
}
]
And this is my DataTable Js:
$(document).ready(function () {
$.noConflict();
$('#myTable').DataTable({
buttons: [{
extend: 'excelHtml5',
autoFilter: true,
sheetName: 'Exported data'
}],
order: [[3, 'desc']],
}
But doesn't work.
I know my Js works because it's not the only customization I'm doing, so I don't know where I'm wrong.
And my form whas working fine but when I added DataTable is stopped working don't know why. Just that, what it suppose to send the value from the button to another View, but it doesn't work now and only added the Library, I didn't touch code behind
<table class="table table-striped table-hover text-center" id="myTable">
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</tr>
</thead>
<tbody id="tbData">
<form action="~/Home/ReadOption" method="post">
<input hidden value="entrega" name="seleccion"/>
#{
string delivery = "";
}
#foreach (var item in Model)
{
if (entrega != item.DeliveryNumber)
{
<tr>
<td><button type="submit" class="btn btn-link" value="#item.NumeroEntrega" name="identi">#item.DeliveryNumber</button></td>
<td>#item.TaskNumber</td>
<td>#item.RandomNumber</td>
</tr>
}
delivery = item.DeliveryNumber;
}
</form>
</tbody>
</table>
As #GrafiCode told me, to fix the form, I put it outside the <table>
<table class="table table-striped table-hover text-center" id="myTable">
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</tr>
</thead>
<tbody id="tbData">
<form action="~/Home/ReadOption" method="post">
<input hidden value="entrega" name="seleccion"/>
#{
string delivery = "";
}
#foreach (var item in Model)
{
if (entrega != item.DeliveryNumber)
{
<tr>
<td><button type="submit" class="btn btn-link" value="#item.NumeroEntrega" name="identi">#item.DeliveryNumber</button></td>
<td>#item.TaskNumber</td>
<td>#item.RandomNumber</td>
</tr>
}
delivery = item.DeliveryNumber;
}
</form>
</tbody>
</table>
And also for Button of the atatable, I read the documentation and concluded I was missing something for the DOM so this is the final dataTable code:
dom: "Blfrtip",
buttons: {
dom: {
button: {
className: 'btn'
}
},
buttons: [{
extend: "excel",
text: 'Exportar Excel',
className: 'btn btn-primary',
excelStyles: {
template:'header_blue'
}
}
]
}
I am trying to achieve the row group,
I found this js http://cdn.rawgit.com/ashl1/datatables-rowsgroup/v1.0.0/dataTables.rowsGroup.js plugin to achieve like below,
But when I am using this plugin, number of entries is showing wrong.
Here is my sample code
<table id="example" class="display nowrap" width="100%">
<thead>
<tr>
<th>First Group</th>
<th>Second Group</th>
<th>Third</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
JS Code:
var data = [{"first":"subgroup1","second":"group1","third":"third data"},
{"first":"subgroup1","second":"group1","third":"third data"},
{"first":"subgroup2","second":"group2",
"third":"lorem ipsum data"},
{"first":"subgroup2","second":"group2",
"third":"lorem ipsum data"},
]
$('#example').DataTable({
columns:[
{
name:"first",
data:"first"
},
{
name:"second",
data:"second"
},
{
name:"thirddata",
data:"third"
},
],
data:data,
rowsGroup: [
'first:name',
'thirddata:name'
]
});
Updated in JS Fiddle : https://jsfiddle.net/r2f87hg6/2/
Please suggest with this datatable to display number of entries by grouped.
Thanks
I have only seen two question here about this and it didnt work/ i didnt understand it. This is my table
<table class="table table-bordered make_datatable">
<thead>
<tr>
<th>SL No</th>
<th>Member Code</th>
<th>Name</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>11910</td>
<td>KRATOS</td>
<td>SH001</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3" style="text-align:right">Grand Total:</th>
<th></th>
</tr>
</tfoot>
</table>
everything else is printing correctly and i have used the customize option to print the footer for now but i'd like to know how to print this along with the datatable, jquery for datatable:
var make_datatable = $('.make_datatable').DataTable( {
"columnDefs": [{
"searchable": false,
"orderable": false,
"targets": 0,
}],
"searching": false,
"order": [ 1, 'asc'],
dom: 'Blfrtip',
buttons: [
{
extend: 'print',
title : ' ',
text: '<i class="glyphicon glyphicon-print"></i><span>Print</span>',
className: 'btn btn-info printclass textSan' ,
customize: function ( win ) {
$(win.document.body)
.prepend(
'#include("report/memberreportheader")'
);
$(win.document.body)
.append(
'#include("report/shop/printmemberconsolidate")'
)
}
},
],
});
solved it by using footer: true and removed the colspan and added th to match other rows
buttons: [
{
extend: 'print',
footer: true,
title: ' ',
text: '<i class="glyphicon glyphicon-print"></i><span>Print</span>',
className: 'btn btn-info printclass textSan',
customize: function (win) {
$(win.document.body)
.prepend(
'#include("report/memberreportheader")'
);
}
},
]
HTML:
<tr>
<th></th>
<th></th>
<th></th>
<th>Grand Total:</th>
<th>{{$total}}</th>
<th>--</th>
</tr>
I wrote a demo for exporting the data in various formats:
HTML code:
<div class="container" style="position: relative;top:60px;">
<div class="row">
<table id="empTable" class="display table-bordered" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Office</th>
<th>Extension</th>
<th>Joining Date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Office</th>
<th>Extension</th>
<th>Joining Date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
</div>
Javascript code:
var editor;
$('#empTable').dataTable({
dom: 'Bfrtip',
"ajax": "empdata.json",
"columns": [{
"data": "name"
}, {
"data": "designation"
}, {
"data": "office"
}, {
"data": "extension"
}, {
"data": "joining_date"
}, {
"data": "salary"
}],
select: true,
buttons: [
{
extend: 'collection',
text: 'Export',
buttons: [
'copy',
'excel',
'csv',
'pdf',
'print'
],
}]
/*buttons: [{
extend: 'create',
editor: 'myEditor',
formButtons: [{
label: 'cancel',
fn: function() {
this.close();
}
}]
}]*/
});
And here is jsfiddle link: https://jsfiddle.net/3x0pa64o/
When I download table data in various formats, it downloads as blob, but not as csv, pdf, excel... What is the reason?
Not sure what you mean with "it downloads as blob, but not as csv, pdf, excel". It simply lacks the file name in your example.
As stated in https://datatables.net/extensions/buttons/examples/html5/filename.html and https://datatables.net/extensions/buttons/examples/flash/filename.html
By default the name of the file created by the ... button types will automatically be taken from the document's title element.
So you set the file name in title element:
Example: https://jsfiddle.net/qLqugynb/
I am trying to hide/display certain rows based on data from a hidden column. my table structure looks like:
<table id="agent_search" cellpadding="0" cellspacing="0" border="0" class="table table-striped">
<thead>
<th>Agent ID</th>
<th>Agent Name</th>
<th>ID Number</th>
<th>Mobile Number</th>
<th>Team Name</th>
<th>Status</th>
<th></th>
</thead>
</table>
I am trying to hide/show records based on the Status column, using a checkbox. If the status == DEREGISTERED I want to exclude it from the table (unchecked checkbox).
I adapted my code from what was done here:
$.fn.dataTableExt.afnFiltering.push(function (oSettings, aData, iDataIndex) {
// does not run this
console.log("GOTHRERE");
if ('agent_search' == oSettings.nTable.id) {
// console.dir(oSettings);
console.dir(aData);
var dereg = aData[5];
console.log(dereg);
if (dereg == "DEACTIVATED"){
return $('#toggle_deregistred').is(':checked');
} else {
return $('#toggle_deregistred').is(':not:checked');
}
}
return true;
});
I have tried using $.fn.dataTableExt.afnFiltering witch is used for custom filtering, only to find that I can not do it. It was once possible in previous versions of dataTables as in this case , but as it turns out it was a bug that allowed it to be possible :|.
Is there a way that I can filter out rows based on if their Status with the use of a checkbox? or is there something in the api I can use that I have over looked?
UPDATE:
I have made a jsfiddle in which it is working, how ever in the process of adapting my code to put it in jsfiddle, I noticed that it is bServerSide that is causing the $.fn.dataTableExt.afnFiltering not to work. Is there a work around or another way to user Server-side processing?
I found an alternate way to the checkbox of hiding/displaying.
I use Bootstrap 3 tabs to apply different filters:
<ul class="nav nav-tabs form-tabs" id="search-tabs">
<li id="basic-list" class="active"><a data-toggle="tab" data-dtname="all" href="#all">All</a></li>
<li class="" id="dereg-list"> <a data-toggle="tab" data-dtname="dereg" href="#dereg">Deregistered</a></li>
</ul>
<br>
<div class="tab-content">
<fieldset id="all" class="tab-pane active">
<table id="agent_search" cellpadding="0" cellspacing="0" border="0" class="table table-striped">
<thead>
<th>Agent ID</th>
<th>Agent Name</th>
<th>ID Number</th>
<th>Mobile Number</th>
<th>Team Name</th>
<th>Status</th>
<th></th>
</thead>
</table>
</fieldset>
<fieldset id="dereg" class="tab-pane ">
<table id="dereg_agent_search" cellpadding="0" cellspacing="0" border="0" class="table table-striped">
<thead>
<th>Agent ID</th>
<th>Agent Name</th>
<th>ID Number</th>
<th>Mobile Number</th>
<th>Team Name</th>
<th>Status</th>
<th></th>
</thead>
</table>
</fieldset>
</div>
I first initialize the table on the first tab all which uses bServerSide=true and for the other table(when I switch to the other tab) I do:
$('#search-tabs a').click(function(e) {
e.preventDefault();
$(this).tab('show');
if (this.dataset["dtname"] == "all") {
oTable.fnDraw();
} else if (this.dataset["dtname"] == "dereg") {
var data = $("form").serialize();
$.post(
url, data
).success(function(data){
console.log(data.aaData);
kTable = $('#dereg_agent_search').dataTable( {
"sScrollY": "250px",
"data": data.aaData,
"destroy" : true,
"sDom": "<'row'<'col-sm-6'><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'>>S",
"aoColumnDefs": [
{
"bSortable": false,
"aTargets": [ 6 ],
"sWidth":"150px",
"mRender": function( data, type, full ){
return "<div class='btn-group'><a href="+full[6][0]+" class='btn btn-default btn-sm'>View</a><a href="+full[6][1]+" class='btn btn-default btn-sm'>Edit</a></div>"
}
},
{
"bSortable": true,
"aTargets": [ 0 ],
"sWidth":"150px",
"mRender": function( data, type, full ){
if (full[5] == "DEACTIVATED"){
return "<a href="+full[6][0]+" class='DEACTIVATED'>"+data+"</a>"
} else{
return ""+data+""
}
}
},
{"aTargets": [ 4 ], "sWidth":"250px" },
{"aTargets": [ 5 ], "bVisible":false},
],
"bDeferRender": true,
"bStateSave": true
} );
});
kTable.fnDraw();
}
});
Notice that I get the data to populate the table from the server - using a jQuery $.post request, and then I use datatables' data attribute to populate the table.
I hope This can Help someone.