Integrating the editor into my existing tables

Integrating the editor into my existing tables

chrisjameschrisjames Posts: 4Questions: 0Answers: 0
edited July 2012 in Editor
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.

Replies

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    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
  • chrisjameschrisjames Posts: 4Questions: 0Answers: 0
    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?
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    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
This discussion has been closed.