Local table editing - Edit not working

MichaelGross

Hello,
i try to work with Local table editing, without ajax.
My Table:

<table id="mvl" class="table table-bordered table-responsive table-hover">
            <thead>
                <tr>
                            <th>Hinweise</th>
                            <th>Make</th>
                            <th>Model</th>
                            <th>Platform</th>
                            <th>Type</th>
                            <th>Production Period</th>
                            <th>Engine</th>
                </tr>
            </thead>
            <tbody>
                    <tr id="row_1">
                            <td></td>
                            <td>VW</td>
                            <td>Transporter III Bus</td>
                            <td>--</td>
                            <td>1.6 TD</td>
                            <td>1984/08-1992/07</td>
                            <td>1589 ccm, 51 KW, 70 PS</td>
                    </tr>
                    <tr id="row_2">
                            <td></td>
                            <td>VW</td>
                            <td>Transporter III Kasten</td>
                            <td>--</td>
                            <td>1.6 TD</td>
                            <td>1984/10-1992/07</td>
                            <td>1589 ccm, 51 KW, 69 PS</td>
                    </tr>
                    <tr id="row_3">
                            <td></td>
                            <td>VW</td>
                            <td>Transporter III Pritsche/Fahrgestell</td>
                            <td>--</td>
                            <td>1.6 TD</td>
                            <td>1984/10-1992/07</td>
                            <td>1589 ccm, 51 KW, 70 PS</td>
                    </tr>
                    <tr id="row_4">
                            <td></td>
                            <td>VW</td>
                            <td>Transporter III Pritsche/Fahrgestell</td>
                            <td>--</td>
                            <td>1.6 TD Syncro</td>
                            <td>1986/03-1992/07</td>
                            <td>1589 ccm, 51 KW, 69 PS</td>
                    </tr>
            </tbody>
        </table>

included JS Files:

<script src="/Scripts/jquery-3.2.1.js"></script>   
<script src="/Scripts/plugins/dataTables/datatables.min.js"></script>
<script src="/Scripts/plugins/dataTables/dataTables.responsive.min.js"></script>
<link href="/Content/plugins/dataTables/datatables.min.css" rel="stylesheet"/>
<link href="/Content/plugins/dataTables/responsive.bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="/Scripts/dataTables.editor.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.4/js/dataTables.select.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/select/1.2.4/css/select.dataTables.min.css" rel="stylesheet" />
<link href="/Content/editor.dataTables.min.css" rel="stylesheet" />

and my JS Code

<script type="text/javascript">
    var editor;

    $(document).ready(function () {
        editor = new $.fn.dataTable.Editor({
            table: "#mvl",
            fields: [{
                label: "Einschränkungen:",
                name: "Hinweise"
            },
            ]
        });

        $('#mvl').DataTable({
            "language": {
                "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"
            },
            pageLength: 100,
            dom: 'Bfrtip',
            select: true,
            buttons: [
                { extend: 'remove', editor: editor },
                { extend: 'edit', editor: editor },
            ]
        });
    });
</script>

I want edit only first column, Is not working. No error message in console. Delete Button work fine.
Any Help for me ?

Thanks
Michael

allan

Hi Michael,

I think the issue here is that there is a difference in the data objects that Editor and DataTables are working with in that configuration. Without using columns.data, DataTables will read an HTML table into an array.

However, using fields.name tells Editor to look for an object property of that name.

So two options:

1. Change fields.name to be 0 in this case (since you want to edit column index 0).
2. Use columns.data to read the data from the HTML into an object.

See also this section of the manual for more information on this topic.

Allan

MichaelGross

Hello Allan,
thanks for answer. Option 1 help a little, when i Post the Table Data back to Server then the data from before be edit rows is diferent I resolve with fill the table with JSON Data FIle when open the site. Thats Working.

Michael