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

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 <tfoot> 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.