DataTables not working into a ModalBox layer.

telly

Hi, I need help to find out, why I won't get my DataTables to work after I moved it into a ModalBox layer?

Data souce is Server-side processing.

I finded that the way to work it that by　set Initialisation code into a ModalBox new layer souce,but it's the right way to do it?

Can someone tell me the way more simple way.

Sorry for my broken English.This from Japan.

allan

Yes that sounds like it should work. If it doesn't work, please link us to a test case showing the problem.

Allan

telly

I need help another thing. when I tried to add new row the detatables of main layer with fnAddData(), a new default?? feature elements appear below the existing feature elements after closed modalbox. It increase once by fnAddData() whenever modalbox close.

telly

Thank you,allan.
This is my poor code.
Could you teach me the right way.

I use DataTables-v1.9.0.
DataSouce of Modalboxlayer is server side processing.
This code include header area of modalbox source too.
I tried to run function test() for initializing modalbox layer, using modalbox callback option. It's because not work datatables on modalboxlayer.
Datatables work in this.but There is some point to correct.
but I deal to be settled ploblem of that fnAddData() make new feature elements.

[code]


function fnFilterGlobal ()
{
\$('#example').dataTable().fnFilter(
\$("#global_filter").val(),
null,
\$("#global_regex")[0].checked,
\$("#global_smart")[0].checked
);
}
function fnFilterColumn ( i )
{
\$('#example').dataTable().fnFilter(
\$("#col"+(i+1)+"_filter").val(),
i,
\$("#col"+(i+1)+"_regex")[0].checked,
\$("#col"+(i+1)+"_smart")[0].checked
);
}
(function(\$){\$(document).ready(function()
{
\$('#example').dataTable( {
"sPaginationType": "full_numbers",

"iDisplayLength": -1, /* modify jquery.dataTables.js line8663*/

"aLengthMenu": [[-1,25, 50, 100], ["All",25, 50, 100]],
/*Pager setting modify jquery.dataTables.js line7622

"bStateSave": true, /*use cookie on*/

"oLanguage":{ "sLengthMenu": "表示行数 _MENU_ 行 / ページ",
"sZeroRecords": "明細なし",
"sInfo": "合計 _TOTAL_ 明細中 _START_ 行から _END_ 行目までを表示中",
"sInfoEmpty": "Showing 0 to 0 of 0 records",
"sInfoFiltered": "(合計 _MAX_ 明細からの抽出結果)",
"oPaginate": {
"sFirst": "先頭",
"sPrevious": "前",
"sNext": "次",
"sLast": "最終"
},
"sSearch": "検索:"

},/*japanese language setting*/

} );


/* Add/remove class to a row when clicked on */
\$('#example tr').click( function() {
\$(this).toggleClass('row_selected');
} );

/* Init the table */
var oTable = \$('#example').dataTable( );

}/*end --function(\$){\$(document).ready(function()*/

/* Global var for counter */
var giCount = 1;

function fnClickAddRow(rcd,num_row) {

var num = giCount;

\$('#example').dataTable().fnAddData( [

num_row + "col1",
"col2
] );

giCount++;

}/*end --function fnClickAddRow(rcd,num_row)*/

function fnGetSelected( oTableLocal ){

return oTableLocal.\$('tr.row_selected');

}

function test(){

\$('#example').dataTable( {
"sPaginationType": "full_numbers",

"iDisplayLength": -1, /* modify jquery.dataTables.js line8663*/

"aLengthMenu": [[-1,25, 50, 100], ["All",25, 50, 100]],
/*Pager setting modify jquery.dataTables.js line7622

"bStateSave": true, /*use cookie on*/

"oLanguage":{ "sLengthMenu": "表示行数 _MENU_ 行 / ページ",
"sZeroRecords": "明細なし",
"sInfo": "合計 _TOTAL_ 明細中 _START_ 行から _END_ 行目までを表示中",
"sInfoEmpty": "Showing 0 to 0 of 0 records",
"sInfoFiltered": "(合計 _MAX_ 明細からの抽出結果)",
"oPaginate": {
"sFirst": "先頭",
"sPrevious": "前",
"sNext": "次",
"sLast": "最終"
},
"sSearch": "検索:"

},/*japanese language setting*/

} );

/* Init the table */
var oTable = \$('#example').dataTable( );

}


[/code]