刷新DataTable的问题

用户11981274

我的DataTable(https://datatables.net有两个问题,第一个问题是我想让我的数据表在更改选择框时显示新信息,这是我的代码:

    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
     destroy: true,
      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'
  }];
}

我有一个选择框,看起来像这样:

<select id="cityselect" onchange="changeCity()">
<option value="la">Los Angeles</option>
<option value="oc">Orange County</option>
<option value="sf">San Francisco</option>
</select>

当我尝试更改城市时,它给了我这个错误:

DataTables warning: table id=resdatatable - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1

控制台显示:

Uncaught TypeError: Cannot set property 'data' of null

JSON响应是100%有效的。有人可以向我解释为什么这行不通吗?

编辑:这是JSON数据,这是合法的,它在页面加载时加载,但在选择开关上不加载:

[{"id":"1","bookingdatetime":"10\/02\/19 @ 10:35 pm","name":"Tony ","class":"travel","pickupdatetime":"10\/03\/19 @ 01:00 pm","duration":"013 days","dropdatetime":"10\/16\/19 @ 06:30 pm (sf) ","age":"21+","coverage":"inclusive","quote":"$973","status":"Confirmed"},{"id":"11","bookingdatetime":"10\/03\/20 @ 02:17 pm","name":"Daniel  ","class":"travel","pickupdatetime":"10\/04\/19 @ 04:30 am","duration":"027 days","dropdatetime":"10\/31\/19 @ 06:30 pm ","age":"21+","coverage":"inclusive","quote":"$1356","status":"Confirmed"},{"id":"12","bookingdatetime":"10\/03\/19 @ 02:17 pm","name":"Richard Phillips ","class":"suv","pickupdatetime":"10\/08\/19 @ 12:30 pm","duration":"007 days","dropdatetime":"10\/15\/19 @ 04:30 pm (sf) ","age":"21+","coverage":"inclusive","quote":"$849","status":"Unconfirmed"},{"id":"13","bookingdatetime":"10\/03\/19 @ 02:38 pm","name":" ESCOBAR ","class":"convert","pickupdatetime":"10\/12\/19 @ 10:00 am","duration":"014 days","dropdatetime":"10\/26\/19 @ 08:30 pm (oc) ","age":"19","coverage":"inclusive","quote":"$1638","status":"Unconfirmed"},{"id":"14","bookingdatetime":"10\/03\/19 @ 02:40 pm","name":"Tony ","class":"local","pickupdatetime":"10\/04\/19 @ 02:00 pm","duration":"005 days","dropdatetime":"10\/09\/19 @ 05:30 pm ","age":"21+","coverage":"inclusive","quote":"$254","status":"Confirmed"},{"id":"15","bookingdatetime":"10\/03\/19 @ 02:51 pm","name":"YA ES","class":"local","pickupdatetime":"10\/30\/19 @ 11:00 am","duration":"092 days","dropdatetime":"01\/30\/20 @ 11:00 pm ","age":"21+","coverage":"inclusive","quote":"$2376","status":"Confirmed"},{"id":"16","bookingdatetime":"11\/17\/20 @ 02:56 pm","name":"yayoi escobar","class":"local","pickupdatetime":"10\/30\/19 @ 11:00 am","duration":"092 days","dropdatetime":"01\/30\/20 @ 11:00 pm ","age":"21+","coverage":"inclusive","quote":"$0","status":"Confirmed"},{"id":"18","bookingdatetime":"10\/03\/19 @ 03:39 pm","name":"yayoi escobar","class":"local","pickupdatetime":"10\/09\/19 @ 12:30 pm","duration":"020 days","dropdatetime":"10\/29\/19 @ 08:00 pm ","age":"21+","coverage":"inclusive","quote":"$653","status":"Confirmed"},{"id":"19","bookingdatetime":"10\/03\/19 @ 03:40 pm","name":"yayoi escobar","class":"local","pickupdatetime":"10\/08\/19 @ 12:00 pm","duration":"013 days","dropdatetime":"10\/21\/19 @ 09:00 pm ","age":"21+","coverage":"inclusive","quote":"$454","status":"Confirmed"},{"id":"20","bookingdatetime":"10\/03\/19 @ 03:52 pm","name":"Daniel ","class":"travel","pickupdatetime":"10\/22\/19 @ 01:00 pm","duration":"006 days","dropdatetime":"10\/28\/19 @ 07:30 pm ","age":"21+","coverage":"inclusive","quote":"$469","status":"Unconfirmed"},{"id":"25","bookingdatetime":"10\/03\/19 @ 03:39 pm","name":"yayoi escobar","class":"local","pickupdatetime":"10\/09\/19 @ 12:30 pm","duration":"020 days","dropdatetime":"10\/29\/19 @ 08:00 pm ","age":"21+","coverage":"inclusive","quote":"$653","status":"Confirmed"}]
塞巴斯蒂安·巴尔比耶

像您这样的接缝试图$('#resdatatable').DataTable().ajax.reload();changeCity()事件上触发,但决不要在DataTable构造函数上定义ajax选项

例如来自文档。

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": "data/arrays.txt"
    } );
} );

当您使用定义一个单独的调用时$.ajax,我的猜测是您希望保留该逻辑并适应您的onChange事件,因此最好的选择是通过以下方式重写changeCity:

function changeCity()
{
    getRes(function (result) {
        var datatable = $('#resdatatable').DataTable()
        datatable.clear();
        datatable.rows.add(result);
        datatable.draw();
    });
}

请参阅这篇文章,了解如何使用新的JSON数据手动更新datatables表

API参考:

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章