We Keep Coding

Footnotes at the bottom of Datatables

My table looks like the following:
And basically I just want a row below the table indicating what the small red 1 and 2 means on their respective rows. I cannot find anything online to do with comments or footnotes in datatables. And I have tried to use the tfoot tag and append it to that but it looks awful (which I assume is datatables not agreeing with that method). Anyone know a solution for this?
HTML:
<table id="'.$id.'" class="table table-bordered dt-responsive" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
<thead>
<tr>'.$tableHeadings.'</tr>
</thead>
<tbody>
'.$tableContent.'>
</tbody>
<tfoot>
<td>A note here explaining something important.</td>
</tfoot>
</table>
Javascript:
$(function() {
let table;
table = $('#table_preview').DataTable({
"pageLength": 25,
"processing": true,
"ajax": {
"url": '/assets/ajax/table_ajax_handler.php',
"type": "POST",
"data": { action: "getPesticidesForTable" }
},
"columns": [
{ "data": "crop" },
{ "data": "diseases" },
{ "data": "chemical" },
{ "data": "product" },
{ "data": "rate" },
{ "data": "max_no" },
{ "data": "hi" },
{ "data": "mrl" },
{ "data": "pcs_no" },
{ "data": "supplier" }
],
"searchCols": [
{ "search": '<?=$crop?>' || null },
{ "search": '<?=$disease?>' || null }
],
"columnDefs" : [
{
"targets": [0],
"visible": false,
"searchable": true
},
{
"targets": [1],
"visible": false,
"searchable": true
}
],
"order": [[ 2, "asc" ]],
"rowsGroup": [2, 4, 5, 6, 7, 8, 9]
});
});

You can include a <tfoot> section in the HTML, and then use a colspan to allow the text to extend beyond the first column.
For example, assuming a table with 6 columns:
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office in Country</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
...
</tbody>
<tfoot>
<tr>
<td colspan="2">A note here explaining something important.</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
This looks like the following:
If your text might expand the full width of the footer, then you can use this:
<tfoot>
<tr>
<td colspan="6">A very much longer note here explaining something extremely important.</td>
</tr>
</tfoot>
The number of cells in the footer (also accounting for any colspans) must match the number of cells in a row.
Background note - there are some limitations to using colspans in DataTables. See complex headers for more information.

DataTable shows zero data message, even with the data appearing (Angular)

