We Keep Coding

How to show total in datatables?

I have a small problem. I am creating a table with datatable and bootstrap 4 and the truth is that it works great, but I have the following problem: I am trying to put a totalizer so that the total of one (or several) columns appears at the end. The code works fine (Because it calculates the total) the problem is that it places it in the header instead of in the footer. Do you know why? Thanks.
echo '<div class="card-body"><table id="html5-extension" class="table table-hover table-striped " style="width:100%">';
echo '<thead class=""><tr role="row">
<th >'.$palabra['numeroor'].'</th>
<th >'.$palabra['serieano'].'</th>
<th >'.$palabra['taller'].'</th>
<th >'.$palabra['fecha'].'</th>
<th >'.$palabra['matricula'].'</th>
<th >'.$palabra['vehiculo'].'</th>
<th >'.$palabra['cristalroto'].'</th>
<th >'.$palabra['compania'].'</th>
<th ></th>
<th></th>
</tr> </thead>';
echo ' <tfoot>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tfoot>
<tbody>';
echo '<tr role="row">
<td scope="row">'.$lisc['or_interna'].'</td>
<td scope="row">'.$lisc['serie_or'].'/'.$lisc['ano_or'].'</td>
<td >'.$datostaller->nombre.'</td>
<td >'.cfecha($lisc['fecha_entrada']).'</td>
<td >'.$lisc['matricula'].'</td>
<td >'.$marca.$espacio.$modelo.'</td>
<td >'.$arraydano['nombre'].'</td>
<td >'.$cia->nombre_comercial.'</td>
';
my js code:
<script>
//#html5-extension
$(document).ready(function () {
$('#html5-extension tfoot td').each(function () {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Filtrar.." />');
});
var table = $('#html5-extension').DataTable({
"dom": 'B<"float-left"i><"float-right"f>t<"float-left"l><"float-right"p><"clearfix">',
"responsive": false,
"language": {
"url": "https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json"
},
"initComplete": function () {
this.api().columns().every(function () {
var that = this;
$('input', this.footer()).on('keyup change', function () {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
})
},
footerCallback: function (row, data, start, end, display) {
var api = this.api();
// Remove the formatting to get integer data for summation
var intVal = function (i) {
return typeof i === 'string' ? i.replace(/[\$,]/g, '') * 1 : typeof i === 'number' ? i : 0;
};
// Total over all pages
total = api
.column(0)
.data()
.reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0);
// Total over this page
pageTotal = api
.column(0, { page: 'current' })
.data()
.reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0);
// Update footer
$(api.column(0).footer()).html('<th>€' + pageTotal + ' ( €' + total + ' en total)</th>');
},
"ordering": false,
buttons: [
{
extend: 'copyHtml5',
footer: true,
text: 'Copiar',
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6, 7 ]
},
text: '<i class="glyphicon glyphicon-floppy-disk"></i><span> Copiar</span>'
},
{
extend: 'excelHtml5',
footer: true,
autoFilter: true,
sheetName: 'Ordenes de Trabajo',
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6, 7 ]
},
text: '<i class="glyphicon glyphicon-download-alt"></i><span> Generar Excel</span>',
filename: 'Listado de Ordenes de Trabajo',
},
{
extend: 'pdfHtml5',
footer: true,
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6, 7 ]
},
text: '<i class="glyphicon glyphicon-save-file"></i><span> Generar PDF</span>',
filename: 'Listado de Ordenes de Trabajo',
},
{
extend: 'print',
footer: true,
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6, 7 ]
},
text: '<i class="glyphicon glyphicon-print"></i><span> Imprimir</span>',
}
],
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Todos"]]
});
});
</script>
I edit. I have the following code so that the search engines appear at the top (instead of at the bottom). I know that's why the total comes out at the top, what I don't know is how to fix the total at the bottom and the search engines at the top
<style>
#html5-extension tfoot input {
width: 100% !important;
}
#html5-extension tfoot {
display: table-header-group !important;
}
</style>

