Datatables内联编辑与服务器端处理

Question

我想使用此示例在数据表上使用内联编辑：DataTables - full row editing example。我也在使用serverside处理。我似乎无法使这两个工作正常。编辑和删除链接不会出现在表格中。 有人知道我要去哪里吗？

这里是我的JS：

function restoreRow ($acTable, nRow) 
{ 
    var aData = $acTable.fnGetData(nRow); 
    var jqTds = $('>td', nRow); 

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

    $acTable.fnDraw(); 
} 

function editRow ($acTable, nRow) 
{ 
    var aData = $acTable.fnGetData(nRow); 
    var jqTds = $('>td', nRow); 
    jqTds[0].innerHTML = '<input type="text" value="'+aData[0]+'">'; 
    jqTds[1].innerHTML = '<input type="text" value="'+aData[1]+'">'; 
    jqTds[2].innerHTML = '<input type="text" value="'+aData[2]+'">'; 
    jqTds[3].innerHTML = '<input type="text" value="'+aData[3]+'">'; 
    jqTds[4].innerHTML = '<input type="text" value="'+aData[4]+'">';  
    jqTds[5].innerHTML = '<input type="text" value="'+aData[5]+'">';  
    jqTds[6].innerHTML = '<input type="text" value="'+aData[6]+'">';  
    jqTds[7].innerHTML = '<input type="text" value="'+aData[7]+'">';  
    jqTds[8].innerHTML = '<a class="edit" href="">Save</a>'; 
} 

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('<a class="edit" href="">Edit</a>', 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": '<"clear"><"top"Tilr<"clear">pt>', 
     "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] +'&nbsp;'+ aData[7] +'');   
     } 
     }); 

    var nEditing = null; 

    $('#new').click(function (e) { 
     e.preventDefault(); 

     var aiNew = $acTable.fnAddData([ '', '', '', '', '', 
      '<a class="edit" href="">Edit</a>', '<a class="delete" href="">Delete</a>' ]); 
     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 && 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 && 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; 
     } 
    }); 

}); 

下面是表：

添加新行

<table class="dataTable" id="academic_table" cellpadding="2" cellspacing="2" width="100%"> 
<thead> 
<tr> 
<th>ID</th> 
<th>Year</th> 
<th>Employee</th> 
<th>Division</th> 
<th>Line Manager</th> 
<th>Contract</th> 
<th>Entitlement</th> 
<th>Units</th> 
<th>Edit</th> 
<th>Delete</th> 
</tr> 
</thead> 
<tbody> 
    <tr> 
     <td colspan="4" class="dataTables_empty">Loading data from server</td> 
    </tr> 
</tbody> 

<tfoot> 
<tr> 
<th>ID</th> 
<th>Year</th> 
<th>Employee</th> 
<th>Division</th> 
<th>Line Manager</th> 
<th>Contract</th> 
<th>Entitlement</th> 
<th>Units</th> 
<th>Edit</th> 
<th>Delete</th> 
</tr> 
</tfoot> 
</table> 

Answer 1

使用aoColumns这个例子中，他使用mDataProp每个列，但对与其中一个数据列不匹配的额外列使用null。他使用sDefaultContent添加他的图像，并使用JQuery将事件处理绑定到该列中的单元格。

http://www.datatables.net/blog/Drill-down_rows

所以在我的情况下，我加入

{"mDataProp": null, "sDefaultContent": '<a class="edit" href="">Edit</a>'}, 
{"mDataProp": null, "sDefaultContent": '<a class="delete" href="">Delete</a>'}, 

Answer 2

你会得到从link帮助服务器端处理。如果dbl单击单元格，它会自动转换为可编辑模式。