DataTables with Child rows (show extra / detailed information) & Individual column filtering

paragpatil

Hi,

I am using DataTables with Child Rows & Individual column filtering. Child row (extra information) was working fine and then I have added column filtering. Now column filtering is working fine but Child row is not working correctly.

Below is my javascript code,

$(document).ready(function () { var oTable; $('#abctable tbody td img').click(function () { var nTr = this.parentNode.parentNode; if (this.src.match('details_close')) { /* This row is already open - close it */ this.src = "../../Content/Images/details_open.png"; oTable.fnClose(nTr); } else { /* Open this row */ this.src = "../../Content/Images/details_close.png"; var Id = $(this).attr("rel"); var url = $("#abctable").data('url') $.get(url + "?Id=" + Id, function (lstItems) { oTable.fnOpen(nTr, lstItems, 'details'); }); } }); $('#abctable tfoot th').each(function () { if ($(this).index()!=0) { var title = $('#abctable thead th').eq($(this).index()).text(); $(this).html(''); } }); /* Initialize table and make first column non-sortable*/ oTable = $('#abctable').DataTable({ "bJQueryUI": true, "aoColumns": [ { "bSortable": false, "bSearchable": false }, null, null, null ], "initComplete": function () { var r = $('#abctable tfoot tr'); r.find('th').each(function () { $(this).css('padding', 8); }); $('#abctable thead').append(r); $('#search_0').css('text-align', 'center'); } }); oTable.columns().eq(0).each(function (colIdx) { $('input', oTable.column(colIdx).footer()).on('keyup change', function () { oTable .column(colIdx) .search(this.value) .draw(); }); }); });

I am getting error at line " oTable.fnOpen(nTr, lstItems, 'details'); "Undefined is not a function."

I am using MVC. And i have checked Layout page is using JQuery 2.1 version.

paragpatil

Why the formatting is not coming properly. :)

paragpatil

I have found the issue,

If I initialize my table like
oTable = $('#abctable').DataTable({......
then Individual column filters are working fine but Child row didnt work.
but if I replace it with
oTable = $('#abctable').dataTable({...... then Child row with extra detail work fine but Individual Column filter is not working.

I am using Datatable's 1.10 version.
Have anyone faced such issue with dataTable & DataTable? Whats the solution.