We Keep Coding

Datatables.net MVC JavaScript Populated table erroneously shows Showing 0 to 0 of 0 entries

First time using DataTables.net with MVC and JavaScript. On my .cshtml page I have a Datatables.net table that correctly brings back data and populates the table using JavaScript. (I have copied this from another example that also brings back data correctly and populates the table.) My problem is that at the bottom of the table it erroneously shows Showing 0 to 0 of 0 entries despite displaying multiple rows of information. (on the example that I copied from it correctly shows 1 of 20 entries).
My code below:
<script type="text/javascript">
function getTransactionListingHistory(contactCode) {
var groupColumn = 1;
if ($.fn.dataTable.isDataTable('#datatableTransactionHistory')) {
table = $('#datatableTransactionHistory').DataTable();
table.destroy();
}
var historyTable = $('#datatableTransactionHistory').DataTable({
order: [0, "desc"],
"processing": true,
"serverSide": true,
"filter": false,
"ajax": {
"url": "/Transactions/TransactionsGetData?contactCode=" + contactCode,
"type": "POST",
"datatype": "json"
},
columnDefs: [
//{ "targets": [1], "visible": false, "searchable": false }
],
"columns": [
{
"data": "lineDate", "name": "LineDate", "autoWidth": true,
},
{
"data": "lineReference", "name": "lineReference", "autoWidth": true,
"render": function(data, type, row) {
return data;
}
},
{
"data": "formattedDebitAmount", "autoWidth": true, "defaultContent": "",
"render": function(data, type, row) {
if (data != null) {
return "<a class='text-danger text-right text-nowrap'>" + data + "</a>";
}
}
},
{
"data": "LineID", "name": "lineID", "autoWidth": true,
"render": function(data, type, row)
{
return '<a onclick="repeatTransaction(' + '\'' + row.lineID + '\');" href="#" id="repeat-link"><img src="' + "/images/icons/refresh.svg" + '" /> ' + 'Repeat' + '</a>';
}
},
],
fixedHeader: true,
"aLengthMenu": [[10, 25, 50, 100, 250, 500], [10, 25, 50, 100, 250, 500]],
"iDisplayLength": #myPagingSize,
language: {
processing: "<div style='color: #ff6611!important;' class='spinner-border text-warning m-2' role='status' aria-hidden='true'></div> Processing ...",
paginate: {
next: '<i class="fas fa-arrow-right"></i>',
previous: '<i class="fas fa-arrow-left"></i>'
}
}
});
$('#datatableTransactionHistoryul.pagination').addClass("pagination-rounded");
};
</script>

Loading of data in the data table is taking 45 to 60 seconds long with server side processing

