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>
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'
}
}
]
}
So, I have this table
<table class="table table-bordered" id="tabeljabatan" width="100%" cellspacing="0">
<thead>
<tr align="center">
<th width="5%">No.</th>
<th>Nama Jabatan</th>
<th>Keterangan</th>
<th width="16%" align="center">Aksi</th>
</tr>
</thead>
<tbody>
#foreach($masterJabatan as $mj)
<tr>
<td align="center"></td>
<td>{{ $mj->nama_jabatan }}</td>
<td>{{ $mj->keterangan}}</td>
<td align="center">
Edit
Hapus
</td>
</tr>
#endforeach
</tbody>
</table>
and here is the JavaScript:
<script>
$(document).ready(function() {
var t = $('#tabeljabatan').DataTable( {
"columnDefs": [ {
"searchable": true,
"orderable": true,
"targets": 0
} ],
"order": [[ 1, 'asc' ]]
} );
t.on( 'order.dt search.dt', function () {
t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
cell.innerHTML = i+1;
} );
} ).draw();
} );
</script>
Why is this order-able and searchable table not working? The table screen appears the order icon.
And, as you can see I already set the searchable and order-able to be true.
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.
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’m using DataTables to display data in my UI.
I’ve configured it to show a search box for every column.
But now the sort arrows are not on the top any more.
How it is currently looking:
Image (I do not have enough reputation to post an image sry.)
How can I get them back to the top?
HTML:
<div id="container">
<div id="demo">
<h2>Index</h2>
<table id="example" class="display">
<thead>
<tr>
<th>MovieId</th>
<th>Title</th>
<th>TagLine</th>
<th>AirDate</th>
</tr>
<tr>
<td></td>
<td>Title</td>
<td>TagLine</td>
<td>AirDate</td>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
JS-Code:
$(document).ready(function () {
$('#example thead td').each(function () {
var title = $('#example thead td').eq($(this).index()).text();
if (title == "") {
return;
}
$(this).html('<input type="text" placeholder="SearchText ' + title + '" />');
});
var table = $('#example').DataTable({
"sAjaxSource": "http://localhost:51794/Movie/AjaxHandler",
"bProcessing": true,
"bServerSide": true,
"sDom": 'ltipr',
"aoColumns": [
{
"sName": "MovieId",
"bSortable": false,
"bSearchable": false,
"bVisible": false
},
{ "sName": "Title" },
{ "sName": "TagLine" },
{ "sName": "AirDate" }
]
});
$("#example thead input").on('keyup change', function () {
table
.column($(this).parent().index() + ':visible')
.search(this.value)
.draw();
});
});
I suggest you to place the filters above header row, and your problem will be solved.
:
<thead>
<tr>
<td></td>
<td>Position</td>
<td>Office</td>
<td>Age</td>
<td>Start date</td>
<td>Salary</td>
</tr>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
Add the option
"bSortCellsTop": true
to your datatables init code.
http://legacy.datatables.net/usage/options#bSortCellsTop