Question

我在许多页面中使用jquery数据表并且它在每个页面和单个页面中都运行良好它不能正常工作，我的意思是当我使用tab来浏览数据表时，它第一次工作正常，当我尝试第二次做同样的事情，如果我试着在数据表中的几秒钟内专注于任何事情，焦点就会消失，并且从页面的开始处开始重叠。

这是代码

function tableCall(){
    var clientId = $('#clientId').val();
    var versionCount = $('#versionCount').val();
    var fromDate = $('#fromDate').val();
    var toDate = $('#toDate').val();
    $.ajax({
      url: auditTrail.props.reporttableURL,
      type: "POST",
      dataType: "json",
      data: {
        clientId:clientId,
        versionCount:versionCount,
        fromDate:fromDate,
        toDate:toDate
      },
      success: function (data) {
            searchJSON = data.data;
            var len=searchJSON.length;
            if (len > 0){                   
                $('.no-data, #warning-sign').hide();
                createTable();
            }else{
                $('.no-data').hide();
                $('#warning-sign').show();
            }
      }
    });
}

function createTable() {
     wwhs.setADAAttrDynamic($('#auditTable'));
      if ($.fn.DataTable.isDataTable('#auditTable')) {
       // table.destroy();
        $("#auditTable tbody").empty();
    }
    table = $('#auditTable').dataTable({
        "searching":false,
        "destroy":true,
        "autoWidth": false,
        "ordering": true,
        "destroy":true,
        "stateSave": true,
        "drawCallback": attachEvents,
         "stateLoadParams": function (settings, data) {
                return false;
            },
        data: searchJSON,


        columns: [{
            data: "reportName"
        }, {
            data: "reportStatus"
        }, {
            data: "timeStamp"
        }, {
            data: "requestedBy"
      }],

        "columnDefs": [{
            "render": function (data, type, row) {
                if(row.reportStatus.toUpperCase() == 'PROCESSED')
                    return '<a class="blue-text" " data-name="'+ row.reportName +'">' + row.reportName + '</a>';
                else
                    return row.reportName;
            },
            "width": "50%",
            "targets": 0
        }, {
            "width": "15%",
            "targets": 1
        }, {
            "width": "20%",
            "targets": 2
        }, {
            "width": "15%",
            "targets": 3
        }]
    });
}

Answer 1

我认为问题是因为数据表实例没有被销毁。

由于数据表将所有节点保存到对象中并在需要时呈现它，因此清空tbody不会做任何事情。它只删除页面中可以由datatable从其存储对象重新绘制/重新呈现的元素。

您可以检查对象是否已经初始化，并在重新初始化之前将其销毁。

if(typeof table != "undefined")
    table.destroy();

所以最终的代码看起来像

function tableCall(){
    var clientId = $('#clientId').val();
    var versionCount = $('#versionCount').val();
    var fromDate = $('#fromDate').val();
    var toDate = $('#toDate').val();
    $.ajax({
        url: auditTrail.props.reporttableURL,
        type: "POST",
        dataType: "json",
        data: {
            clientId:clientId,
            versionCount:versionCount,
            fromDate:fromDate,
            toDate:toDate
        },
        success: function (data) {
            searchJSON = data.data;
            var len=searchJSON.length;
            if (len > 0){                   
                $('.no-data, #warning-sign').hide();
                createTable();
            } else {
                $('.no-data').hide();
                $('#warning-sign').show();
            }
        }
    });
}

function createTable() {
    wwhs.setADAAttrDynamic($('#auditTable'));
    if ($.fn.DataTable.isDataTable('#auditTable')) {
        if(typeof table != "undefined")
            table.destroy();
    }
    table = $('#auditTable').dataTable({
        "searching":false,
        "destroy":true,
        "autoWidth": false,
        "ordering": true,
        "destroy":true,
        "stateSave": true,
        "drawCallback": attachEvents,
        "stateLoadParams": function (settings, data) {
            return false;
        },
        data: searchJSON,
        columns: [{
            data: "reportName"
        }, {
            data: "reportStatus"
        }, {
            data: "timeStamp"
        }, {
            data: "requestedBy"
        }],

        "columnDefs": [{
            "render": function (data, type, row) {
                if(row.reportStatus.toUpperCase() == 'PROCESSED')
                    return '<a class="blue-text" " data-name="'+ row.reportName +'">' + row.reportName + '</a>';
                else
                    return row.reportName;
            },
            "width": "50%",
            "targets": 0
        }, {
            "width": "15%",
            "targets": 1
        }, {
            "width": "20%",
            "targets": 2
        }, {
            "width": "15%",
            "targets": 3
        }]
    });
}

Tabbing不适用于数据表

1 个答案: