Inline Editing Doesn't Save

Morpheine

Hey guys,

I'm currently building a table which takes data in from a JSON file. I've got inline editing working partially (I can click and modify/enter values into a cell) however, it doesn't update the value upon hitting enter. I think I'm probably just missing part of the puzzle, but I really need the JSON file to update. Any assistance you could provide in pointing me in the right direction would be greatly appreciated! (Note: I have a PHP file, a JS file, and a JSON file, but I'm not sure if I need a backend post for this?)

srTableEdit.js

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "../OpsKPI/data/srData.json",
        table: "#example",
        formOptions:{
            inline:{
                submit: 'allIfChanged'
            }
        },
        idSrc : 0,
        fields: [
            {"label": "", "name": "0"},{"label": "AVG", "name": "1"},
            {"label": "WK1", "name": "2"},{"label": "WK2", "name": "3"},{"label": "WK3", "name": "4"},{"label": "WK4", "name": "5"},{"label": "WK5", "name": "6"},{"label": "WK6", "name": "7"},{"label": "WK7", "name": "8"},{"label": "WK8", "name": "9"},{"label": "WK9", "name": "10"},{"label": "WK10", "name": "11"},{"label": "WK11", "name": "12"},{"label": "WK12", "name": "13"},{"label": "WK13", "name": "14"},{"label": "WK14", "name": "15"},{"label": "WK15", "name": "16"},{"label": "WK16", "name": "17"},{"label": "WK17", "name": "18"},{"label": "WK18", "name": "19"},{"label": "WK19", "name": "20"},{"label": "WK20", "name": "21"},{"label": "WK21", "name": "22"},{"label": "WK22", "name": "23"},{"label": "WK23", "name": "24"},{"label": "WK24", "name": "25"},{"label": "WK25", "name": "26"},{"label": "WK26", "name": "27"},{"label": "WK27", "name": "28"},{"label": "WK28", "name": "29"},{"label": "WK29", "name": "30"},{"label": "WK30", "name": "31"},{"label": "WK31", "name": "32"},{"label": "WK32", "name": "33"},{"label": "WK33", "name": "34"},{"label": "WK34", "name": "35"},{"label": "WK35", "name": "36"},{"label": "WK36", "name": "37"},{"label": "WK37", "name": "38"},{"label": "WK38", "name": "39"},{"label": "WK39", "name": "40"},{"label": "WK40", "name": "41"},{"label": "WK41", "name": "42"},{"label": "WK42", "name": "43"},{"label": "WK43", "name": "44"},{"label": "WK44", "name": "45"},{"label": "WK45", "name": "46"},{"label": "WK46", "name": "47"},{"label": "WK47", "name": "48"},{"label": "WK48", "name": "49"},{"label": "WK49", "name": "50"},{"label": "WK50", "name": "51"},{"label": "WK51", "name": "52"},{"label": "WK52", "name": "53"}
        ]
    });

    // Activate an inline edit on click of a table cell without the 'no-edit' class
    $('#example').on( 'click', 'tbody td:not(.no-edit)', function (e) {
        editor.inline(this, {
            submitOnBlur: true
        } );
    } );

        $('#example').DataTable( {
            "ajax": "../OpsKPI/data/srData.json",
            "dom" : "Bfrtip",
            "scrollX": true,
            "searching": false,
            "scrollCollapse": true,
            "paging": false,
            "order": [],
            "orderable": false,
            "ordering": false,
            "info": false,
            "targets": 0,
            "fixedColumns": {
                "leftColumns": 2
            },
            "columns": [
                {"data":"0", "className":"no-edit"},{"data":"1", "className":"no-edit"},{"data": "2"},{"data": "3"},{"data": "4"},{"data": "5"},{"data": "6"},{"data": "7"},{"data": "8"},{"data": "9"},{"data": "10"},{"data": "11"},{"data": "12"},{"data": "13"},{"data": "14"},{"data": "15"},{"data": "16"},{"data": "17"},{"data": "18"},{"data": "19"},{"data": "20"},{"data": "21"},{"data": "22"},{"data": "23"},{"data": "24"},{"data": "25"},{"data": "26"},{"data": "27"},{"data": "28"},{"data": "29"},{"data": "30"},{"data": "31"},{"data": "32"},{"data": "33"},{"data": "34"},{"data": "35"},{"data": "36"},{"data": "37"},{"data": "38"},{"data": "39"},{"data": "40"},{"data": "41"},{"data": "42"},{"data": "43"},{"data": "44"},{"data": "45"},{"data": "46"},{"data": "47"},{"data": "48"},{"data": "49"},{"data": "50"},{"data": "51"},{"data": "52"},{"data": "53"}
            ],
            "select": {
            },
            "buttons": [
                // { extend: "edit",   editor: editor },
            ],
            "createdRow": function ( row, data, index ) {
                $('td:eq(0)', row).css('font-weight', 'bold');
                $('th:eq(0)', row).css('background-color', '#daeef3');
                $('td:eq(1)', row).css('background-color', '#daeef3');
                // For each column, less than the 54th column, check the value to see if it's x <= 100, and style appropriately
                for (i=2; i < 54; i++){
                    if (data[i] < 100 && data[i] > 0) {
                        $('td:eq('+i+')', row).css('background-color', '#c0504d');
                        $('td:eq('+i+')', row).css('color', '#ffffff');
                    } else if (data[i] == 100) {
                        $('td:eq('+i+')', row).css('background-color', '#92d050');
                        $('td:eq('+i+')', row).css('color', '#ffffff');
                    } else if (data[i] == "") {
                        $('td:eq('+i+')', row).css('background-color', 'transparent');
                        $('td:eq('+i+')', row).css('color', '#000000');
                    }
                }
            }
        } );
    // Formatting nonsense for table headers
    $("th:even").css("background-color", "#31869b");
    $("th:odd").css("background-color", "#4bacc6");
    $("th:even").css("color", "#ffffff");
    $("th:odd").css("color", "#ffffff");
    $("th:even").css("text-align", "center");
    $("th:odd").css("text-align", "center");
} );

