Inline editing with javascript source

Inline editing with javascript source

iatemykindleiatemykindle Posts: 2Questions: 1Answers: 0

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();
                });

Answers

Sign In or Register to comment.