Editor datasource from a Javascript variable

Editor datasource from a Javascript variable

dbrody2004dbrody2004 Posts: 7Questions: 3Answers: 0

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

Answers

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    edited May 2020
  • dbrody2004dbrody2004 Posts: 7Questions: 3Answers: 0
    edited May 2020

    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.

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

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

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    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

  • dbrody2004dbrody2004 Posts: 7Questions: 3Answers: 0

    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.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

This discussion has been closed.