Develop Reference

jquery datatables always remove last column after rendering finished

This is a frustrating problem for me, i have configured a table to use 5 column with the last column for buttons. However after the datatables finished rendering, it suddenly removed the last column from it.
This is the table:
<table id="grid-data" class="table table-striped dataTable" width="100%">
<thead>
<tr>
<th>Role Name</th>
<th>Activity Name</th>
<th>Start Date</th>
<th>End Date</th>
<th>Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
This is the default view:
This is the datatables configuration:
$('#grid-data').DataTable({
"language": {
"emptyTable": '<i class="bi bi-table"></i><br>No Data Found',
"paginate": {
"previous": '<i class="fa fa-angle-left"></i>',
"next": '<i class="fa fa-angle-right"></i>',
},
"searchPlaceholder": 'Search',
"search": '<i class="bi bi-search"></i>',
},
'processing': true,
'serverSide': true,
'ordering': true,
'autoWidth': false,
'aLengthMenu': [[5, 10, 25, 50], [5, 10, 25, 50]],
'iDisplayLength': 5,
'ajax': {
'url': "../Master/GetList",
'type': "POST",
'data': function (data) {
//data.FilterGroup = $("#FilterGroup option:selected").val();
return data;
}
},
'columns': [
{ 'data': "roleName" },
{ 'data': "activityName" },
{
'data': "startDate",
'render': function (dt) {
return `<span>${moment(dt).format("DD/MM/YYYY")}</span>`
}
},
{
'data': "endDate",
'render': function (dt) {
return `<span>${moment(dt).format("DD/MM/YYYY")}</span>`
}
},
{
'data': null,
'render': function (dt) {
return `<i class="bi bi-pencil-square"></i>`
}
}
],
"columnDefs": [{
"targets": -1,
"visible": true,
}],
'initComplete': function (data) {
console.log(data.aoColumns)
console.log(data.aoColumns[4].sTitle)
}
});
This is the result after rendering:
See how the last column is missing? when i inspect it the last column was somehow removed from the html.
When trying to debug the cause, i find out that in the datatables data itself the column is still intact:
I've tried doing things like adding class all to the th element or setting individual width on the column but none of those worked.
What could be the cause for this?

MVC jquery datatable search from external input

I am trying to set an external input to search a jquery datatable. Please see my view code:
<link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="~/Content/DataTables/css/select.bootstrap.css" rel="stylesheet"/>
<script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
<script src="~/Scripts/DataTables/dataTables.select.min.js"></script>
<script type="text/javascript">
$(document)
.ready(function() {
var sfTable = $('#sfTable')
.dataTable({
"ajax": {
"url": "/Search/LoadData",
"type": "GET",
"datatype": "json"
},
"columns": [
{ "data": "Id", "autoWidth": true },
{ "data": "Name", "autoWidth": true },
{ "data": "Address", "autoWidth": true }
],
"searching": true,
"select": true
});
$('#searchMe')
.on('keyup',
function() {
sfTable.search(this.value).draw();
});
});
</script>
<input id="searchMe" type="text"/>
<table id="sfTable" class="table table-condensed">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
</table>
If I use the default searching in the rendered datatable it works fine, but using my custom SearchMe control doesn't search the table. My final goal is to have two datatables which are searched from a single input.

