Jquery Datatables表。表格边框外的数据

Question

我使用Datatables来管理我的表，包括使用AJAX编辑表而无需刷新页面的方法。

一切顺利，直到我遇到问题，我不得不在我的一个页面中使用更大的行和更多数据，一旦我点击我的编辑按钮，数据就会从右边的表格中消失。

表没有任何动作：

单击编辑按钮后的

表：

在编辑按钮后单击保存按钮后的表格（最终结果）：

我的Jquery代码（对你们来说有点评论）：

$(document).ready(function() {
    var oTable = $('#tableSmooth').dataTable({
    //"bFilter": false,
     "bJQueryUI": true, //Enable smooth theme
        "sPaginationType": "full_numbers" //Enable smooth theme
    });
    var nEditing = null;

    $('#tableSmooth 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 ) {
            // A different row is being edited - the edit should be cancelled and this row edited 
            restoreRow( oTable, nEditing );
            editRow( oTable, nRow );
            nEditing = nRow;
        }
        else if ( nEditing == nRow && this.innerHTML == '<img src="../../pictures/save.png" alt="edit" width="20" height="20">' ) { //Has to match line in edit row function
            // This row is being edited and should be saved 
            saveRow( oTable, nEditing );
            nEditing = null;
        }
        else {
            // No row currently being edited 
            editRow( oTable, nRow );
            nEditing = nRow;
        }
    } );
} );


function editRow ( oTable, nRow ) //Edit row 
{
    var aData = oTable.fnGetData(nRow);
    var jqTds = $('>td', nRow);

//Editing the rows to textboxes/dropdowns for further use

    jqTds[0].innerHTML = '<input type="text" value="'+aData[0]+'" disabled>';
    jqTds[1].innerHTML = '<input type="text" value="'+aData[1]+'">';
    jqTds[2].innerHTML = '<input type="text" value="'+aData[2]+'" disabled>';
    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 = '<a class="edit" href=""><center><img src="../../pictures/save.png" alt="edit" width="20" height="20"></a>'; //Note: Inner HTML has to match code in document.ready above

}


function saveRow ( oTable, nRow ) //Save row using AJAX 
{

       var jqInputs = $('input', nRow); //Only gets <input> values
       var jqSelect = $('select', nRow); //Only gets <select> values

    oTable.fnUpdate( jqInputs[0].value, nRow, 0, false );//Update table with value for instant display (Not passed trough AJAX rather use JS to prevent possible AJAX error output in table)
    oTable.fnUpdate( jqInputs[1].value, nRow, 1, false );
    oTable.fnUpdate( jqInputs[2].value, nRow, 2, false );
    oTable.fnUpdate( jqInputs[3].value, nRow, 3, false );
        oTable.fnUpdate( jqInputs[4].value, nRow, 4, false );
            oTable.fnUpdate( jqInputs[5].value, nRow, 5, false );
    oTable.fnUpdate( '<a class="edit" href=""><center><img src="../../pictures/edit.png" alt="edit" width="20" height="20"></a>', nRow, 6, false );
    oTable.fnDraw();
}

表格代码是普通的表格代码，没有什么特别的，只有和标签。

我想在编辑后可能会重新加载表格？这将修复格式，但oTable.fnDraw（）正在重绘它，但它没有修复它。也许还有其他方式？

希望有人可以帮助我！提前谢谢。

Answer 1

我最终在文本框中使用size =“”标签来降低文本框的大小，使其不会离开边框。便宜的修复，但它的工作原理。