Need an Simple Add, Edit, Delete Update Example using inline edting with Serverside PHP, Mysql, Jque

ninjadev

Dear Friends,

I have been trying for last 50+ hours trying to figure out this and got confused and also could see many struggled like me. I am a beginner and it looks hard for me to understand. Any help with an simple working example would help me out.

I have a editable data table having the following code. Now i have a json data which has all the data for the fields. I am new to jquery and dont know and have been struggling to input the data from json to this code. Please help me out. I would be very much thankful. Need help with a simple code explaining how to do the editable data table save, edit, delete and update

Need an Simple Add, Edit, Delete Update Example using inline edting with Serverside PHP, Mysql, Jquery, Ajax files, the table can be yours too i am fine with that.

Take any sample datatable and needs files ( html, js, php, mysql ) so that i can do it locally and learn

Thanks Suresh

Json from fetch.php is

{"result":[
{"id":"1","name":"John","age":"18","company":"Google"},
{"id":"2","name":"Angel","age":"22","company”:”Nasa”},
{"id":"3","name":"Justin","age":"18","company":"Facebook"},
{"id":"4","name”:”Allan”,”age":"21","company”:”Intel”}
]}

Jquery in the editable table is as follow:

var EditableTable = function () {

return {

    //main function to initiate the module
    init: function () {
        function restoreRow(oTable, nRow) {
            var aData = oTable.fnGetData(nRow);
            var jqTds = $('>td', nRow);

            for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
                oTable.fnUpdate(aData[i], nRow, i, false);
            }

            oTable.fnDraw();
        }

        function editRow(oTable, nRow) {
            var aData = oTable.fnGetData(nRow);
            var jqTds = $('>td', nRow);
            jqTds[0].innerHTML = '<input type="text" class="form-control small" value="' + aData[0] + '">';
            jqTds[1].innerHTML = '<input type="text" class="form-control small" value="' + aData[1] + '">';
            jqTds[2].innerHTML = '<input type="text" class="form-control small" value="' + aData[2] + '">';
            jqTds[3].innerHTML = '<input type="text" class="form-control small" value="' + aData[3] + '">';
            jqTds[4].innerHTML = '<a class="edit" href="">Save</a>';
            jqTds[5].innerHTML = '<a class="cancel" href="">Cancel</a>';
        }

        function saveRow(oTable, nRow) {
            var jqInputs = $('input', nRow);
            oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
            oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
            oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
            oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
            oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 4, false);
            oTable.fnUpdate('<a class="delete" href="">Delete</a>', nRow, 5, false);
            oTable.fnDraw();
        }

        function cancelEditRow(oTable, nRow) {
            var jqInputs = $('input', nRow);
            oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
            oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
            oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
            oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
            oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 4, false);
            oTable.fnDraw();
        }

        var oTable = $('#editable-sample').dataTable({
            "aLengthMenu": [
                [5, 15, 20, -1],
                [5, 15, 20, "All"] // change per page values here
            ],
            // set the initial value
            "iDisplayLength": 5,
            "sDom": "<'row'<'col-lg-6'l><'col-lg-6'f>r>t<'row'<'col-lg-6'i><'col-lg-6'p>>",
            "sPaginationType": "bootstrap",
            "oLanguage": {
                "sLengthMenu": "_MENU_ records per page",
                "oPaginate": {
                    "sPrevious": "Prev",
                    "sNext": "Next"
                }
            },
            "aoColumnDefs": [{
                    'bSortable': false,
                    'aTargets': [0]
                }
            ]
        });

        jQuery('#editable-sample_wrapper .dataTables_filter input').addClass("form-control medium"); // modify table search input
        jQuery('#editable-sample_wrapper .dataTables_length select').addClass("form-control xsmall"); // modify table per page dropdown

        var nEditing = null;

        $('#editable-sample_new').click(function (e) {
            e.preventDefault();
            var aiNew = oTable.fnAddData(['', '', '', '',
                    '<a class="edit" href="">Edit</a>', '<a class="cancel" data-mode="new" href="">Cancel</a>'
            ]);
            var nRow = oTable.fnGetNodes(aiNew[0]);
            editRow(oTable, nRow);
            nEditing = nRow;
        });

        $('#editable-sample a.delete').live('click', function (e) {
            e.preventDefault();

            if (confirm("Are you sure to delete this row ?") == false) {
                return;
            }

            var nRow = $(this).parents('tr')[0];
            oTable.fnDeleteRow(nRow);
            alert("Deleted! Do not forget to do some ajax to sync with backend :)");
        });

        $('#editable-sample a.cancel').live('click', function (e) {
            e.preventDefault();
            if ($(this).attr("data-mode") == "new") {
                var nRow = $(this).parents('tr')[0];
                oTable.fnDeleteRow(nRow);
            } else {
                restoreRow(oTable, nEditing);
                nEditing = null;
            }
        });

        $('#editable-sample a.edit').live('click', function (e) {
            e.preventDefault();

            /* Get the row as a parent of the link that was clicked on */
            var nRow = $(this).parents('tr')[0];

            if (nEditing !== null && nEditing != nRow) {
                /* Currently editing - but not this row - restore the old before continuing to edit mode */
                restoreRow(oTable, nEditing);
                editRow(oTable, nRow);
                nEditing = nRow;
            } else if (nEditing == nRow && this.innerHTML == "Save") {
                /* Editing this row and want to save it */
                saveRow(oTable, nEditing);
                nEditing = null;
                alert("Updated! Do not forget to do some ajax to sync with backend :)");
            } else {
                /* No edit in progress - let's start one */
                editRow(oTable, nRow);
                nEditing = nRow;
            }
        });
    }

};

allan

You might be interested in taking a look at Editor which provides full editing support for DataTables rather than needing to write the code yourself.

I don't immediately see anything wrong with your code scanning over it quickly, other than the point out that it uses the legacy API. It would need in-depth debugging to figure out when is going wrong with it.

Allan

ninjadev

Dear Allan

Thanks so much for your time and quick answer. In the above can you let me know how to give the Json output where to give, i am new and struggling.

Please help me.

Thanks
Suresh

ninjadev

I just need to know how to give the database json into the jquery code i have pasted. Please help me

allan

I don't see anything in the above code that would make use of JSON. There are some comments about needing to fill in / write code, such as using $.ajax to make a call to the server, which could potentially use JSON.

Allan

ninjadev

Can you please help me how to save this to server, or any example of using ajax

allan

You have the data to submit to the server in the saveRow function. I would suggest sending that data to the server using $.ajax. If you aren't sure how to do that, I would suggest reading jQuery tutorials on Ajax.

Allan

ninjadev

Thanks a lot, i am looking into it, mean while can you give a code that works for me with the above code.

allan

I'm not available for freelance work at the moment. I would suggest posting your job requirements on ODesk or some other similar site if you require someone to write software for you.

Allan