Question

I am confused which plugin I should use with datatable jquery. My problem is I cannot find any answer that solve all my problems (I have suffered more than 4 hours now). Sorry if this problem has been already addressed countless times…

I have a table with >10000 rows from a mysql database, I wanna add a cell Inline editing on a specific column and so I found two existing methods.

1. http://datatables.net/examples/api/editable.html
2. http://jquery-datatables-editable.googlecode.com/svn/trunk/inline-edit.html

My question is what are the differences ? Which one requires which js scripts as inputs (I got confused and added all of them at the end)…
I have the feeling that some are outdated and doesn’t work anymore with the most recent versions. Or maybe I am mixing both of them, so nothing works at the end.

Jeditable (it doesn’t work in my hand. when I click on any cell in the table, nothing happens)

$("#example.", oTable.fnGetNodes()).editable( 'php/editable_ajax.php', {
                    "callback": function( sValue, y ) {
                        var aPos = oTable.fnGetPosition( this );
                        oTable.fnUpdate( sValue, aPos[0], aPos[1] );
                    },
                    "submitdata": function ( value, settings ) {
                        return {
                            "row_id": this.parentNode.getAttribute('id'),
                            "column": oTable.fnGetPosition( this )[2]
                        };
                    },
                    "height": "14px"
                });

Editable (When I click, editing event works, but the value is not updated in the database, except if editable_ajax.php contains full mysql query, but then the page is not reloaded)

$('#example').dataTable().makeEditable({
                    sUpdateURL: "php/editable_ajax.php",
                    "aoColumns": [
                        null,
                        {
                            indicator: 'Saving CSS Grade...',
                            tooltip: 'Click to select CSS Grade',
                            loadtext: 'loading...',
                            type: 'select',
                            onblur: 'submit',
                            data: "{'':'Please select...', '1':'Yes','0':'No'}" 
                        }
                    ]
                });

PHP server side

<?php
    echo $_POST['value'].' (server updated)';
?>

One last question, is there one of them that handles more efficiently datatable with lots of row ? (it takes already 30 sec to load it).

Answer 1

The following prerequisite setup instructions tell me that you definitely need both jeditable and dataTables to make dataTables.editable work. jquery-datatables-editable

    <script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.DataTables.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.jeditable.js" type="text/javascript"></script>
    <script src="/Scripts/jquery-ui.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.DataTables.editable.js" type="text/javascript"></script>

And by process of elimination, we can assume that you can jeditable is used solely with dataTables. Look at the source of this example and you can see only dataTables and jEditable have been used.

I’m not too sure about the differences, but I believe dataTables.editable provides an interface to some common functions between editable and dataTable (and jValidate) to make it easier to implement.

This plugin integrates several plugins such as JQuery DataTables, JQuery Editable, JQuery Validation plugins and implement common data management functionalities.