Question

我需要基于Dropdown更改事件显示一个表。我正在使用dropdown的on-change事件，并将所选的dropdown值发布到AJAX call-POST方法，并遍历JSON结果并将行附加到表中。填充表格后，我正在使用Datatable库进行排序/搜索和分页。它仅适用于第一个表，当我将下拉列表更改为填充另一个表时，该表会填充，但是当我尝试分页/排序/搜索时，旧表的行将被排序。搜索值不会清除，排序会填充前一个表行，分页仍保留前一个表行的行计数值。我尝试如下清除Datatable行，

//$('#TableData').dataTable().fnFilter('');

或

// $('#TableData').DataTable().clear().draw(); 但这会在重新初始化时清除整个表行，并且不会追加表行。

这是我的代码

 $(".AdminClass").on("change", function (e) {
    e.stopImmediatePropagation();
    reset();
    //$('#TableData').dataTable().fnFilter('');
   // $('#TableData').DataTable().clear().draw();

    var drpdwnVal = $("#AdminTableID option:selected").val();
    if (drpdwnVal != "None Selected") {
        var url = "../Admin/AdminTable?MainTableId=" + drpdwnVal;
        $.ajax({
            type: "POST",
            url: url,
            data: drpdwnVal,
            dataType: "json",
            cache: false,
            success: function (response) {
                if (response != null) {
                    var jsonData = JSON.stringify(response);
                    data = JSON.parse(jsonData);
                    if (data.hasOwnProperty("TableJsonValues")) {
                        drawTable(data.TableJsonValues);                           
                        InsertDataTable();
                        setActiveButtonColor();
                        setDeactiveButtonColor();
                    }
                }
            }
        });
        return false;
    }
})
function reset() {
    $("#TableData #row1").remove();
    $("#TableData #td5").remove();
    $('#searchString').val('');
}
function drawTable($data) {
    $.each($data, function (index, value) {
        var passbyValue = value.MainTableId + ":" + value.RowId;
        var truVal = value.Active + ";" + passbyValue;
        var falseVal = value.Active + ";" + passbyValue;

        var row1 = '<tr id="row1"><td id="td1" style="width:100%">' + value.RowValue + '</td>'
    + '<td id="td2" style="width:100%"><button id="' + [passbyValue] + '" class="btn" onclick="EditAction(this);" style="background-color:#808080;">' + "Edit <br/> " + '</button> </td>'
    + '<td id="td3" style="width:100%"><button id="' + [truVal] + '" class="btn btntrue" onclick="Activate(this);">' + "Activate <br/> " + '</button> </td>'
    + '<td id="td4" style="width:100%"><button id="' + [falseVal] + '" class="btn btnfalse" onclick="Deactivate(this);">' + " Deactivate <br/> " + '</button></td></tr>';
        $('#TableData').append(row1);
    });
}
function InsertDataTable() {    
    $("#TableData").dataTable({       
        retrieve: true,
        "lengthMenu": [[15, 30, 45, -1], [15, 30, 45, "All"]],
        "searching": true,
        "columnDefs": [{ "targets": 3, "orderable": false }],
        "pagingType": "full_numbers",           
        "deferRender": false
    });
}

第一个表有9条记录第二张表有12条记录，但仍然坚持9条记录排序，对前一个表行进行排序（第二个表行消失）与上述相同

我想念什么？请帮助进一步进行。谢谢

数据表未清除先前的排序/页面/搜索值

0 个答案: