Integrating the editor into my existing tables

chrisjames

Hi

I am tryng to integrate the editor into my existing tables but get undefinded in all edit fields (in the pop up).

The only difference I can see between what I have and the generator download is the aoColumns setting.

This is what I currently have:

[code]"aoColumns": [
{ "sTitle": "id" },
{ "sTitle": "Name" },
{ "sTitle": "Surname" },
{ "sTitle": "Email" }[/code]

but the editor code has:
[code]"aoColumns": [
{ "mDataProp": "id" },
{ "mDataProp": "Name" },
{ "mDataProp": "Surname" },
{ "mDataProp": "Email" }[/code]

when I change "sTitle" to "mDataProp" my table no longer loads.

I'm clearly going the wrong way about this... Any direction on this would be very much appreciated.

allan

In Editor the hungarian notation has been dropped, so there is no aoColumns or mDataProp. What you probably want is something like that used in this example: http://editor.datatables.net/release/DataTables/extras/Editor/examples/index.html (i.e. 'fields' and 'name').

Regards,
Allan

chrisjames

Sorry.. i'm still confussed

Here is my full code:

[code]

function fnShowHide( iCol ){
/* Get the DataTables object again - this is not a recreation, just a get of the object */
var oTable = jQuery('#example').dataTable();

var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
oTable.fnSetColumnVis( iCol, bVis ? false : true );
}

(function($){

$(document).ready(function() {

var aDataSet = [
// This is data printed via a php loop
];
var editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "php/table.wp_newsletter.php",
"domTable": "#example",
"fields": [
{
"label": "First Name",
"name": "name",
"type": "text"
},
{
"label": "Last Name",
"name": "surname",
"type": "text"
},
{
"label": "Email Address",
"name": "email",
"type": "text"
}
]
} );
var oTable;
var oTable = $('#example').dataTable( {
"sDom": '<"postbox full"><"clear"><"postbox full"><"clear"><"postbox full"><"clear"><"postbox full">ip',
"oColumnFilterWidgets": {
"aiExclude": [ 0,1,2,3,6,7,9 ],
},
"iDisplayLength": 50,
"sPaginationType": "full_numbers",
"bSortClasses": false,
"aaData": aDataSet,
"oLanguage": {
"sSearch": "Search all columns:"
},
"oTableTools": {
"sSwfPath": "swf/copy_csv_xls_pdf.swf",
"sRowSelect": "multi",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor },
{ "sExtends": "editor_edit", "editor": editor },
{ "sExtends": "editor_remove", "editor": editor }
]
},
"aoColumns": [
{ "sTitle": "id" },
{ "sTitle": "Name" },
{ "sTitle": "Surname" },
{ "sTitle": "Email" },
{
"sTitle": "Admin",
"sClass": "center",
"sDefaultContent": 'Edit / Delete'
}
],
} );

oTable.fnSetColumnVis( 7, false );
oTable.fnSetColumnVis( 8, false );
oTable.fnSetColumnVis( 9, false );

// New record
$('a.editor_create').on('click', function (e) {
e.preventDefault();

editor.create(
'Create new record',
{ "label": "Add", "fn": function () { editor.submit() } }
);
} );

// Edit record
$('#example').on('click', 'a.editor_edit', function (e) {
e.preventDefault();

editor.edit(
$(this).parents('tr')[0],
'Edit record',
{ "label": "Update", "fn": function () { editor.submit() } }
);
} );

// Delete a record (without asking a user for confirmation)
$('#example').on('click', 'a.editor_remove', function (e) {
e.preventDefault();

editor.remove( $(this).parents('tr')[0], '123', false, false );
editor.submit();
} );

var asInitVals = new Array();

$("#filter input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("#filter input").index(this)+1 );
//console.log($("#filter input").index(this)+1);
} );
/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("#filter input").each( function (i) {
asInitVals[i] = this.value;
} );

$("#filter input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );

$("#filter input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("#filter input").index(this)];
}
} );

} );

}(jQuery));



[/code]

Can you see what the issue is?

allan

Ah okay - so you aren't Ajax loading the data from the server? So the data held by the DataTable is in an array, and you need to tell Editor that using the name option. For example:

[code]
editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "php/browsers_array.php",
"domTable": "#example",
"fields": [ {
"label": "Browser:",
"name": 0
}, {
"label": "Rendering engine:",
"name": 1
}, {
"label": "Platform:",
"name": 2
}, {
"label": "Version:",
"name": 3
}, {
"label": "CSS grade:",
"name": 4
}
]
} );
[/code]

By default in Editor if dbField isn't specified, then 'name' is used instead, but if you want to submit the values with names other than 0-4, then you could use dbField :-).

Allan