I've used server side processing to render 60K records into the data tables. My SQL query is taking 10 seconds to get all the records(60K records). But the rendering time is taking long like, 45 to 60 seconds. I've tested it in my local system in which it took 2 to 3 seconds to render. Whereas on server, its taking the above mentioned time. What would be the cause of this problem and how to solve this?
Following is the query I've used.
SELECT a.asset_id, a.asset_name, a.asset_code,ifnull(tickets,0)as tickets,
a.asset_serialNo,a.asset_price,a.asset_description,a.createdAt,a.updatedAt,a.status,
aty.assetType_name,p.project_Name,l.location_name, dw3.dropdown_name FROM assets a
LEFT join assettypes aty on a.asset_type = aty.assetType_id
Left join projects p on a.project_id =p.project_id
Left JOIN project_locations l on a.location_id=l.id
Left JOIN admin_dropdowns dw3 ON a.assetStatus=dw3.id
left join asset_ticket_count_view atl on a.asset_id=atl.asset_id
where a.asset_name <> 'No Asset Serial No' AND a.location_id=$location order by
a.asset_id desc
This is the function am using for data table.
var dataTable=$('#contactDetail').dataTable({
"scrollX": true,
"pagingType": "numbers",
"processing": true,
"serverSide": true,
"deferRender": true,
"iDisplayLength": 10,
order: [[4,"desc"]],
dom: 'Bfrtip',
buttons: [
'copyHtml5',
{
extend: 'excelHtml5',
title: 'Assets List',
footer: true,
exportOptions: {
columns: [0,1,2,3,4,5,6],
modifier: {
page: 'all',
search: 'none'
},
}
},{
extend: 'pdfHtml5',
title: 'Assets List',
footer: true,
exportOptions: {
columns: [0,1,2,3,4,5,6],
modifier: {
page: 'all',
search: 'none'
},
}
},
],
"ajax": {
url:query_url,
},
'columnDefs': [
{ "orderable": false, "targets": 7 },
{
'targets': [0],
'render': function(data, type, full, meta){
if(type === 'display'){
data = strtrunc(data, 15);
}
return data;
}
},{
'targets': [2],
'render': function(data, type, full, meta){
if(type === 'display'){
data = strtrunc(data, 15);
}
return data;
}
},{
'targets': [6],
'render': function(data, type, full, meta){
let p3;
url='tickets.php?asset_count='+full[full.length - 1];
p3=''+full[full.length - 2]+''
return p3;
}
},{
'targets': [7],
'render': function(data, type, full, meta){
let p1,p2;
<?php
if (in_array($perm2, $_SESSION['Edit'])){ ?>
url='NewAsset.php?id='+data;
p1=''
<?php } else { ?>
p1= '';
<?php }?>
<?php
if (in_array($perm2, $_SESSION['Delete'])){ ?>
url='assets.php?delete='+data;
p2= ''
<?php } else { ?>
p2= '';
<?php }?>
return p1+' '+p2;
},
}]
} );

Jquery Datatables Selected Checkbox to Input Field

I have here a Datatable with 3 columns: Checkbox, Name, and SSNTIN, when I select rows then click Submit, their SSNTIN will output in '#txtSSNTIN' input field like "1001,1002,1003" but my problem is only the selected rows in the current page of my Datatable are being outputted in the input field, when I go to another page there is an indicator that the other rows from the previous page are still selected but only current page is outputting, please help
Datatable
Namestable = $('#NamesDatatable').DataTable({
'select': {
'style': 'multi',
},
'columnDefs': [{
'targets': 0,
'searchable': false,
'orderable': false,
'render': function (data, type, full, meta) {
return '<input type="checkbox" name="id[]" value="'+data.ssn_or_tin+'">';
}
}],
'order': [[1, 'asc']],
"ajax": {
"url": '/Home/GetAllCusname',
"type": "POST",
"datatype": "json",
"data": function (d) {
d.searchParameters = {};
d.searchParameters.name = $('#txtName').val();
}
},
"columns": [
{
data: null,
defaultContent: '',
},
{ "data": "name", "autoWidth": true },
{ "data": "ssn_or_tin", "autoWidth": true }
]
});
Submit Button
$('#btnSubmit').on("click", function (e) {
e.preventDefault();
var searchNames = $('input:checkbox:checked').map(function () {
return $(this).val();
}).get();
$('#txtSSNTIN').val(searchNames);
});

Datatables - Refresh/Reload ajax not working

Hi folks I was able to sucessfully create a datatable that would get it's data from an ajax call. So for the initial loading is working fine. I created a button called refresh and I was hoping that if I call my function initiatearchiveIncidents it would go and fetch my data again and reload the table but instead im getting the error cannot re-initialise the Datatable.
So I tried doing dtTable.ajax.reload(); but this fails because it dosent understand my ajax call. Would anyone know how to do this properly?
initiatearchiveIncidents: function () {
$.getJSON(this.basePath() + '/XPROD_Incidents?$filter=ÉtatValue%20eq%20%27Fermé%27&$orderby=Modifié asc',
function (data) {
//Sharepoint REST returns a nested data format, so we go deep to get the useful parts
var myData = data.d.results;
moment.locale('fr');
//this is the key part of datatables
dtTable = $('#example').DataTable({
data: myData,
columns:[
{
"width": "30px",
sortable: false,
"render": function (data, type, full, meta) {
return "<button class='edit_button btn btn-default btn-sm' name ='btnSubmit' type='button' value='Edit' data-ID='"+full.ID+"'><i class='fa fa-pencil fa-2'></i></button>";
}
},
{ data: "Incident", "width": "75px" },
{
"width": "65px",
sortable: false,
"render": function (data, type, full, meta) {
return "<h4><span class='priorité_span'>"+full.PrioritéValue+ "</span></h4>";
}
},
{ data: "Composante","width": "75px",className: "over_flow_control" },
{ data: "Description","width": "300px",className: "over_flow_control" },
{ data: "Début_imputabilité","width": "100px" },
{ data: "ResponsableValue","width": "100px",className: "over_flow_control" }
],
"order": [[ 5, "desc" ]],
"drawCallback": function( settings ) {
IncidentManager.table_conditional_format();
$('#loading').hide("slow");
},
})
});
},

