Inline Editing Doesn't Save

Inline Editing Doesn't Save

MorpheineMorpheine Posts: 4Questions: 1Answers: 0
edited March 2017 in Free community support

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?)


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",
                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");
} );


    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 col-md-offset-2 col-sm-9 col-sm-offset-3 col-xs-12 col-xs-offset-0 main">
                <h1 class="page-header" style="margin-bottom: 0px">NOC Metrics <span style="color: red;"><br/>** EDIT VIEW **</span></h1>
                <div class="row col-md-8">
                    <!-- NOC -->
                    <h3 class="sub-header" style="color: red">Service Reliability (&#37;)</h3>
                    <div class="col-xs-12 col-md-12 col-sm-12">
                        <!-- Table -->
                        <table id="example" class="table table-striped table-bordered dataTable no-footer" cellspacing="0" width="100%">
                                <?php for($h=1; $h<53; $h++){echo "<th><h4>WK".$h."</h4>";}?>

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

This question has an accepted answers - jump to answer


  • MorpheineMorpheine Posts: 4Questions: 1Answers: 0

    Here's a capture of what's happening

  • kthorngrenkthorngren Posts: 2,465Questions: 19Answers: 556

    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:

    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.


  • MorpheineMorpheine Posts: 4Questions: 1Answers: 0
    edited March 2017

    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:

  • kthorngrenkthorngren Posts: 2,465Questions: 19Answers: 556

    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.


  • allanallan Posts: 45,738Questions: 1Answers: 6,283 Site admin
    Answer ✓


    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!


  • MorpheineMorpheine Posts: 4Questions: 1Answers: 0

    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! :)

  • allanallan Posts: 45,738Questions: 1Answers: 6,283 Site admin

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


Sign In or Register to comment.