Datatables - Search Box outside datatable
This led me to the answer, and it was really simple - the var sfTable = $('#sfTable').dataTable({ code had to be a capital D on DataTable() - suddenly it works!

jquery datatable with asp.net mvc data not loading

Hi on my project i'm using jquery datatable. my question is i tried to load the table using ajax request but i failed. after several attempt please help me to get through this.
my datatable initializing was
var responsiveHelperDatatableColReorder = undefined;
$('#tbl_datasource').dataTable({
sDom: '<"top"i>rt<"bottom"flp><"clear">',
iDisplayLength: -1,
searching: false,
ordering: false,
scrollY: 300,
scrollX: true,
info: false,
paging: false,
"preDrawCallback": function () {
// Initialize the responsive datatables helper once.
if (!responsiveHelperDatatableColReorder) {
responsiveHelperDatatableColReorder = new ResponsiveDatatablesHelper($('#tbl_datasource'), {
tablet: 1024,
phone: 480
});
}
},
"rowCallback": function (nRow) {
responsiveHelperDatatableColReorder.createExpandIcon(nRow);
},
"drawCallback": function (oSettings) {
responsiveHelperDatatableColReorder.respond();
},
ajax: {
url : '../Home/DataSourceHealth',
dataType: "json"
},
columns: [
{ "data": "providerName" },
{ "data": "fileName" },
{ "data": "status" },
{ "data": "lastRunTime" },
{ "data": "avgRecords" },
{ "data": "numberOfRecordes" },
{ "data": "numberOfErrorRecords" }
]
});
i use smartadmin admin template on my view
<table id="tbl_datasource" class="table table-striped table-hover table-condensed" width="100%">
<thead>
<tr>
<th data-class="expand">Name</th>
<th data-hide="phone,tablet">Source File</th>
<th data-hide="phone">Loading status</th>
<th data-hide="phone,tablet">Last run time</th>
<th data-hide="phone,tablet">Avg. records</th>
<th data-hide="phone,tablet">No.of records</th>
<th data-hide="phone,tablet">Deviation</th>
<th data-hide="phone,tablet">Data status</th>
<th data-hide="phone,tablet">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
on my controller i returned json object in this format
[
{
"loadDetailId": 108,
"loadDetailStatusId": 7,
"providerName": "Marin",
"status": "Complete File Process",
"fileName": "SiSenseChryslerPAPCanadaByClientAccount_03042015_bk8heq3q70.csv",
"numberOfRecordes": 633,
"avgRecords": 633.00,
"numberOfErrorRecords": 3,
"lastRunTime": "2015-03-10T15:01:40.14"
},
{
"loadDetailId": 109,
"loadDetailStatusId": 7,
"providerName": "Marin",
"status": "Complete File Process",
"fileName": "SiSenseCPAPDisplayCampaigns_03042015_nqh8w254o2.csv",
"numberOfRecordes": 100003,
"avgRecords": 100001.00,
"numberOfErrorRecords": 3,
"lastRunTime": "2015-03-10T15:01:42.283"
}
]
what was i missed when configuring jquery datatable?
updated
i have found the initial problem it was data structure should be like this
{
"data": [
{
"loadDetailId": 108,
"loadDetailStatusId": 7,
"providerName": "Marin",
"status": "Complete File Process",
"fileName": "SiSenseChryslerPAPCanadaByClientAccount_03042015_bk8heq3q70.csv",
"numberOfRecordes": 633,
"avgRecords": 633.00,
"numberOfErrorRecords": 3,
"lastRunTime": "2015-03-10T15:01:40.14"
},
{
"loadDetailId": 109,
"loadDetailStatusId": 7,
"providerName": "Marin",
"status": "Complete File Process",
"fileName": "SiSenseCPAPDisplayCampaigns_03042015_nqh8w254o2.csv",
"numberOfRecordes": 100003,
"avgRecords": 100001.00,
"numberOfErrorRecords": 3,
"lastRunTime": "2015-03-10T15:01:42.283"
}
]
}
but still having issue here is the firebug screenshot
thanks

You have a couple of things that could be going wrong here. First, if your returned JSON is not named data then you have to change your datatables initialization to add datasrc = "" property to it like so:
ajax: {
url : '../Home/DataSourceHealth',
dataType: "json",
dataSrc: ""
}
This makes datatables read in array of objects like the one that is returned in your case. Otherwise it looks for an object named data which when it doesn't find one, it assumes there is no data. Here is the documentation for this: https://datatables.net/reference/option/ajax.dataSrc
Second problem with your datatables is that you have more headers than the data that you're reading in through your columns:
9 headers:
<thead>
<tr>
<th data-class="expand">Name</th>
<th data-hide="phone,tablet">Source File</th>
<th data-hide="phone">Loading status</th>
<th data-hide="phone,tablet">Last run time</th>
<th data-hide="phone,tablet">Avg. records</th>
<th data-hide="phone,tablet">No.of records</th>
<th data-hide="phone,tablet">Deviation</th>
<th data-hide="phone,tablet">Data status</th>
<th data-hide="phone,tablet">Action</th>
</tr>
</thead>
7 data columns defined:
columns: [
{ "data": "providerName" },
{ "data": "fileName" },
{ "data": "status" },
{ "data": "lastRunTime" },
{ "data": "avgRecords" },
{ "data": "numberOfRecordes" },
{ "data": "numberOfErrorRecords" }
]
The number of headers and data columns needs to be exactly the same or it will not work.

try to debug with chrome or IE and look what error you get for your request.
Also try this
ajax: {
url : '/Home/DataSourceHealth',
dataType: "json"
},

Child row are not creating in datatables?

I am trying to creating child rows in datatables by using json data. Some reason table and child rows are creating with data. So i don't understand the proble is.
<div class="container">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
Javascript
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Full name:</td>'+
'<td>'+d.name+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extension number:</td>'+
'<td>'+d.extn+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extra info:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var data ={
"data": [ {
"name": "Michael Bruce",
"position": "Javascript Developer",
"salary": "$183,000",
"start_date": "2011/06/27",
"office": "Singapore",
"extn": "5384"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"salary": "$112,000",
"start_date": "2011/01/25",
"office": "New York",
"extn": "4226"
}
]
};
var table = $('#example').DataTable( {
"data":data,
"columns": [
{
"class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "salary" }
],
"order": [[1, 'asc']]
} );
// Add event listener for opening and closing details
$('#example 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');
}
} );
} );
Here is the datatables live for my code.

Your data variable is an object. it needs to be an array:
var data =
[
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
....
];
vs
var data =
{ // remove
"data": // remove
[
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
....
]}; // remove closing curly bracket
example: http://live.datatables.net/waburuz/10/edit

Error in binding json data from Ajax source in jquery data tables

I am getting error in binding JSON data to constuct a data table.
My JSON is of the following:
[
{
"ID": 1,
"Number": "2",
"Name": "Avinash"
},
{
"ID":2,
"Number":"21",
"Name":"XYZ"
},
{
"ID": 3,
"Number": "20",
"Name": "KRR"
}
]
I am binding this to jquery datatable as below:
$(document).ready(function () {
$('#table_id').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": '<%:Url.Action("LoadData","Home")%>'
});
$('#table_id').css("width", "100%")
});
My Table Structure is as follows:
<table id="table_id" border="0" class="display" cellpadding="1" cellspacing="1" align="center">
<thead>
<tr>
<th>ID</th>
<th>Number</th>
<th>Name</th>
</tr>
</thead>
</table>
I am getting error as follows:
Datatables Warning(tableid="table_id"):Requested Unknown Parameter'0' from the datasource for row 0
My Controller is as follows:
public ActionResult LoadData()
{
var Data = new DataTable();
Data=DataModel.LoadData();
var JsonData = JsonConvert.SerializeObject(Data, Formatting.None);
return Json(new
{
aaData = JsonData
}, JsonRequestBehavior.AllowGet);
}
Please help..