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>

How to use a DataTable with an array of objects?

I'm trying to use the property "data" to show my data in the table, but the table doesn't works. I made a test using a local array of strings and works very well, I don't know why with an object the table doesn't works
ngAfterViewInit() {
this.listarNotificacao()
$('#datatables').DataTable({
"pagingType": "full_numbers",
"lengthMenu": [
[10, 25, 50, -1],
[10, 25, 50, "All"]
],
lengthChange: false,
responsive: true,
searching: true,
data: this.notificacoes,
columns: [{
data: 'guidNotificacao'
},
{
data: 'titulo'
},
{
data: 'descricao'
},
{
data: 'escopo'
},
],
language: {
search: "_INPUT_",
searchPlaceholder: "Pesquisar promoções",
},
}
});
const table = $('#datatables').DataTable();
$('#inputSearch').on('keyup', function() {
table.search(this.value).draw();
});
}
<div class="material-datatables">
<table id="datatables" class="table table-no-bordered " cellspacing="0" width="100%" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Título</th>
<th>Descrição</th>
<th>Escopo</th>
</tr>
</thead>
</table>
</div>

You have a typo in your datatable initialization. There's an extra curly brace after language. If you look at your browser's dev console, it would have told you this.

Sending Custom Data from Custom Select field in Datatables

i have created a custom select field into my datatable
html = '<div class="col-md-3"><select id="filterleads" class="filterleads form-control">';
html += '<option value="all">All Leads</option>';
html += '<option value="processed">Processed Leads</option>';
html += '<option value="unprocessed">Unprocessed Leads</option>';
html += '</select></div>';
$("div.toolbar").html(html);
which looks like this
now when the select changes i want it to send its value with the datatable ajax so i can filter records according to that
this is how im doing this
var table = $('#allleadstable').DataTable( {
"processing": true,
"serverSide": true,
"responsive": true,
"iDisplayLength": 50,
"sScrollX": "100%",
"order": [[ 1, "desc" ]],
"sScrollXInner": "100%",
"bScrollCollapse": true,
"ajax": {
url:"/leads",
data: {
"leadfilter": ($("#filterleads").val() ? $("#filterleads").val() : 'all')
}
},
"scrollX":true,
"scrollCollapse": true,
//"sDom": '<"top"flip>rt<"bottom"flip><"clear">',
"dom": '<"toolbar">frtip',
columnDefs: [
{ width: 60, targets: 0 },
{ width: 50, targets: 1 },
{ width: 50, targets: 2 },
{ width: 150, targets: 3 },
{ width: 150, targets: 4 },
{ width: 100, targets: 5 },
//{ width: 100, targets: 7 },
{ width: 100, targets: 6 }
]
});
$(document).on("change", "#filterleads", function(event) {
table.ajax.reload();
});
The problem is that it doesn't find $("#filterleads") and always send the value 'all' even when i change the select
How do I send its value everytime I change select?

The issue is because you only read the value of your select when the page loads, and it's all by default. You need to change your code so that it reads the value of the select when it makes the request. To do this provide a function to the data property:
"ajax": {
url: "/leads",
data: function(data) {
data.leadfilter = $("#filterleads").val()
}
},
Note that I removed the ternary as it's not needed. The select will always have a value.
For more information see the ajax.data entry in the DataTables documentation.

For one dynamic field and 2 static its also may looks like:
ajax: {
url: '/action.php',
data: {
controller: 'someController',
action: 'someAction',
leadfilter: () => $('#filterleads').val()
}
},

Datatables doesn't recognize pageLength for number of rows

I'm simply trying to have only 15 rows when I bring my data up. For some reason it is not working. Any help would be appreciated.
$('.datatable').dataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "/ajaxI/gd/1/54",
"data": function (d) {
}
},
"paging": true,
"searching": false,
"lengthChange": true,
"lengthMenu": [[15, 25, 50, -1], [15, 25, 50, "All"]],
"pageLength": 15,
"oLanguage": {
"sProcessing": ' <img src="/img/ajax-loader-large.gif" alt="Loading" width="26" height="26" />'
},
"autoWidth" : false }
});
All my data shows up for some weird reason.

On the table element, use:
data-page-length='15' eg
<table id="table" class="" data-page-length='15' >

Unable to convert HTML to Javascript Variable

