Fatal编程技术网
  • javascript/
  • Javascript “间歇”；无法重新初始化数据表“；错误

Javascript “间歇”；无法重新初始化数据表“；错误

javascript jquery datatables

Javascript “间歇”；无法重新初始化数据表“；错误,javascript,jquery,datatables,Javascript,Jquery,Datatables,我正在做一个带有DataTable（）的项目，我遇到的问题非常奇怪 有时，当我加载页面时，一切都能100%正常工作，而其他时候，当我加载页面时，我会在弹出窗口中从DataTables中得到此错误： DataTables warning: table id=resdatatable - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

我正在做一个带有DataTable（）的项目，我遇到的问题非常奇怪

有时，当我加载页面时，一切都能100%正常工作，而其他时候，当我加载页面时，我会在弹出窗口中从DataTables中得到此错误：

DataTables warning: table id=resdatatable - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
正如我所说，没有可靠的方法来触发这一点。如果我点击刷新，有时它会工作，有时它会给我那个错误

我没有尝试重新初始化DataTable，所以我对为什么会发生这种情况感到有点困惑。我检查了描述中的链接，但我不知道如何补救

这是我的密码：

    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();
        }
    });



    } );
} );

let statusList=getStatusList（）；
函数getRes（回调）{//添加了回调
让city=document.getElementById（“cityselect”）.value；
$.ajax({
键入：“get”，
url:'getreservationstable.php？城市='+城市，
数据类型：“json”，
cache:false，
成功：回调//已使用回调
});
}
函数changeCity（）
{
$（'#resdatatable'）.DataTable（）.ajax.reload（）；
}
getRes（函数（结果）{//应用回调
$（'#resdatatable'）.DataTable({
data:result，//您的结果
栏目：[
{数据：'id'，标题：'id'}，
{数据：'bookingdatetime'，标题：'Booking Date'}，
{数据：'name'，标题：'name'}，
{数据：'class'，标题：'class'}，
{data:'pickupdatetime'，title:'Pick-up'}，
{数据：'duration'，标题：'duration'}，
{data:'dropdatetime'，title:'dropoff'}，
{数据：'age'，标题：'age'}，
{数据：'coverage'，标题：'coverage'}，
{数据：'quote'，标题：'quote'}，
{
数据：“状态”，
标题:"地位",，
呈现：函数（数据、类型、行）{
让isKnown=statusList.filter（函数（k）{returnk.id==data；}）.length>0；
如果（已知）{
返回$（''）{
id:'resstatus-'+row.id，//自定义id
值：数据
}).append（statusList.map）（函数（knownStatus）{
设$option=$（“”{
text:knownStatus.text，
值：knownStatus.id
});
if（row.status==knownStatus.id）{
$option.attr（'selected'，'selected'）；
}
返回$option；
})).on（'change'，function（））{
changeresstatus（row.id）；//使用row id调用change
}).prop（“outerHTML”）；
}否则{
返回数据；
}
}
}
]
});
});
/**
*jQuery插件，用于将单元格中的文本转换为下拉列表
*/
（函数（$）{
$.fn.createDropDown=函数（项）{
设oldTxt=this.text（）；
let isKnown=items.filter（函数（k）{return k.id==oldTxt；}）.length>0；
如果（已知）{
this.empty（）.append（$（''）.append（items.map）（函数（item）{
设$option=$（“”{
text:item.text，
值：item.id
});
如果（item.id==oldTxt）{
$option.attr（'selected'，'selected'）；
}
返回$option；
})));
}
归还这个；
};
})（jQuery）；
//如果删除上面的渲染器并将其更改为true，
//你可以调用它，但它将运行一次。。。
if（false）{
$（'#resdatatable>tbody tr'）。每个（函数（i，tr）{
$（tr）.find（'td'）.last（）.createDropDown（statusList）；
});
}
函数getStatusList（）{
返回[{
id:'已确认'，
文本：“已确认”
}, {
id:'未确认'，
文本：“未确认”
}, {
id:'打开'，
文本：“打开”
}, {
id:'已关闭'，
文本：“已关闭”
}, {
id:'取消'，
文本：“已取消”
}];
}
功能更改状态（str1）{
var-id=str1；
var status=document.getElementById（“resstatus”+id）.value；
var mailres=“”；
var r=确认（“将ID#“+ID+”的状态更改为“+Status+”？”；
如果（r==true）{
if（document.getElementById（“resstatus”+id）.value==“已确认”）{
var s=确认（“发送ID#”+ID+“确认电子邮件？”）；
如果（s==true）{
if（window.XMLHttpRequest）{
//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}否则{
//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
document.getElementById（“结果”）.setAttribute（“数据通知消息”，this.responseText）；
document.getElementById（“结果”）.setAttribute（“数据通知类型”、“信息”）；
分号.widget.notifications（document.getElementById（“结果”）；
}
};
open（“GET”、“sendConfirmationMail.php？id=“+id，true”）；
xmlhttp.send（）；
}
}
if（window.XMLHttpRequest）{
//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}否则{
//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
document.getElementById（“结果”）.setAttribute（“数据通知消息”，this.responseText）；
document.getElementById（“结果”）.setAttribute（“数据通知类型”、“信息”）；
分号.widget.notifications（document.getElementById（“结果”）；
}
};
open（“GET”、“changeresstatus.php？id=“+id+”&status=“+status，true”）；
xmlhttp.send（）；
}否则{
document.getElementById（“结果”）.setAttribute（“数据通知消息”，“更改状态操作已中止”）；
document.getElementById（“结果”）.setAttribute（“数据通知类型”、“错误”）；
分号.widget.notifications(

$(document).ready(function() {

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



getRes(function (result) { // APPLIED CALLBACK
  $('#resdatatable').DataTable({
    ...
  });

   $('#resdatatable tbody').on('click', 'tr', function () {
   ...




setTimeout(function() {
$(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();
        }
    });