ngAfterViewInit() {
this.listarPromocoes()
$('#datatables').DataTable({
"pagingType": "full_numbers",
"lengthMenu": [
[10, 25, 50, -1],
[10, 25, 50, "All"]
],
responsive: true,
language: {
search: "_INPUT_",
searchPlaceholder: "Search records",
}
});
const table = $('#datatables').DataTable();
<div class="material-datatables">
<table id="datatables" class="table table-no-bordered " cellspacing="0" width="100%" style="width:100%">
<thead>
<tr>
<th>Nome da promoção</th>
<th>Data de ínicio</th>
<th>Data de término</th>
<th>Notificações</th>
<th>Cliques</th>
<th>Visualizações</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let promocao of promocoes">
<td>{{promocao.titulo}}</td>
<td>{{promocao.dataInicio}}</td>
<td>{{promocao.dataTermino}}</td>
<td>{{promocao.notificacoes}}</td>
<td>{{promocao.cliques}}</td>
<td>{{promocao.visualizacoes}}</td>
<td class="text-right">
<i style="cursor: pointer;" (click)="alterarPromocao(promocao.guidpromocao)" class="material-icons">edit</i>
</td>
</tr>
</tbody>
</table>
</div>
Even when the data is loaded the message of "zero data" keep in the screen. I don't know if the problem is how I load the data in the table or if I need to set some configuration in the table options

How to multiply and Sum 2 columns of datatables using jquery? - Datatables

I want to show the result by using JQuery
I'm using dataTables library for table to show the result. I want to apply following computation on 2 columns using datatables jquery or ajax like
I have two arrays var arr1 = [2,3,4,5]; and var arr2 = [4,3,3,1];
(4*2+3*3+4*3+5*1) Total=34
Using DataTables for this table
This is the pic of table result format i want to show like.
$(document).ready(function() {
var t = $('#example').DataTable({
"columnDefs": [{
"searchable": false,
"orderable": false,
"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();
});
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<table width="100%" class="display" cellspacing="0" id="example">
<thead>
<tr>
<th>ID</th>
<th>Product Name</th>
<th>NSP</th>
<th>Current Sales</th>
<th>Closing Balance</th>
<th>Current Sales * 1.5</th>
<th>(-) Closing Balance</th>
<th>Current Order</th>
<th>Distributor</th>
<th>Date</th>
</tr>
</thead>
</table>

jsfiddle
$(document).ready(function() {
// multiply nsp and closing balance
$.each(dataSet, function(i, row) {
row.total = row.nsp * row.closing_balance;
});
// Table definition
var dtapi = $('#example').DataTable({
data: dataSet,
"deferRender": false,
"footerCallback": function(tfoot, data, start, end, display) {
var api = this.api();
// adding product of nsp and closing_balance
// here column 5 contains product so change it
// accordingly
var p = api.column(5).data().reduce(function(a, b) {
return a + b;
}, 0)
$(api.column(5).footer()).html(p);
$("#total").val(p);
},
"order": [1],
"columns": [
// rest of the columns
{
data: "id"
}, {
data: "product_name"
}, {
data: "nsp"
}, {
data: "closing_balance",
}, {
data: "date",
}, {
data: "total"
}
]
});
});
// DataTable data set used
var dataSet = [{
"id": "Airi",
"product_name": "Satou",
"nsp": 230,
"closing_balance": 23,
"date": "28th Nov 08",
}, {
"id": "Angelica",
"product_name": "Ramos",
"nsp": "191",
"closing_balance": 131,
"date": "9th Oct 09",
}, {
"id": "Ashton",
"product_name": "Cox",
"nsp": 191,
"closing_balance": 37,
"date": "12th Jan 09",
}];
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<table class="display" id="example">
<thead>
<tr>
<th>ID</th>
<th>Product Name</th>
<th>NSP</th>
<th>Closing Balance</th>
<th>Date</th>
<th>NSP * Closing Balance</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Product Name</th>
<th>NSP</th>
<th>Closing Balance</th>
<th>Date</th>
<th>NSP * Closing Balance</th>
</tr>
</tfoot>
<tbody></tbody>
</table>
<label>Total</label>
<input type="text" id="total" class="form-control" readonly value="0.0" />

defining column type in Datatables for sorting

I am following this Datatbles tutorial to sort the third column of my table as percent value:
// Setup column search - add a text input to each footer cell
$('#p_table-id tfoot th').each(function() {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});
// DataTable
var table = $('#p_table-id').DataTable({
"columnDefs": [{
"type": "num-fmt",
"targets": 2
}],
dom: 'l Brtip',
"aLengthMenu": [
[20, 50, 100, -1],
[20, 50, 100, "All"]
],
"buttons": [],
paging: false,
fixedHeader: true
});
// Apply the search
table.columns().every(function() {
var that = this;
$('input', this.footer()).on('keyup change', function() {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});
});
tfoot {
display: table-header-group;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/ju-1.11.4/jq-2.2.4/dt-1.10.13/af-2.1.3/b-1.2.4/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/ju-1.11.4/jq-2.2.4/dt-1.10.13/af-2.1.3/b-1.2.4/datatables.min.js"></script>
<img id="loader" src="/static/img/loader_animation_large.gif" style="
width:36px;
height:36px;
display: none;
position:absolute;
top:50%;
left:50%;
margin-top:-18px;
margin-left:-18px;" />
<p>Logout | Home</p>
<div id="title">
<b style="font-size:200%" ;>Optimize proxies<br></b>
</div>
<div id="proxy_history_dialog" title="Proxy history" style="display:none;">
</div>
<table id='p_table-id' class="display" cellspacing="0" width="50%">
<thead>
<tr>
<th>Site name</th>
<th>Site id</th>
<th>Extraction rate</th>
<th>Proxy</th>
<th>Proxy duration</th>
<th>Proxy history</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Site name</th>
<th>Site id</th>
<th>Extraction rate</th>
<th>Proxy</th>
<th>Proxy duration</th>
<th>Proxy history</th>
</tr>
</tfoot>
<tbody>
<tr>
<td><span>target.com</span></td>
<td><span>-106</span></td>
<td><span>67.8%</span></td>
<td><span>shader_us</span></td>
<td><span>219 days</span></td>
<td>
<button id="-106" class="get-proxy-history">history</button>
</td>
</tr>
<tr>
<td><span>walmart.com</span></td>
<td><span>-105</span></td>
<td><span>86.6%</span></td>
<td><span>trusted proxies</span></td>
<td><span>433 days</span></td>
<td>
<button id="-105" class="get-proxy-history">history</button>
</td>
</tr>
<tr>
<td><span>bestonix</span></td>
<td><span>-104</span></td>
<td><span>93.3%</span></td>
<td><span>shader_us</span></td>
<td><span>226 days</span></td>
<td>
<button id="-104" class="get-proxy-history">history</button>
</td>
</tr>
</tbody>
</table>
I tried to replace columnDefs with aoColumnDefs and to associate the columndef as in second example in the link above. Still, the sorting functionality for this column is not responding. What am I missing out here?

Change "num-fmt" to "html-num-fmt". It should work now.
var table = $('#p_table-id').DataTable({
"columnDefs": [
{"type": "html-num-fmt", "targets": 2}
],
dom: 'l Brtip',
"aLengthMenu": [
[20, 50, 100, -1],
[20, 50, 100, "All"]],
"buttons": [],
paging: false,
fixedHeader: true
});

Since the percentage sign is at the end the sorting should work normally without any extra format definition. I remove the column defs and the sorting works. Here is the plunk you can try on https://plnkr.co/edit/E5CtRwqxVBSqjQTOdc3B?p=preview
var table = $('#p_table-id').DataTable({
dom: 'l Brtip',
"aLengthMenu": [
[20, 50, 100, -1],
[20, 50, 100, "All"]],
"buttons": [],
paging: false,
fixedHeader: true
});

DataTables sorting not showing in descending order

Please solve my problem. I want to show descending order. By default it is ascending order.
Please check my code-
datTable.js
JS-
<script href="http://myshowcam.com/TestSite/assets/data-tables/jquery.dataTables.js"></script>
<script>
$('#dataTable').dataTable({
"sDom": "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page",
"oPaginate": {
"sPrevious": "Prev",
"sNext": "Next"
}
},
"aoColumnDefs": [{
'bSortable': false,
'aTargets': [0]
}]
});
</script>
HTML-
<table class="table table-striped border-top" id="dataTable">
<thead>
<tr>
<th class="hidden-phone"> #ID </th>
<th class="hidden-phone"> Username </th>
</tr>
</thead>
<tbody>
<tr>
<td>7</td>
<td>chinu</td>
</tr>
<tr>
<td>3</td>
<td>Debakanta</td>
</tr>
<tr>
<td>8</td>
<td>Sanjib</td>
</tr>
</tbody>
</table>
Above code by default i am getting asc record in the first column.
I want to customize above code. Need desc

You'll have to add an order property to your table configuration. Your version of datatables doesn't support the order property. I'd recommend updating to the latest version of datatables if you can.
$('#dataTable').dataTable({
order: [
[0, 'desc']
]
});
Here is the fiddle. (note: I had to comment out the paginate property, uncomment it in your code)

$('#example').DataTable( {
"aaSorting": [[ 0, "desc" ]] // Sort by first column descending
} );
http://live.datatables.net/pacirato/1/edit