Editor datasource from a Javascript variable

dbrody2004

Couldn't find an example using a Javascript array as a datasource for Editor? Is this possible or is DOM and ajax only supported?

rf1234

https://datatables.net/manual/data/#Javascript

https://datatables.net/examples/data_sources/js_array.html

Should work with Editor as well.

More on Javascript and the standalone Editor:
https://editor.datatables.net/manual/standalone#Setting-values

dbrody2004

Tried with the following code but there is no data in the table and there are no buttons either.

    <table id="scheduleTable_550" class="scheduleTable table datatable-basic3 table-striped">
            <thead>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            </thead>
            <tbody></tbody>
    </table>

<script type="text/javascript">
var dataSet = [
[ "2","a49139eb78c923cf","1","Calendar","09:00:00","10:00:00","MT"],[ "3","a49139eb78c923cf","1","Calendar","11:00:00","12:00:00","RF"],];
</script>

$(document).ready(function () {
$('.scheduleTable').each(function () {
    var $table = $(this);
    var editor = new $.fn.dataTable.Editor( {
        table: '#'+ $table.attr("id"),
        data: dataSet,
        fields: [ {
                label: "App:",
                name: "app"
            }, {
                label: "Block start time:",
                name: "blockstarttime"
            }, {
                label: "Block end time:",
                name: "blockendtime"
            }
        ]
    } );

$('#'+ $table.attr("id")).DataTable({
    dom: 'Bfrtip',
    responsive: false,
        autoWidth: true,
        paging: false,
    searching: false,
    bInfo:false,
    bSort:false,
    buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit',   editor: editor },
            { extend: 'remove', editor: editor }
        ],
    select: true,
    columns: [
            { visible:false },
            { visible:false },
            { visible:false },
            { visible:false, title: "App",
            data:"app",
        render: function (data, type, full, meta) {
            return data;
        },
         },
            { title: "Block start time",
                data:"blockstarttime",
        render: function (data, type, full, meta) {
                        return data;
                },
         },
            { title: "Block end time",
                data:"blockendime",
                render: function (data, type, full, meta) {
                        return data;
         },
         },
            { title: "Mon" }
    ]
    });
});
});
</script>

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

rf1234

you need to use markdown because your code is illegible this way. Please post a test case as well as per the forum rules.

allan

There is no data property for Editor - I think you meant to put that into DataTables which does have a data option.

When you do that it sort of semi-works: http://live.datatables.net/xekakode/1/edit .

The problem now is that you have your data source as arrays, but you are telling DataTables and Editor to expect an object by using columns.data and fields.name as strings. See the manual for more information about the difference between the two (generally I suggest using objects).

Allan

dbrody2004

Thanks. That helped and now it is working: http://live.datatables.net/dacedili/1/edit

After editing values in the table is the only way to get the dataset is to use the API and iterate through the rows? The editor does not modify the original javascript data object. The idea here is that the form would have a Save button which went clicked would push a json data array back to the server consisting of the whole modified table.

colin

To get the data for all the table, you could just do rows().data().toArray() - possibly with a JSON.stringify(),

Colin