Why are my fields behaving strangly with multiple table in same view?

CloudyKoper

Hi, I’m sing three jquery datatables in the same view of mt asp.net- mvc application. When my user clicks on an option in the first table the second table appears. Clicking on an option in the second table makes the third table appear.



My problem happens when I try to use the filter fields that are in the element of the first table when the other tables are not loaded. I get this error message.



Microsoft JScript runtime error: Unable to get value of the property 'oApi': object is null or undefined.



Upon checking the jquery.dataTable.columFilter.js file I found the problem here:

function _fnColumnIndex(iColumnIndex) {

if (properties.bUseColVis)

return iColumnIndex;

else

return oTable.fnSettings().oApi._fnVisibleToColumnIndex(oTable.fnSettings(), iColumnIndex);

//return iColumnIndex;

//return





It seems the problem is with this line:

return oTable.fnSettings().oApi._fnVisibleToColumnIndex(oTable.fnSettings(), iColumnIndex);





If the other tables are loaded I can use the filter fields on the first table but only if the other tables are loaded too.



Any ideas how I can solve this problem.

allan

I don't know much about the column filtering plugin - I'd suggest opening an issue on that project's tracker - but the basic code looks like it should work okay. Are you initialising your tables with a single selector or individually. I'm not sure what column filtering plug-in will make of doing them all together.

Allan

CloudyKoper

Here's what my view looks like.








$(document).ready(function () {
$(".datefield").datepicker();

$("#table1").dataTable().focus().columnFilter().scrollTop();
$("#table2").dataTable().focus().columnFilter().scrollTop();
$("#table3").dataTable().focus().columnFilter().scrollTop();
});







Select



Name


Office


Courses


Edit Detail







Select



Name



Office


Courses


Edit Detail






…body goes here
…then another table like the one above
…and finally a third table