Question

页面加载的数据代码在这里工作正常：

function FnRetrieveSuccess(result) {
    $res = JSON.parse(result.d);
    console.log(result.d);
    $("#tblData tbody").empty();
    for ($i = 0; $i < $res["UsersDetails"].length; $i++) {
        $("#tblData tbody").append("<tr id=" + $res["UsersDetails"][$i].ID + " style='cursor:pointer'><td>" + $res["UsersDetails"][$i].ID + "</td><td>" + $res["UsersDetails"][$i].Name + "</td><td>" + $res["UsersDetails"][$i].ServeceArea + "</dt><td>" + $res["UsersDetails"][$i].Admin_type + "</td><td><a  class='fa fa-pencil'></a><a style='color:red;margin-left:15px; 'class='fa fa-times' onclick='FnDeleteRow(" + $res["UsersDetails"][$i].ID + ")'></a></td></tr>");

    }
    if (!$.fn.dataTable.isDataTable('#tblData')) {
        table1 = $('#tblData').DataTable();
    }
    else {
        table1 = $("#tblData").DataTable({
            "responsive": true,
            "processing": true,
            "serverSide": true,
            "pageLength": 5,
            "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
            "ordering": true,
            "columnDefs": [{ "targets": 6, "orderable": false }],
            "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                $(nRow).attr("id", aData[0]);
                return nRow;
            }


        });
    }

}

现在我想在成功插入这样的函数后重绘表：

function FnInsertSucces(result) {
    if (result.d == "Success") {
        $("#name").val("");
        $("#uname").val("");
        $("#pwd").val("");


            console.log("data inserted");
            //var refreshedDataFromTheServer = getDataFromServer();

            //var myTable = $('#tblData').DataTable();
            //myTable.clear().rows.add(refreshedDataFromTheServer).draw();
            //table1.fnDestroy();
            //table1.DataTable().ajax.reload();
            // $("#tblData tbody").append("<tr style='cursor:pointer'><td>" + $("#name").val() + "</td><td>" + $("#selServiceArea").val() + "</td><td>" + $("#seAdmin").val() + "</dt><td><a class='fa fa-pencil'></a><a class='fa fa-times' onclick='FnDeleteRow(this)'></a></td></tr>");
        }
        else if (result.d == "Fail") {
            alert("Data not inserted successfully");
        }
    }`**`

Answer 1

在服务器端处理模式下不应使用rows.add()添加行。您应该让DataTables处理数据检索。

只需使用draw()或ajax.reload()重新绘制并重新填充表格。

$("#tblData").DataTable().draw();

您可以传递false作为保留页码的第一个参数。

$("#tblData").DataTable().draw(false);

成功插入ajax后重绘jquery数据表

1 个答案: