Jquery Datatables Fully Modifiable Data Table

Question

Hello all,

I'm trying to create a fully modifiable data table with Jquery's Datatable plugin at the moment. By fully modifiable table i mean a user will be able to edit, remove, update, add columns on the table. Based on the examples, currently i am trying the following javascript code:

  function var_dump(obj) {
       if(typeof obj == "object") {
        return "Type: "+typeof(obj)+((obj.constructor) ? "\nConstructor: "+obj.constructor : "")+"\nValue: " + obj;
       } else {
        return "Type: "+typeof(obj)+"\nValue: "+obj;
       }
    }//end function var_dump

      var oTable;
      var giRedraw = false;
      var giCount=11;
      $(document).ready(function() {
/* Add a click handler to the rows - this could be used as a callback */
      $("#example tbody").click(function(event) {
        $(oTable.fnSettings().aoData).each(function (){
          $(this.nTr).removeClass('row_selected');
      });
          $(event.target.parentNode).addClass('row_selected');
      });
/* Add a click handler for the delete row */
      $('#delete').click( function() {
        var anSelected = fnGetSelected( oTable );
        var iRow = oTable.fnGetPosition( anSelected[0] );
        oTable.fnDeleteRow( iRow );
        } );

       oTable = $('#example').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "lib/server_processing.php",
        "fnDrawCallback": function () {
         $('#example tbody td').editable( 'lib/editable_ajax.php', {
                "callback": function( sValue, y ) {
                alert(sValue);
           /* Redraw the table from the new data on the server */
           oTable.fnDraw();
          },
          "height": "14px"
         } );
        }
       } );
      } );

function fnClickAddRow() {
  oTable.fnAddData( [
    giCount+".1",
    giCount+".2",
    giCount+".3",
    giCount+".4",
    giCount+".5", ]
 );
 giCount++;
}


/* Get the rows which are currently selected */
function fnGetSelected( oTableLocal )
{
  var aReturn = new Array();
  var aTrs = oTableLocal.fnGetNodes();

  for ( var i=0 ; i<aTrs.length ; i++ )
  {
    if ( $(aTrs[i]).hasClass('row_selected') )
    {
      aReturn.push( aTrs[i] );
    }
  }
  return aReturn;
}

This works fine in the user interface, but i have no idea on how to send the column information to the server side. Ok i can send the new value of the column to the server_ajax script but how can i send the other related information about the column like unique id of the edited column in the database.

Answer 1

Hi there, sorry if this doesn't answer your question directly, or if you've already looked at this option. The jqGrid plugin allows for everything you just mentioned, and as of 3.6 lets you choose which columns to display (which I think you also mentioned)...in much less code (I think). The key part being that it handles all the ajax for you, you need only parse a little json and handle the structured data on the server side.

http://www.trirand.com/jqgridwiki/doku.php