I think you would be better off using this example as your starting point, because it places filters in the heading correctly.
The linked example creates a second header row so that the sorting controls can be kept separate from the filtering controls. The orderCellsTop: true option tells DataTables that the first header row is the one to be used for sorting.
(The linked example also uses FixedHeader, which I think you do not need, so you can ignore that piece.)
That leaves you free to place your totals in your footer - which is not used when building the filter controls.
So, now you can handle your totals logic in the footerCallback section of the DataTable, similar to this example, which I think is what you are using already in your DataTable.
Here is a runnable demo with it all combined into one DataTable. My sample data is from the DataTables web site so I use the "age" data for summing (just to show how the code works).
You would still need to change the data, and add back in the Bootstrap library. But this approach does not require you to use your custom CSS to try to manage where controls are placed. And it does not need to use !important anywhere.
$(document).ready(function () {
// Setup - add a text input to each footer cell
$('#example thead tr')
.clone(true)
.addClass('filters')
.appendTo('#example thead');
var table = $('#example').DataTable({
orderCellsTop: true,
fixedHeader: true,
footerCallback: function ( row, data, start, end, display ) {
var api = this.api(), data;
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '')*1 :
typeof i === 'number' ?
i : 0;
};
// Total over all pages
total = api
.column( 3 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Total over this page
pageTotal = api
.column( 3, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( 3 ).footer() ).html(
'€'+pageTotal +' (€'+ total +' total)'
);
},
initComplete: function () {
var api = this.api();
// For each column
api
.columns()
.eq(0)
.each(function (colIdx) {
// Set the header cell to contain the input element
var cell = $('.filters th').eq(
$(api.column(colIdx).header()).index()
);
var title = $(cell).text();
$(cell).html('<input type="text" placeholder="' + title + '" />');
// On every keypress in this input
$(
'input',
$('.filters th').eq($(api.column(colIdx).header()).index())
)
.off('keyup change')
.on('change', function (e) {
// Get the search value
$(this).attr('title', $(this).val());
var regexr = '({search})'; //$(this).parents('th').find('select').val();
var cursorPosition = this.selectionStart;
// Search the column for that value
api
.column(colIdx)
.search(
this.value != ''
? regexr.replace('{search}', '(((' + this.value + ')))')
: '',
this.value != '',
this.value == ''
)
.draw();
})
.on('keyup', function (e) {
e.stopPropagation();
$(this).trigger('change');
$(this)
.focus()[0]
.setSelectionRange(cursorPosition, cursorPosition);
});
});
},
});
});
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<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://datatables.net/media/css/site-examples.css">
</style>
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display" 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>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011-04-25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011-07-25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009-01-12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012-03-29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008-11-28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012-12-02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012-08-06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010-10-14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009-09-15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008-12-13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008-12-19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013-03-03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011-01-25</td>
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
<th>123</th>
<th></th>
<th></th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>

Advanced search with data-table

I was wondering is there way to improve search in data table?
I have a numeric column in a datatable. Is it possible to return back just the number being searched on?
So for example: 100
210
310
1
and if I search for 1
I want to show only :1 but not the others that contain 1
jQuery(document).ready(function ($) {
var db = $('#min-table').DataTable({
"dom": '<"pull-left"f><"pull-right"l>tip',
"bJQueryUI": true,
"bSort": true,
"bSearchable": true,
"bPaginate": true,
"lengthMenu": [[20, 35, 50, -1], [20, 35, 50, "All"]],
"iDisplayLength": 20
});
});

You can make use of datatable plugins to override some of the features. In your case, you can add your custom function to $.fn.dataTable.ext.search.push
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
const searchTerm = $("[type=search]").val();
if(searchTerm){
return data[3] === searchTerm
}else{
return true;
}
}
);
In the above code, I'm using a full text search on fourth column for each row. Row will be included or excluded based on the return value of the function (true or false).
Ref: https://datatables.net/examples/plug-ins/
Try the below snippet. Full text search enabled on age column.
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
const searchTerm = $("[type=search]").val();
if(searchTerm){
return data[3] === searchTerm
}else{
return true;
}
}
);
var table = $('#example').DataTable();
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" 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>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
</tbody>
</table>

Get attribute value from datatables row for every record