You need to rewrite your initiatearchiveIncidents() function to use jQuery DataTables Ajax functionality with ajax.url and ajax.dataSrc options, see below.
When you need to reload the data, just call $('#example').DataTable().ajax.reload(), see ajax.reload() for more details.
initiatearchiveIncidents: function() {
moment.locale('fr');
//this is the key part of datatables
dtTable = $('#example').DataTable({
ajax: {
url: this.basePath() + '/GDI_PROD_Incidents?$filter=ÉtatValue%20eq%20%27Fermé%27&$orderby=Modifié asc',
dataSrc: "d.results"
},
columns: [
{
"width": "30px",
sortable: false,
"render": function(data, type, full, meta) {
return "<button class='edit_button btn btn-default btn-sm' name ='btnSubmit' type='button' value='Edit' data-ID='" + full.ID + "'><i class='fa fa-pencil fa-2'></i></button>";
}
}, {
data: "Incident",
"width": "75px"
}, {
"width": "65px",
sortable: false,
"render": function(data, type, full, meta) {
return "<h4><span class='priorité_span'>" + full.PrioritéValue + "</span></h4>";
}
}, {
data: "Composante",
"width": "75px",
className: "over_flow_control"
}, {
data: "Description",
"width": "300px",
className: "over_flow_control"
}, {
data: "Début_imputabilité",
"width": "100px"
}, {
data: "ResponsableValue",
"width": "100px",
className: "over_flow_control"
}
],
"order": [[5, "desc"]],
"drawCallback": function(settings) {
IncidentManager.table_conditional_format();
$('#loading').hide("slow");
}
});
},

Adding html.actionLink to Jquery Datatable

want to add HTML.actionlink to Jquery Datatable.
Am wokrking on this existing site made by someone else. For adding data they used Jquery Datatable with is new to me.
This is the data table:
this.oUserList = $('#UserList').dataTable({
"bLengthChange": false,
"bSort": true,
"bRetreive": true,
"bDestroy": true,
"aaSorting": [[0, "asc"]],
"bProcessing": true,
"sAjaxSource": "#Url.Action("GetUsers","Users")",
"sAjaxDataProp": "Result",
"aoColumns": [
{ "mDataProp": function(source, type, val) {
return source.FirstName + ' ' + source.LastName;
}, "bSortable": true },
{ (1st column },
{ 2ndcolumn},
{
3rd column
}, "bSortable": false },
{
4th column
}, "bSortable": false
},
{
5th column
}, "bSortable": false
},
Here is where i want to change it to action link
{ (6th)
"mDataProp": function (source, type, val) {
return M2.JsonDateToString(source.DateLastLogin);
}, "bSortable": false
},
My 6th column is a duplicate of the 5th, but what i need here is an action link, like this: (How i normally implement them):
<td>#Html.ActionLink("Edit Roles", "Edit", "Users", new { userName = "User\\" + u.UserName }, new { #class = "action" }) </td>
So what I want to no is how do you add a html actionLink to a Jquery Datatable.

Use the source json object to build the anchor:
this should work
{
"mDataProp": function (source, type, val) {
return 'Edit Roles'
}, "bSortable": false
},

Use this article www.codeproject.com/Articles/155422/jQuery-DataTables-and-ASP-NET-MVC-Integration-Part