Inline editing with javascript source

iatemykindle

Hi,

I'm new to datatables so excuse me if this is a newbie question.

I'm trying to combine inline editing (https://editor.datatables.net/examples/inline-editing/simple) with javascript source data (https://datatables.net/examples/data_sources/js_array), but I can't get it to seem to work.

In initializing editor, do I also need to have a data attribute that points to the table data? What should the columns be referred to as? In the inline example, they are called "data" and in the javascript source example they are called "title." Title will work to show a table, but I can't edit it and data just doesn't work.

When I use title and try to click to edit I get the error:

Uncaught Unable to automatically determine field from source. Please specify the field name. For more information, please refer to https://datatables.net/tn/11

                var editor;
                function genTableData(input) {          
                    var rows = input.split("\n");

                    row_data = []

                    for(var y in rows) {
                        var cells = rows[y].split("\t");
                        var row = [];
                        for(var x in cells) {
                            row.push(cells[x]);
                        }
                        row_data.push(row);
                    }
                    return(row_data);
                }


                var yourElement = document.getElementById("excel_data");
                var editor;

                yourElement.addEventListener('paste', function(event) {                 
                    clipboardData = event.clipboardData || window.clipboardData;                
                    pastedData = clipboardData.getData('Text');
                    table_data = genTableData(pastedData);  

                    editor = new $.fn.dataTable.Editor( {                   
                        table: "#example",
                        data: table_data,
                        fields: [ {
                                label: "Item:",
                                name: "item"
                            }, {
                                label: "Date 1:",
                                name: "date1"
                            }, {
                                label: "Date 2:",
                                name: "date2"
                            }
                        ]
                    } );

                    // Activate an inline edit on click of a table cell
                    $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
                        editor.inline( this );
                    } );

                    $('#example').DataTable( {
                        dom: "Bfrtip",                  
                        order: [[ 1, 'asc' ]],
                        data: table_data,
                        columns: [                      
                            { title: "item"},
                            { title: "date1"},
                            { title: "date2"},
                        ],
                        select: {
                            style:    'os',
                            selector: 'td:first-child'
                        },
                        buttons: [
                            { extend: "create", editor: editor },
                            { extend: "edit",   editor: editor },
                            { extend: "remove", editor: editor }
                        ]
                    } );
                    event.preventDefault();
                });

kthorngren

See this thread about using arrays with Editor.

Kevin

iatemykindle

Thank you! Exactly what I was looking for.