I am working with datatables and I want to edit and delete data table records
When I do console.log(row) following output I get:
["user1", "Edit"]
(index):274 (2) ["user2", "Edit"]
(index):274 (2) ["user3", "Edit"]
(index):274 (2) ["user4", "Edit"]
(index):274 (2) ["user5", "Edit"]
What I want is to get data-id from render: function (data, type, row) which I have used in datatable script and when click on edit button I want to get specific id in alert but I am unable to extract data-id.
My jQuery code:
$.fn.dataTable.ext.errMode = 'none';
var table = $('#catgeory_list').DataTable({
processing: true,
language: {
emptyTable: 'no result found.'
},
columnDefs: [{
visible: true,
targets: 0,
render: function (data, type, full, meta) {
return data;
}
}, {
visible: true,
targets: 1,
render: function (data, type, row) {
console.log(row);
return '<button id="editBtn" class="btn btn-wrang btn-flat edit" name="editBtn" type="button">Edit</button>' + ' <button id="deleteBtn" class="btn btn-danger btn-flat delete" name="deleteBtn" type="button" >Delete</button>';
}
}
],
});

In order to get any source object/array property/item for the row being clicked, you don't need anything more than simple row().data() API method invoked against DataTable row (selected by the closest to the clicked button <tr> node):
$('table').on('click', 'tbody td button', function(){
const rowData = dataTable.row($(this).closest('tr')).data();
alert(`Row ID is ${rowData.id}`);
});
Here, dataTable is a variable, you assign your DataTable to.
Full-blown DEMO you might find below.
Also, considering your ultimate goal, you might find of use my answer over here, which provides complete working demo of editable DataTable. So, if you find that helpful, upvotes are appreciated ;)
//src data
const srcData = [
{id: 1, item: 'apple'},
{id: 2, item: 'banana'},
{id: 3, item: 'tomato'}
];
//datatables init
const dataTable = $('table').DataTable({
dom: 't',
data: srcData,
columns: [{data: 'item', title: 'Item Name', render: data => data+'<button>Show Id</button>'}]
});
//click handler
$('table').on('click', 'tbody td button', function(){
const rowData = dataTable.row($(this).closest('tr')).data();
alert(`Row ID is ${rowData.id}`);
});
td button {float: right}
<!doctype html><html><head><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.css" /><script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.js"></script></head><body><table></table></body></html>

You can wrap data or row parameter from callback function with jQuery $() to get any element/node attributes or DOM manipuation. Refer also toJQuery() for dealing with Datatables API instances.
Render
render: function(data, type, row, meta){
var data_id = $(data).data('id');
console.log('Columns.Render:',data_id);
return data + " : data-id(" + data_id+")";
}
createdRow
createdRow: function (row, data, index) {
var data_id = $('td a.edit_row', row).data('id');
console.log('CreatedRow:',data_id);
}
Click Event
$("a.edit_row").click(function(){
var data_id = $(this).data('id');
alert(data_id);
});
Working Live Demo:
$(document).ready( function () {
var table = $('#example').DataTable({
columnDefs: [
{
targets: 1,
render: function(data, type, row, meta){
var data_id = $(data).data('id');
console.log('Columns.Render:',data_id);
return data + " : data-id(" + data_id+")";
}
},
],
createdRow: function (row, data, index) {
var data_id = $('td a.edit_row', row).data('id');
console.log('CreatedRow:',data_id);
}
});
$("a.edit_row").click(function(){
var data_id = $(this).data('id');
alert(data_id);
});
} );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css"
rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="example" class="display nowrap" 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>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>Edit</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$3,120</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Edit</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Edit</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$4,800</td>
</tr>
</tbody>
</table>

How to add a column SUM feature to my datatable?

I have created a datatable which has a multi search feature in the footer and I would like to have a feature which adds up all the salaries of what is currently displayed or searched. I am not sure how to do that.
Here is my HTML code for the table
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="./search.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<table id="example" class="display" 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>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</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>
Here is my search.js Code
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#example tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = $('#example').DataTable();
// 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();
}
} );
} );
} );
I am trying to add a sum feature to this code where it adds up the total of the salary column, can someone please help me? im not sure how to do this

