Question

我正在使用JQuery DataTables动态地向已启用分页的表添加行。

我的DataTable初始化如下：

$('#tasksTable').dataTable({
    "bProcessing": true,
    "sAjaxSource": "/admin/gettaskstable",
    "sAjaxDataProp": "Data",
    "bDeferRender": true,
    "bPaginate": true,
    "bLengthChange": false,
    "bFilter": false,
    "bSort": false,
    "bInfo": false,
    "bAutoWidth": false,
    "aaSorting": [[0, "asc"]],
    "aoColumns": [
       { "bVisible": false },
       { sWidth: '10em' },
       { sWidth: '15em' },
       { sWidth: '10em' }
    ]
});

我处理行添加的代码是：

$("#addTaskButton").click(function (event) {

    var taskTypeID = $("#taskTypesDropDown").val();
    var taskType = $("#taskTypesDropDown").find("option").filter(":selected").text();
    var taskDescription = $("#taskDescription").val();
    var tasksTable = $("#tasksTable").dataTable();

    /* Sumbit data to the server */
    $.post("/admin/addtask", { 
        taskTypeID: taskTypeID, 
        taskDescription: taskDescription 
    }, function (result) {               

            /* Add row to the datatable */
            var newRow = tasksTable.fnAddData([
                result,
                taskType,
                taskDescription,
                'True'
            ], true);

            /* Display newly added row*/
            var settings = tasksTable.fnSettings();
            tasksTable.fnDisplayRow(tasksTable.fnGetNodes()[newRow[0]]);           

        });
    })

我正在使用http://datatables.net/plug-ins/api

中的扩展名fnDisplayRow

问题是这行获取行返回null：

tasksTable.fnGetNodes()[newRow[0]]

查看settings.aoData我可以看到我新添加的行，但是nTr为null，因为所有由于分页而未显示的行也是如此。例如，如果有30条记录，并且我在第一页上显示10条记录，则对于记录20-30，nTr为空，并且我添加到最后的任何记录。

我在fnAddData（）上设置了fnDraw（），如何为那些未显示的记录生成tr？

Answer 1

我认为在显示行之前不会创建nTr，如果该行位于未显示的页面上，则nTr将为null。

在尝试显示行之前，我解决了这个问题，直到该行所在的页面。我使用属性 aiDisplayMaster 来保持每个显示元素的排序位置，然后根据 _iDisplayLength 计算页面。

var settings = tasksTable.fnSettings(),
    page,
    displayLength = settings._iDisplayLength;

$.each(settings.aiDisplayMaster, function(idx, row){
    if(row === position){
        page = Math.floor(idx / displayLength); 
        // paginate to that page
        settings.oInstance.fnPageChange(page);
        //--nTr should not be null here
    }
});

希望这有助于解决错误，请告诉我您的意见和建议。

在启用了分页的DataTables中添加一行并显示新添加的行

1 个答案: