Specifying the Field Name

Drum998

Hi,

I'm very new to using DataTables, so please bear with me if I'm asking dumb questions. I have searched around, but, although I found some similar, I can't find an answer to my specific issue.

I am using Node.JS and Express to generate my HTML page and rendering them using Jade. I can implement basic datable functions on the resulting HTML tables, but I am getting errors when I try to implement any Editor functions (currently using the free trial version of Editor while I assess whether it is suitable for our needs). I am getting the error:

Uncaught Unable to automatically determine field from source. Please specify the field name.

I have read the suggested page referred to in the error message as well as a number of answers on this forum about the same problem and I understand the need for suitable identifying information in incoming data, but I am unsure where to get this from or how to attach it to the HTML table.

My code is as follows:

Editor

            var editor = new $.fn.dataTable.Editor({
                ajax:'/edit',
                table:'#event_table',
                fields:[
                    {label:'Event', name:'event',type:'textarea'},
                    {label:'Date', name:'date',type:'textarea'},
                    {label:'Venue', name:'venue',type:'textarea'},
                    {label:'Total',name:'total'},
                    {label:'Allocated',name:'allocated'},
                    {label:'Paid',name:'paid'}
                ]
            });

DataTable

            $('#event_table').DataTable({
                stateSave: true,
                "order": [[ 1, "asc" ]],
                "aoColumns": [
                    null,
                    null,
                    null,
                    { "bSearchable": false, "bSortable": false },
                    { "bSearchable": false, "bSortable": false },
                    { "bSearchable": false, "bSortable": false }
                ],
                columns: [
                    { data: "event", className: "editable", name:'event'},
                    { data: "date", className: "editable", name:'date'},
                    { data: "venue", className: "editable", name:'venue'},
                    {data:"total"},
                    {data:"allocated"},
                    {data:"paid"}
                ]
            });

Editor call

            $('#event_table').on( 'click', 'tbody td.editable', function (e) {
                console.log("click detected - " + this);
                editor.inline( this );
            });

The HTML table is just a bog standard table with the .editable class added to the cells I wish to be able to edit.

Here is a sample of the JSON data from which the table is built:

[{
    "events":[
        {
            "_id":"57e0ecf27ab17ea8ccb4f996",
            "id_":1,
            "event":"Graduation (BA)",
            "date":"23/09/2016",
            "time":"09:00",
            "venue":"Manchester Apollo",
            "tickets":1200,
            "allocated":800,
            "paid":650
        },
        {
            "_id":"57e0ed117ab17ea8ccb4f997",
            "id_":2,
            "event":"Graduation (BA)",
            "date":"25/09/2016",
            "time":"09:00",
            "venue":"Wembley Arena",
            "tickets":1200,
            "allocated":800,
            "paid":650
        },
        {
            "_id":"57e0ed2a7ab17ea8ccb4f998",
            "id_":3,
            "event":"Graduation (MA)",
            "date":"25/09/2016",
            "time":"15:00",
            "venue":"Wembley Conference Centre",
            "tickets":1200,
            "allocated":800,
            "paid":650
        }
    ]
}]

I expect that I'm overlooking something obvious, but I've been trying unsuccessfully to get this working for half a day now and I don't seem to be any further forward.

Please help!

Thanks

allan

You need to use the editField property for the columns (columns.editField) rather than columns.name as above (which is only used for selectors, which you don't appear to be using above).

I think just changing to using columns.editField will fix it.

Regards,
Allan

Drum998

I can see how that should work, but I'm actually still getting the same error as previously. The DataTable definition now looks like this:

DataTable

            $('#event_table').DataTable({
                stateSave: true,
                "order": [[ 1, "asc" ]],
                "aoColumns": [
                    null,
                    null,
                    null,
                    { "bSearchable": false, "bSortable": false },
                    { "bSearchable": false, "bSortable": false },
                    { "bSearchable": false, "bSortable": false }
                ],
                columns: [
                    { data: "event", className: "editable", editField:'event'},
                    { data: "date", className: "editable", editField:'date'},
                    { data: "venue", className: "editable", editField:'venue'},
                    {data:"total"},
                    {data:"allocated"},
                    {data:"paid"}
                ]
            });

The editField values match the relevant field.name values in the Editor definition.,

allan

Don't define both aoColumns and columns in the same object - that's going to lead to issues (aoColumns will "win" and columns will be ignored).

The reason for that is aoColumns is legacy (it isn't documented in the reference). That was the old Hungarian notation name for what is now columns and for backwards compatibility both have to be supported, but they are aliases, so one will write over the other.

Use:

$('#event_table').DataTable({
    stateSave: true,
    order: [[ 1, "asc" ]],
    columns: [
        { data: "event", className: "editable", editField:'event'},
        { data: "date", className: "editable", editField:'date'},
        { data: "venue", className: "editable", editField:'venue'},
        { data: "total", "searchable": false, "sortable": false },
        { data: "allocated", "searchable": false, "sortable": false },
        { data: "paid", "searchable": false, "sortable": false }
    ]
});

If that doesn't work (it should!) can you link to the page please.

Thanks,
Allan

Drum998

Excellent, that works a treat, thanks!