nocEdit.php

<?php
include('../OpsKPI/include/head.php');

<?php
>
    
        
            
                NOC Metrics 
** EDIT VIEW **
                
                    
                    Service Reliability (%)
                    
                        
                        
                            
                            
                                
                                AVG
                                <?php for($h=1; $h<53; $h++){echo "<th>WK".$h."";}?>
                            
                            
                        
?>


                        <button type="button" class="btn btn-success"><i class="fa fa-pencil-square" aria-hidden="true"></i> Save</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Include the relevant section tables-->
    <script src="js/tables/srTableEdit.js"></script>
    <!-- Include Footer -->
<?php include('../OpsKPI/include/footer.php'); ?>

Morpheine

Here's a capture of what's happening

kthorngren

What is being returned by the server after hitting enter?

The JSON returned needs to be the full row of data. You can see an example here:
https://editor.datatables.net/examples/inline-editing/simple.html

Click the Ajax Data tab and make a change. You will see the submitted data is just the change but the return is the full row.

Kevin

Morpheine

Thanks for replying, Kevin!

I did a test case where I edited the WK2 column on Availability Internet's row (I entered a value of "200"), and I captured a screenshot of the ajax data. As you can see, it's using the original value:

kthorngren

As you can see, it's using the original value

If the original value is being returned then I suspect your table is not being updated by your server code.

Kevin

allan

"../OpsKPI/data/srData.json"

This is a static JSON file - is that correct? If so, that's the issue. Editor submits information to the server in this fashion and it is up to the server to decide where that information should be stored. Normally it would be a database, but equally it could be a simple JSON file.

The provided PHP libraries don't support the updating of a file I'm afraid - they focus on database interaction, so you'd need your own PHP files to write to the file.

There is one other option you might be able to consider which is much easier to implement, but also easier for someone to abuse if they knew the DataTables API... Editor 1.6 has a local table editing option - so no data is sent to the server. Instead, once all the edit are done, use rows().data() to get the data from the table - you can get it as JSON: JSON.stringify( table.rows().data().toArray() ) and send that to the server. Stick it in the file and that's it done!

Allan

Morpheine

Hmm, so the easier option when working with Editor is most likely to read from a database table rather than a static JSON file I take it?

Thanks so much for all of the information gentlemen! I'll head back to do some re-writes, build this out as a DB and use the PHP version of editor instead!

allan

Yes - databases are the most commonly used data store for the data used in Editor, so I've optimised for that.

Allan