jquery - 通过服务器端处理进行数据表内联编辑

Question

我尝试使用以下示例对数据表使用内联编辑:DataTables - full row editing example 。我也在使用服务器端处理。我似乎无法让两者正常工作。编辑和删除链接不会出现在表中。有人知道我哪里出错了吗？

这是我的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 将事件处理绑定(bind)到该列中的单元格。

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>'},