title: Datatables inline editing with serverside processing
body: <p>I am trying to use inline editing on datatables using this example: <a href="http://datatables.net/media/blog/inline-editing/complete.html" rel="nofollow">DataTables - full row editing example</a>. I am also using serverside processing. I cant seem to get the two working correctly. The edit and delete links do not appear in the table.
  Does anybody know where i am going wrong?</p>
  
  <p><strong>Here is my js:</strong></p>
  
  <pre><code>function restoreRow ( $acTable, nRow )
  {
      var aData = $acTable.fnGetData(nRow);
      var jqTds = $('&gt;td', nRow);
  
      for ( var i=0, iLen=jqTds.length ; i&lt;iLen ; i++ ) {
          $acTable.fnUpdate( aData[i], nRow, i, false );
      }
  
      $acTable.fnDraw();
  }
  
  function editRow ( $acTable, nRow )
  {
      var aData = $acTable.fnGetData(nRow);
      var jqTds = $('&gt;td', nRow);
      jqTds[0].innerHTML = '&lt;input type="text" value="'+aData[0]+'"&gt;';
      jqTds[1].innerHTML = '&lt;input type="text" value="'+aData[1]+'"&gt;';
      jqTds[2].innerHTML = '&lt;input type="text" value="'+aData[2]+'"&gt;';
      jqTds[3].innerHTML = '&lt;input type="text" value="'+aData[3]+'"&gt;';
      jqTds[4].innerHTML = '&lt;input type="text" value="'+aData[4]+'"&gt;';    
      jqTds[5].innerHTML = '&lt;input type="text" value="'+aData[5]+'"&gt;';    
      jqTds[6].innerHTML = '&lt;input type="text" value="'+aData[6]+'"&gt;';    
      jqTds[7].innerHTML = '&lt;input type="text" value="'+aData[7]+'"&gt;';    
      jqTds[8].innerHTML = '&lt;a class="edit" href=""&gt;Save&lt;/a&gt;';
  }
  
  function saveRow ( $acTable, nRow )
  {
      var jqInputs = $('input', nRow);
      $acTable.fnUpdate( jqInputs[0].value, nRow, 0, false );
      $acTable.fnUpdate( jqInputs[1].value, nRow, 1, false );
      $acTable.fnUpdate( jqInputs[2].value, nRow, 2, false );
      $acTable.fnUpdate( jqInputs[3].value, nRow, 3, false );
      $acTable.fnUpdate( jqInputs[4].value, nRow, 4, false ); 
      $acTable.fnUpdate( jqInputs[5].value, nRow, 5, false ); 
      $acTable.fnUpdate( jqInputs[6].value, nRow, 6, false ); 
      $acTable.fnUpdate( jqInputs[7].value, nRow, 7, false ); 
      $acTable.fnUpdate( '&lt;a class="edit" href=""&gt;Edit&lt;/a&gt;', nRow, 8, false );
      $acTable.fnDraw();
  }
  
  
  $(document).ready(function() {
          var $acTable= $("#academic_table").dataTable( {
          "oLanguage": {
              "sSearch": "Filter:"
          },
          "$acTableTools": {
              "sSwfPath": "swf/copy_csv_xls_pdf.swf",
              "aButtons": [
                  "copy",
                  "xls",
                  "csv",
                  "pdf",
                  "print"
              ]
          },
          "bProcessing": true,
          "bServerSide": true,
          "sAjaxSource": "scripts/serverside/academic_serverside.php",
          "iDisplayLength": 10,       
          "bJQueryUI": false,
          "sPaginationType": "scrolling",
          "sDom": '&lt;"clear"&gt;&lt;"top"Tilr&lt;"clear"&gt;pt&gt;',
          "aoColumns": [ 
              {"bVisible":false},
              {"bVisible":false},
              {"bVisible":true},
              {"bVisible":true},
              {"bVisible":true},
              {"bVisible":true},
              {"bVisible":true},
              {"bVisible":false}
          ],
          "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
          $('td:eq(4)', nRow).html(''+ aData[6] +'&amp;nbsp;'+ aData[7] +'');        
          }
          });
  
      var nEditing = null;
  
      $('#new').click( function (e) {
          e.preventDefault();
  
          var aiNew = $acTable.fnAddData( [ '', '', '', '', '', 
              '&lt;a class="edit" href=""&gt;Edit&lt;/a&gt;', '&lt;a class="delete" href=""&gt;Delete&lt;/a&gt;' ] );
          var nRow = $acTable.fnGetNodes( aiNew[0] );
          editRow( $acTable, nRow );
          nEditing = nRow;
      } );
  
      $('#academic_table a.delete').live('click', function (e) {
          e.preventDefault();
  
          var nRow = $(this).parents('tr')[0];
          $acTable.fnDeleteRow( nRow );
      } );
  
      $('#academic_table 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 &amp;&amp; nEditing != nRow ) {
              /* Currently editing - but not this row - restore the old before continuing to edit mode */
              restoreRow( $acTable, nEditing );
              editRow( $acTable, nRow );
              nEditing = nRow;
          }
          else if ( nEditing == nRow &amp;&amp; this.innerHTML == "Save" ) {
              /* Editing this row and want to save it */
              saveRow( $acTable, nEditing );
              nEditing = null;
          }
          else {
              /* No edit in progress - let's start one */
              editRow( $acTable, nRow );
              nEditing = nRow;
          }
      } );
  
  });
  </code></pre>
  
  <p><strong>Here is the table:</strong> </p>
  
  <p>Add new row</p>
  
  <pre><code>&lt;table class="dataTable" id="academic_table" cellpadding="2" cellspacing="2" width="100%"&gt;
  &lt;thead&gt;
  &lt;tr&gt;
  &lt;th&gt;ID&lt;/th&gt; 
  &lt;th&gt;Year&lt;/th&gt; 
  &lt;th&gt;Employee&lt;/th&gt;  
  &lt;th&gt;Division&lt;/th&gt;
  &lt;th&gt;Line Manager&lt;/th&gt;
  &lt;th&gt;Contract&lt;/th&gt;
  &lt;th&gt;Entitlement&lt;/th&gt;
  &lt;th&gt;Units&lt;/th&gt;
  &lt;th&gt;Edit&lt;/th&gt;
  &lt;th&gt;Delete&lt;/th&gt;
  &lt;/tr&gt; 
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td colspan="4" class="dataTables_empty"&gt;Loading data from server&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  
  &lt;tfoot&gt;
  &lt;tr&gt;
  &lt;th&gt;ID&lt;/th&gt; 
  &lt;th&gt;Year&lt;/th&gt; 
  &lt;th&gt;Employee&lt;/th&gt;  
  &lt;th&gt;Division&lt;/th&gt;
  &lt;th&gt;Line Manager&lt;/th&gt;
  &lt;th&gt;Contract&lt;/th&gt;
  &lt;th&gt;Entitlement&lt;/th&gt;
  &lt;th&gt;Units&lt;/th&gt;
  &lt;th&gt;Edit&lt;/th&gt;
  &lt;th&gt;Delete&lt;/th&gt;
  &lt;/tr&gt; 
  &lt;/tfoot&gt;
  &lt;/table&gt;
  </code></pre>