I'm trying to nest a jQuery DataTable in a main DataTable. I am able to create the child table and populate it, but when I try and copy the HTML into a JavaScript function that shows the nested row, I get an error since the HTML has line breaks, extra spaces and is not wrapped in quotes.
How can I get this to work?
<link rel="stylesheet" type="text/css" href="/css/dataTables.jqueryui.css" />
<script type="text/javascript" charset="utf8" src="/scripts/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="/Scripts/dataTables.jqueryui.js"></script>
<script type="text/javascript" charset="utf8" src="/scripts/tinymce/tiny_mce.js"></script>
<style type="text/css">
#ethicsOpinions_wrapper select {
width: auto;
}
.ui-dialog-content.ui-widget-content {
padding: 10px 30px 10px 15px;
}
td.details-control {
background: url('/images/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('/images/details_close.png') no-repeat center center;
}
</style>
<script type="text/javascript">
var ethicalRulesTableHtml;
$(function () {
ethicalRulesTableHtml = $("#ethicalRulesGrid").html();
var table = $('#ethicalRulesSections').DataTable({
"ajax": "/umbraco/surface/RulesSurface/getRulesSections",
"order": [[1, 'asc']],
stateSave: false,
"paging": false,
"autoWidth": true,
"processing": true,
"jQueryUI": true,
"destroy": true,
"deferRender": true,
"filter": false,
"dom": '<lfr>t<"F"p>',
"columns": [
{
"data": null,
className: "dt-center details-control",
"defaultContent": "",
"width": "20px",
"orderable": false
},
{
"data": 0,
"visible": false
},
{
"data": 1,
"width": "50px",
className: "dt-center"
},
{
"data": 2
}
]
});
// Add event listener for opening and closing details
$('#ethicalRulesSections tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child("'" + format(row.data()) + "'").show();
tr.addClass('shown');
}
});
});
function format(d) {
$('#ethicalRules').DataTable({
"ajax": "/umbraco/surface/RulesSurface/getRules/" + d[0],
"order": [[1, 'asc']],
"width": "630px",
stateSave: false,
"paging": false,
"autoWidth": true,
"processing": true,
"jQueryUI": true,
"destroy": true,
"deferRender": true,
"filter": false,
"dom": '<lfr>t<"F"p>',
"columns": [
{
"data": 1,
"visible": false
},
{
"data": 2,
"width": "50px",
className: "dt-center"
},
{
"data": 3
}
],
"initComplete": function (settings, json) { return $('#ethicalRules')[0].outerHTML; }
});
}
</script>
<div id="ethicalRulesSectionsGrid">
<table id="ethicalRulesSections" cellpadding="0" cellspacing="0" border="0" class="display ca_highlight_row">
<thead>
<tr>
<th></th>
<th></th>
<th>Section Number</th>
<th>Section</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div id="ethicalRulesGrid">
<table id="ethicalRules" cellpadding="0" cellspacing="0" border="0" class="display ca_highlight_row" style="margin:0 0 0 110px;">
<thead>
<tr>
<th></th>
<th>Rule Number</th>
<th>Rule</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>

Basically the solution is to clone your child table HTML template, add a new child row using HTML content of the cloned element, locate the added table and create a DataTables object based on that.
You need to remove id attribute form your child table as shown below and make its container initially hidden.
HTML
I have omitted some of your HTML code, only child table is shown below.
<div id="ethicalRulesGrid" style="display:none">
<table cellpadding="0" cellspacing="0" border="0" class="display ca_highlight_row" style="margin:0 0 0 110px;">
<thead>
<tr>
<th></th>
<th>Rule Number</th>
<th>Rule</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
JavaScript
var ethicalRulesTableHtml;
$(function () {
ethicalRulesTableHtml = $("#ethicalRulesGrid").html();
var table = $('#ethicalRulesSections').DataTable({
"ajax": "/umbraco/surface/RulesSurface/getRulesSections",
"order": [[1, 'asc']],
stateSave: false,
"paging": false,
"autoWidth": true,
"processing": true,
"jQueryUI": true,
"destroy": true,
"deferRender": true,
"filter": false,
"dom": '<lfr>t<"F"p>',
"columns": [
{
"data": null,
className: "dt-center details-control",
"defaultContent": "",
"width": "20px",
"orderable": false
},
{
"data": 0,
"visible": false
},
{
"data": 1,
"width": "50px",
className: "dt-center"
},
{
"data": 2
}
]
});
// Add event listener for opening and closing details
$('#ethicalRulesSections tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// Destroy child table
tr.next().find('table').DataTable().destroy();
// This row is already open - close it
row.child.remove();
tr.removeClass('shown');
}
else {
// Open this row
format(table, tr);
}
});
});
function format(table, tr) {
var row = table.row(tr);
var d = row.data();
tr.addClass('shown');
// Clone child table and insert it as child row
row.child($('#ethicalRulesGrid').clone().html()).show();
// Locate child table
var $child_table = tr.next().find('table');
// Initialize child table
$child_table.DataTable({
"ajax": "/umbraco/surface/RulesSurface/getRules/" + d[0],
"order": [[1, 'asc']],
"width": "630px",
"stateSave": false,
"paging": false,
"autoWidth": true,
"processing": true,
"jQueryUI": true,
"destroy": true,
"deferRender": true,
"filter": false,
"dom": '<lfr>t<"F"p>',
"columns": [
{
"data": 1,
"visible": false
},
{
"data": 2,
"width": "50px",
className: "dt-center"
},
{
"data": 3
}
]
});
}