We Keep Coding

Data Table with AJAX, sum and add total footer

I have a datatable created by the following code
var data = results.rows;
var column_names = results.headers;
if (column_names) {
var columns = [];
var total = 0;
for (var i = 0; i < column_names.length; i++) {
columns[i] = {
'title': column_names[i],
'data': i
}
};
dataTable=$('#report').DataTable( {
columns: columns,
data: data,
paging: false,
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
}
);
showTable();
dataTable.columns.adjust().draw();
} else {
alert('No Results Found');
}
I would like to add a footer to the table that contains a sum of the 2nd column and has text that says "Total: "
The table in the html looks like:
<table id="report" class="compact">
</table>
I tried adding a footer in html but it was overwritten when the report is rerun so this needs to be done in the top section of code in order to display every time a table is created.
Thanks in advance:)

I found an example here http://jsbin.com/putiyep/edit?js.
It wont look as pretty as you hoped for but it'll do the job.
It leverages the footerCallback of the API and use the column index of the table and basic math to return your total.
The data table section of the code would look like:
dataTable=$('#report').DataTable( {
columns: columns,
data: data,
paging: false,
dom: 'Bfrtip',
"footerCallback": function (tfoot, data, start, end, display) {
var api = this.api();
var p = api.column(2).data().reduce(function (a, b) {
return a + b;
}, 0)
$(api.column(2).footer()).html("Total: "+p);
},
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
}
);

How to eliminate the empty rows from the jTable jQuery?

I have two jTables in my web page, which loads data from a database. The first jTable fetches the data directly from the database and the second table loads its data according to the selected data in the first table.
The problem now I am facing is, in-case if there are no data to be fetched for the second table, from the particular selected row, the rows are displaying empty.
For example, I have selected a data in the table 1, but since there is no data related to the selected data, the second table is displaying empty rows.
How to hide or not to fetch if the rows were completely empty at the same time if the row has even a single entry I wanted to display that row.
I am using python in the back end to fetch the data. So, do I need to make changes in my python code or do I need to make a change in the front end jQuery or CSS.
I have tried to use the jQuery, it is not working as expected.
My first jTable code is:
$('#SelectCode').jtable({
selecting: true,
paging: true,
actions: {
listAction:// my back end connection here
},
fields: {
codes: {
title: 'Code',
},
name:{
title: 'Name',
},
},
selectionChanged: function () {
var $selectedRows = $('#SelectCode').jtable('selectedRows');
if ($selectedRows.length > 0) {
$selectedRows.each(function () {
var record = $(this).data('record');
Code = record.event_codes;
$('#System').jtable('load',{code:(SelectedCode)});
});
},
});
My second jTable code is:
$('#System').jtable({
selecting: true,
paging: true,
actions: {
listAction:// my back end connection here
},
fields: {
date:{
title:'Date',
},
Time:{
title:'Time'
},
},
});
So, can someone, please help me how can I achieve in eliminating the empty rows from the table.
Thanks,

I have achieved it by adding the following line of codes in my jTable fields:
display: function(data) {
if (data.record.date == null) {
$("#System tr").each(function() {
var cellText = $.trim($(this).text());
if (cellText.length == 0) {
$(this).hide();
}
});
}
return data.record.date;
},

Remove row from Kendo UI Grid with jQuery

I am using a Kendo UI grid and for deleting a row I am using a custom button with bootstrap that when I click on it, with ajax I call a web api method to remove that row and if it is successfully deleted that row removes it from the DOM. (I'm not using the command destroy of kendo)
The problem I have is that if I try to filter that row that was removed, it appears again in the grid and it seems that it was not removed at all.
This is my Kendo UI grid:
var table = $("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "/api/customers",
dataType: "json"
}
},
pageSize: 10
},
height: 550,
filterable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
template: "<a href='' class='btn-link glyphicon glyphicon-remove js-delete' title='Delete' data-customer-id= #: Id #></a>",
field: "Id",
title: " ",
filterable: false,
sortable: false,
width: 50,
attributes: {
style: "text-align: center"
}
}, {
field: "Name",
title: "Name",
width: 100,
}, {
field: "LastName",
title: "LastName",
width: 100,
}, {
field: "Email",
title: "Email",
width: 150
}]
});
And this is my jQuery code for deleting a row:
$("#grid").on("click", ".js-delete", function () {
var button = $(this);
if (confirm("Are you sure you want to delete this customer?")) {
$.ajax({
url: "/api/customers/" + button.attr("data-customer-id"),
method: "DELETE",
success: function () {
button.parents("tr").remove(); //This part is removing the row but when i filtered it still there.
}
});
}
});
I know that in jQuery DataTables when can do something like this:
table.row(button.parents("tr")).remove().draw();
How can i do something like this with Kendo UI using jQuery?