That topic has been raised multiple times over here at SO, you may inquiry my earlier post in that regard.
The trick here is to use selector-modifier {search:'applied'} together with methods .column() (if you need to summarize single column) or .rows() for multi-column totals.
Another helpful method .data() may be used to extract the data into array (1, 2).
In order to refresh your totals upon each table re-draw, you may employ drawCallback option, to specify callback function that re-calculates totals for visible rows and puts the result into desired node.
Check out following live demo of that approach:
//format number as currency (not essential within current context)
const num2curr = num => '$'+num.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
//datatables initialization
const dataTable = $('#example').DataTable({
dom: 't',
//append individual filter inputs
initComplete: function(){
this.api().columns().every(function(){
$(this.footer()).html(`<input colindex="${this.index()}" placeholder="${$(this.header()).text()}"></input>`)
})
},
//calculate total salary and put that into span#totalsalary
drawCallback: function(){
const totalSalary = this
.api()
.column(5,{search:'applied'})
.data()
.toArray()
//remove '$',',', keep decimal separator '.', summarize
.reduce((total,salary) => total+=Number(salary.replace(/[^0-9\.]/g,'')),0);
//insert result into the <span> text
$('#totalsalary').text(`Total salary for filtered rows is: ${num2curr(totalSalary)}`);
}
});
//individual filtering
$('#example').on('keyup', 'tfoot input', function(){
dataTable.column($(this).attr('colindex')).search($(this).val()).draw()
});
<!doctype html><html><head><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.css" /><script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.js"></script><script src="test.js"></script></head><body><table id="example" class="display" 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>Tiger Nixon</td><td>System Architect</td><td>Edinburgh</td><td>61</td><td>2011/04/25</td><td>$320,800</td></tr><tr><td>Garrett Winters</td><td>Accountant</td><td>Tokyo</td><td>63</td><td>2011/07/25</td><td>$170,750</td></tr><tr><td>Ashton Cox</td><td>Junior Technical Author</td><td>San Francisco</td><td>66</td><td>2009/01/12</td><td>$86,000</td></tr><tr><td>Cedric Kelly</td><td>Senior Javascript Developer</td><td>Edinburgh</td><td>22</td><td>2012/03/29</td><td>$433,060</td></tr><tr><td>Airi Satou</td><td>Accountant</td><td>Tokyo</td><td>33</td><td>2008/11/28</td><td>$162,700</td></tr><tr><td>Brielle Williamson</td><td>Integration Specialist</td><td>New York</td><td>61</td><td>2012/12/02</td><td>$372,000</td></tr><tr><td>Herrod Chandler</td><td>Sales Assistant</td><td>San Francisco</td><td>59</td><td>2012/08/06</td><td>$137,500</td></tr><tr><td>Rhona Davidson</td><td>Integration Specialist</td><td>Tokyo</td><td>55</td><td>2010/10/14</td><td>$327,900</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><span id="totalsalary"></span></body></html>

Use the code below for summation
jQuery.fn.dataTable.Api.register( 'sum()', function ( ) {
return this.flatten().reduce( function ( a, b ) {
if ( typeof a === 'string' ) {
a = a.replace(/[^\d.-]/g, '') * 1;
}
if ( typeof b === 'string' ) {
b = b.replace(/[^\d.-]/g, '') * 1;
}
return a + b;
}, 0 );
} );
Then, you can get the sum after you draw with
that.column(5, {"filter": "applied"}).data().sum();
Also, omit the comma and $. You can refer to here for more information.

Jquery Datatables Individual column searching

