Using multiple Datatables and Editor from one JS on one page, each Datatable is on a tab.

veydecapia

Hello!

I'm newbie in using Javascript and Jquery. I can't seem to figure out how will I be able to combine multiple datatables and editor in using only one js?

Basically I want to have only one js to link into my html page. Currently I have two datatables and editor.
I have already tried this JS code:

[code]

/*
* Editor client script for DB table announcement
* Automatically generated by http://editor.datatables.net/generator
*/

(function($){
var editor_1;
var editor_2;


$(document).ready(function() {
// Configure the envelope display to attach to the header and not scroll the window
var envelopeConf = $.fn.dataTable.Editor.display.envelope.conf;
envelopeConf.attach = 'head';
envelopeConf.windowScroll = false;

editor_1 = new $.fn.dataTable.Editor( {
"ajaxUrl": "php/table.announcement.php",
"domTable": "#announcement",
"fields": [
{
"label": "Subject",
"name": "subject",
"type": "text"
},
{
"label": "By",
"name": "name",
"type": "text"
},
{
"label": "Announcement",
"name": "text",
"type": "textarea"
}
]
} );

$('#announcement').dataTable( {
"bJQueryUI": true,
"bProcessing": true,
"sDom": 'T<"clear"><"H"lfr>t<"F"ip>',
//"sDom": '<"top"i>rt<"bottom"flp<"clear">'
//"sDom": '<"H"Tfr>t<"F"ip>',
//"sDom": 'T<"clear">lfrtip',


"sAjaxSource": "php/table.announcement.php",
"aoColumns": [
{
"mData": "id"
},
{
"mData": "subject"
},
{
"mData": "name"
},
{
"mData": "dateTimePosted"
}
],
"oTableTools": {
"sRowSelect": "multi",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor_1 },
{ "sExtends": "editor_edit", "editor": editor_1 },
{ "sExtends": "editor_remove", "editor": editor_1 }
]
}
} );


editor_2 = new $.fn.dataTable.Editor( {
"ajaxUrl": "php/table.subjects.php",
"domTable": "#subjects",
"fields": [
{
"label": "Course Code",
"name": "courseCode",
"type": "text"
},
{
"label": "Subject Name",
"name": "name",
"type": "text"
},
{
"label": "Lec",
"name": "lec",
"default": "1.00",
"type": "select",
"ipOpts": [
{
"label": "1.00 ",
"value": "1.00 "
},
{
"label": " 2.00 ",
"value": " 2.00 "
},
{
"label": " 3.00 ",
"value": " 3.00 "
},
{
"label": " 4.00 ",
"value": " 4.00 "
},
{
"label": " 5.00",
"value": " 5.00"
}
]
},
{
"label": "Lab",
"name": "lab",
"default": "1.oo",
"type": "select",
"ipOpts": [
{
"label": "1.00 ",
"value": "1.00 "
},
{
"label": " 2.00 ",
"value": " 2.00 "
},
{
"label": " 3.00 ",
"value": " 3.00 "
},
{
"label": " 4.00 ",
"value": " 4.00 "
},
{
"label": " 5.00",
"value": " 5.00"
}
]
}
]
} );

$('#subjects').dataTable( {
"bJQueryUI": true,
"bProcessing": true,
"sDom": 'T<"clear"><"H"lfr>t<"F"ip>',
//"sDom": '<"top"i>rt<"bottom"flp<"clear">'
//"sDom": '<"H"Tfr>t<"F"ip>',
//"sDom": 'T<"clear">lfrtip',


"sAjaxSource": "php/table.subjects.php",
"aoColumns": [
{
"mData": "id"
},
{
"mData": "courseCode"
},
{
"mData": "name"
},
{
"mData": "lec"
},
{
"mData": "lab"
}
],
"oTableTools": {
"sRowSelect": "multi",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor_2 },
{ "sExtends": "editor_edit", "editor": editor_2 },
{ "sExtends": "editor_remove", "editor": editor_2 }
]
}
} );



$("#tabs").tabs( {
"show": function(event, ui) {
var table = $.fn.dataTable.fnTables(true);
if ( table.length > 0 ) {
$(table).dataTable().fnAdjustColumnSizing();
}
}
} );


$('table.display').dataTable( {
"sDom": 'T<"clear">lfrtip',
"sScrollY": "200px",
"bScrollCollapse": true,
"bPaginate": true,
"bJQueryUI": true,
"aoColumnDefs": [
{ "sWidth": "10%", "aTargets": [ -1 ] }
]
} );


$('.dataTable').dataTable();
} );

}(jQuery));


[/code]

This is my test site to show you what happens.
http://live.datatables.net/evahim/5/edit


This code ain't working, Am I missing something? Please help me. Thanks in advance!

tangerine

You must be missing the 47 javascript warnings your test site shows.