间歇性“不能重新初始化数据表".错误 [英] Intermitient "Cannot reinitialise DataTable" error

查看：78 发布时间：2020/6/29 0:29:04 javascript jquery datatables

本文介绍了间歇性“不能重新初始化数据表".错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用DataTable创建项目( https://datatables.net )，并且遇到了这个问题很奇怪.

I am making a project with a DataTable (https://datatables.net) and the issue I am having is pretty strange.

有时，当我加载页面时，所有内容都可以100％运行，而有时，当我加载页面时，我会在弹出窗口中从DataTables中得到此错误:

Sometimes when I load the page, everything works 100% and other times when I load the page I get this error from DataTables in a popup:

DataTables warning: table id=resdatatable - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

正如我所说，没有确定的触发方式.如果我按刷新"有时会起作用，有时会给我这个错误.

As I have said, there's no sure fire way to trigger this. If I hit refresh sometimes it will work, sometimes it will give me that error.

我没有尝试重新初始化DataTable，所以对于为什么会发生这种情况我有些困惑.我检查了说明中的链接，但不了解如何解决此问题.

I am not trying to reinitialize the DataTable, so I am a bit confused on why this is happening. I checked the link in the description but I am not understanding how to remedy this.

这是我的代码:

    let statusList = getStatusList();

function getRes(callback) { // ADDED CALLBACK
    let city = document.getElementById("cityselect").value;
    $.ajax({
        type: 'get',
        url: 'getreservationstable.php?city='+city,
        dataType: 'json',
        cache: false,
        success: callback  // USED CALLBACK
    });
}

function changeCity()
{
    $('#resdatatable').DataTable().ajax.reload();
}

getRes(function (result) { // APPLIED CALLBACK
  $('#resdatatable').DataTable({
     data: result,             // YOUR RESULT
      columns: [
        { data: 'id', title: 'ID' },
        { data: 'bookingdatetime', title: 'Booking Date' },
        { data: 'name', title: 'Name' },
        { data: 'class', title: 'Class' },
        { data: 'pickupdatetime', title: 'Pick up' },
        { data: 'duration', title: 'Duration' },
        { data: 'dropdatetime', title: 'Drop off' },
        { data: 'age', title: 'Age' },
        { data: 'coverage', title: 'Coverage' },
        { data: 'quote', title: 'Quote' },
        {
          data: 'status',
          title: 'Status',
          render: function(data, type, row) {
            let isKnown = statusList.filter(function(k) { return k.id === data; }).length > 0;
            if (isKnown) {
              return $('<select id ="resstatus'  + row.id + '" onchange="changeResStatus(' + row.id + ')">', {
                id: 'resstatus-' + row.id, // custom id
                value: data
              }).append(statusList.map(function(knownStatus) {
                let $option = $('<option>', {
                  text: knownStatus.text,
                  value: knownStatus.id
                });
                if (row.status === knownStatus.id) {
                  $option.attr('selected', 'selected');
                }
                return $option;
              })).on('change', function() {
                changeresstatus(row.id); // Call change with row ID
              }).prop('outerHTML');
            } else {
              return data;
            }
          }
        }
      ]
    });
});

/**
 * jQuery plugin to convert text in a cell to a dropdown
 */
(function($) {
  $.fn.createDropDown = function(items) {
    let oldTxt = this.text();
    let isKnown = items.filter(function(k) { return k.id === oldTxt; }).length > 0;
    if (isKnown) {
      this.empty().append($('<select>').append(items.map(function(item) {
        let $option = $('<option>', {
          text: item.text,
          value: item.id
        });
        if (item.id === oldTxt) {
          $option.attr('selected', 'selected');
        }
        return $option;
      })));
    }
    return this;
  };
})(jQuery);

// If you remove the renderer above and change this to true,
// you can call this, but it will run once...
if (false) {
  $('#resdatatable > tbody tr').each(function(i, tr) {
    $(tr).find('td').last().createDropDown(statusList);
  });
}


function getStatusList() {
  return [{
    id: 'Confirmed',
    text: 'Confirmed'
  }, {
    id: 'Unconfirmed',
    text: 'Unconfirmed'
  }, {
    id: 'Open',
    text: 'Open'
  }, {
    id: 'Closed',
    text: 'Closed'
  }, {
    id: 'Canceled',
    text: 'Canceled'
  }];
}

function changeResStatus(str1) {
    var id = str1;
    var status = document.getElementById("resstatus" + id).value;
    var mailres = "";

    var r = confirm("Change Status for ID # " + id + " to " + status + "?");
    if (r == true) {

        if (document.getElementById("resstatus" + id).value == "Confirmed"){
            var s = confirm("Send ID # " + id + " a confirmation email?");
            if (s == true) {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {

                document.getElementById("result").setAttribute ("data-notify-msg", this.responseText);
                document.getElementById("result").setAttribute ("data-notify-type", "info");
                SEMICOLON.widget.notifications(document.getElementById("result"));
            }
        };
        xmlhttp.open("GET","sendconfirmationemail.php?id="+id,true);
        xmlhttp.send();
        }
        }

        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("result").setAttribute ("data-notify-msg", this.responseText);
                document.getElementById("result").setAttribute ("data-notify-type", "info");
                SEMICOLON.widget.notifications(document.getElementById("result"));
            }
        };
        xmlhttp.open("GET","changeresstatus.php?id="+id+"&status="+status,true);
        xmlhttp.send();

    }else{
                document.getElementById("result").setAttribute ("data-notify-msg", "Change status action aborted");
                document.getElementById("result").setAttribute ("data-notify-type", "error");
                SEMICOLON.widget.notifications(document.getElementById("result"));
    }
    }