I am trying to apply Individual column searching (select inputs) for Datatables plugin in Jquery. I am using serverside processing, the data is loaded correctly from SQL Server into my table but when I want to select an input to filter a column based on that value, the filter is not working as you see here.
When I select a country for example Austria, the data is not filtered to Austria.
Here is my index page
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset=utf-8" />
<title> Datatables Individual column searching using PHP Ajax Jquery </title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1 align="center">Datatables</h1>
<div class="table-responsive">
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Country</th>
<th>Territory</th>
<th>Market</th>
<th>Entname</th>
<th>MTM</th>
<th>Qty</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Country</th>
<th>Territory</th>
<th>Market</th>
<th>Entname</th>
<th>MTM</th>
<th>Qty</th>
</tr>
</tfoot>
</table>
</div>
</div>
</body>
</html>
<script type="text/javascript" language="javascript" >
$(document).ready(function() {
var dtable = $('#example').DataTable({
"processing": true,
"serverSide": true,
"deferRender": true,
"lengthMenu": [ [25, 50, 100, -1], [25, 50, 100, "All"] ],
"pageLength": -1,
"lengthChange": true,
"pagingType": "full_numbers",
"columns": [
{"data": "Country"},
{"data": "Territory"},
{"data": "Market"},
{"data": "Entname"},
{"data": "MTM"},
{"data": "Qty"}
],
"ajax": {
url: 'fetch.php',
type: 'POST'
},
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
});
$(".dataTables_filter input")
.unbind()
.bind("keyup change", function(e) {
if(this.value.length >= 1 && e.keyCode == 13) { dtable.search(this.value).draw(); }
if(this.value == "") { dtable.search("").draw(); }
return;
});
} );
</script>
and here is my fetch.php
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
if (!empty($_POST) ) {
$ser="*****";
$db="*****";
$user="*****";
$pass="*****";
$dbDB = new PDO("odbc:Driver=ODBC Driver 13 for SQL Server;Server=*****;Database=*****;Port=1456", $user, $pass);
$MyTable="*****";
function getData($sql){
global $dbDB ;
global $MyTable ;
$result = $dbDB->query($sql);
$data= $result->fetchAll(PDO::FETCH_ASSOC);
return $data; }
$res = $dbDB->query("SELECT COUNT(*) FROM ".$MyTable);
$recordsTotal = $res->fetchColumn();
$draw = $_POST["draw"];
$orderByColumnIndex = $_POST['order'][0]['column'];
$orderBy = $_POST['columns'][$orderByColumnIndex]['data'];
$orderType = $_POST['order'][0]['dir'];
$start = $_POST["start"];
if ($_POST['length'] == -1) {$length = $recordsTotal;}
else {$length = $_POST['length'];}
if(!empty($_POST['search']['value'])){
for($i=0 ; $i<count($_POST['columns']);$i++){
$column = $_POST['columns'][$i]['data'];
$where[]="$column like '%".$_POST['search']['value']."%'";
}
$where = "WHERE ".implode(" OR " , $where);
$sql = sprintf("SELECT COUNT(*) FROM %s %s", $MyTable , $where);
$r = $dbDB->query($sql);
$recordsFiltered = $r->fetchColumn();
$sql = sprintf("SELECT Country,Territory,Market,Entname,MTM,Qty FROM %s %s ORDER BY %s %s OFFSET %d ROWS FETCH NEXT %d ROWS ONLY", $MyTable , $where ,$orderBy, $orderType ,$start,$length);
$data = getData($sql);
}
else {
$sql = sprintf("SELECT Country,Territory,Market,Entname,MTM,Qty FROM %s ORDER BY %s %s OFFSET %d ROWS FETCH NEXT %d ROWS ONLY", $MyTable ,$orderBy, $orderType ,$start,$length);
$data = getData($sql);
$recordsFiltered = $recordsTotal;
}
$response = array(
"draw" => intval($draw),
"recordsTotal" => $recordsTotal,
"recordsFiltered" => $recordsFiltered,
"data" => $data );
echo json_encode($response);
}
else {
echo "NO POST Query from DataTable";
}
?>
I believe that the issue is somewhere in the javascript part not the php file but just to show an overview how the data is populated into the table.
Any idea please where is the issue?

Check below example
// Setup - add a text input to each footer cell
$('#item tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
// DataTable
var otable = $('#item').DataTable();
// Apply the search
otable.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.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.jqueryscript.net/demo/DataTables-Jquery-Table-Plugin/media/css/jquery.dataTables.css">
<table name="item" id="item" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
</tbody>
</table>

what about datefilter search i.e enddate>startdate to this datatable.It would more convenient.