Don't ever play with a Kendo's widget DOM. Always use it's methods instead.
Using Grid's removeRow():
$("#grid").on("click", "button.remove", function() {
var $tr = $(this).closest("tr"),
grid = $("#grid").data("kendoGrid");
grid.removeRow($tr);
});
Demo
Using DataSource's remove():
$("#grid").on("click", "button.remove", function() {
var $tr = $(this).closest("tr"),
grid = $("#grid").data("kendoGrid"),
dataItem = grid.dataItem($tr);
grid.dataSource.remove(dataItem);
});
Demo

My usage was a little different. I have a custom delete button, so I needed to delete by ID, not UID.
You should be able to match on any field value instead of ID.
var grid = $("#grid").data("kendoGrid");
var dataItem = grid.dataSource.get(ID);
var row = grid.tbody.find("tr[data-uid='" + dataItem.uid + "']");
grid.removeRow(row);
We were trying to prevent messing with the controller, and this calls the existing delete function.

The removed row will be present in the kendo ui till you push changes to server.
To remove the row entirely you need to use
grid.saveChanges()
So the code below will remove row from server as well from ui
const row = $(e.target).closest('tr')[0];
const grid = $(e.target).closest('#grid').data("kendoGrid");
grid.removeRow(row);
grid.saveChanges() //comment out if you need to remove only from ui

How can I reload the page after confirmation of file export in Datatable?

I am following this example:
https://datatables.net/extensions/buttons/examples/initialisation/export
I want if I confirm the file exporting , the page will reload. How can I do this?

You can customize the button's action. Try this :
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{//Start the creation of the button
extend: "csv",//It's a button that export the table dtat into a CSV file
text: "export and relode",//The text of the button
action: function(e, dt, button, config) {
//The action of the button
$.fn.dataTable.ext.buttons.csvHtml5.action.call(this, e, dt, button, config);//Export the data
window.location.reload(false);//Relode the page
}
}
]
});
});
Here is a working Fiddle

rows not saving in pagination for jquery datatables table with multiple row selection

I was able to successfully implement Datatables using the jQuery library. The problem is that when i click on page 2 in the pagination area it acts fine however when I go back to page 1 the records i selected are no longer selected.
Here is what it's supposed to do: datatables select row example
I updated my datatables to version: 1.10.15
Here is my call to handle the click event:
$("#datatable_users tbody").on("click","tr",function(){$(this).toggleClass("selected");});
Here is my code for creating the DataTable:
$("#datatable_'.$ref.'").dataTable({
"iDisplayLength": '.$itemlimit.',
"language": {
"url": "http://cdn.datatables.net/plug-ins/1.10.12/i18n/English.json"
},
"processing": true,
"serverSide": true,
"ajax": { // define ajax settings
"url": \''.Pluto::registry('web_base_uri').'service/datatable?req=1&ref='.$ref.'\',
"data": function(data) {
var datafilter= $("form#JqueryDataTableFormFilter_'.$ref.'").serializeControls();
$.each(datafilter, function(key, value) {
data[key] = value;
});
//console.log(datafilter);
}
},
"orderCellsTop": true,
"dom": "Bfrtip",
buttons: [
{
"text": "'.$search_label.'",
"className":"btn btn-default BtnjQueryDataTableFilter",
"action": function ( e, dt, node, config ) {
dt.ajax.reload();
}
}
]
});

As in server side processing the DataTable gets redrawn when you paginate so you need to keep track of what all was selected before clicking the next page and manually highlight the selected rows after each page click.
Here's an exact same working example featured on their website.
https://datatables.net/examples/server_side/select_rows.html
Let me know if you have any questions.