$(document).ready(function() {
    var table = $('#resdatatable').DataTable();

    $('#resdatatable tbody').on('click', 'tr', function () {
        var data = table.row( this ).data().id;


         $.ajax({
        type: 'POST',
        url: 'getreservationsdetails.php',
        dataType: 'json',
        data: {  id:data, },
        success: function(response) {
                $('#resulttitle').html("Booking ID # " + response[0].id);
                $('#resdetname').html(response[0].name);
                $('#resdetbdate').html(response[0].bookingdatetime);
                $('#resdetadd').html("<br>" + response[0].address + "<br>" + response[0].city + "<br>" + response[0].state + " " + response[0].post);
                $('#resdetphone').html(response[0].phone);
                $('#resdetemail').html(response[0].email);
                $('#resdetdln').html(response[0].dlnum);
                $('#resdetdle').html(response[0].dlexp);
                $('#resdetdlc').html(response[0].dlcountry);
                $('#resdetpickup').html(response[0].pickuploc + " " + response[0].pickupdatetime);
                $('#resdetduration').html(response[0].duration);
                $('#resdetdrop').html(response[0].droploc + " " + response[0].dropdatetime);
                $('#resdetclass').html(response[0].class);
                $('#resdetcoverage').html(response[0].coverage);
                $('#resdetage').html(response[0].age);
                $('#resdetnumofdrivers').html(response[0].numofdrivers);
                $('#resdetroadside').html(response[0].roadsideass);
                $('#resdetafterhoursdrop').html(response[0].afterhoursdrop);
                $('#resdetpromo').html(response[0].promo);
                $('#resdetquote').html(response[0].quote);
                $('#resdetaddcomments').html(response[0].name);
                $('#resdetip').html(response[0].ip);
                $("#modalresult").modal();
        }
    });



    } );
} );

在进一步检查中，此错误似乎是由以下行引起的:var table = $('#resdatatable').DataTable();在$(document).ready(function(){-中，如果我删除该行，则一切正常.如何使这项工作正常??

Upon further examination, this error seems to be caused by the line var table = $('#resdatatable').DataTable(); in $(document).ready(function() { - if I remove that line, everything works just fine. How do I make this work???

间歇性“不能重新初始化数据表".错误 [英] Intermitient "Cannot reinitialise DataTable" error

问题描述

推荐答案

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

间歇性“不能重新初始化数据表".错误 [英] Intermitient &quot;Cannot reinitialise DataTable&quot; error

问题描述

推荐答案

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

间歇性“不能重新初始化数据表".错误 [英] Intermitient "Cannot reinitialise DataTable" error

登录关闭