javascript - 警告 : Cannot reinitialise Datatable issue

Question

我使用 Jquery Datatable 来渲染表格。默认情况下，页面不会显示任何表格，并且页面上有一个搜索框，输入值后，它将调用数据库并根据数据库的响应呈现数据表。因此，现在一旦呈现数据表，如果我在搜索框中输入新值并调用要呈现的数据表，则会出现上述错误。我尝试了 bdestroy 和重绘表格，但似乎没有任何效果。

$(document).ready(function() {
  var resultArray = [
    ["290013", "TEST OF ENSEMBLE", "11-25-2016", "", "", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
    ["290015", "XXX5", "10-19-2016", "test", "$33.00", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "2002", "XXX5", "XXX5", "XXX5", "", "1864", "2017", "VERSION", "23004746", "XXX5", "", "One Time", "", "", "", "", "", "", "21004482", "9189", "Feature Set", "20003880", "XXX5", "XXX5", "BASE", "19-APR-2017", "04-18-2017", "3877", "", ""],
    ["290015", "XXX5", "10-19-2016", "test", "$33.00", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "", "", "", "", "", "1865", "Deluxe", "EDITION", "", "", "", "", "", "", "", "", "", "", "", "9190", "Charge", "", "", "", "", "", "", "", "", ""]
  ];

  console.log(JSON.stringify(resultArray));
  var table = $('#example').DataTable({
    columns: [{
      title: 'Item Master Number',
      name: 'ItemMasterNumber'
    }, {
      title: 'Description',
      name: 'Description'
    }, {
      title: 'First Processing Date',
      name: 'FirstProcessingDate'
    }, {
      title: 'Alias',
      name: 'Alias'
    }, {
      title: 'Master Price',
      name: 'MasterPrice'
    }, {
      title: 'Product Id',
      name: 'ProductId'
    }, {
      title: 'Product Description',
      name: 'ProductDescription'
    }, {
      title: 'Feature Set#',
      name: 'FeatureSetId'
    }, {
      title: 'Feature Set Code',
      name: 'FeatureSetCode'
    }, {
      title: 'Feature Set Name',
      name: 'FeatureSetName'
    }, {
      title: 'Feature Set Description',
      name: 'Feature Set Description'
    }, {
      title: 'Enablement Type',
      name: 'Enablement Type'
    }, {
      title: 'Feature Id',
      name: 'FeatureId'
    }, {
      title: 'Attribute Name',
      name: 'AttributeName'
    }, {
      title: 'Attribute Value',
      name: 'AttributeValue'
    }],
    data: resultArray,
    rowsGroup: [
      // Always the array (!) of the column-selectors in specified
      // order to which rows groupping is applied.
      // (column-selector could be any of specified in:
      // https://datatables.net/reference/type/column-selector)
      'ItemMasterNumber:name', 'Description:name', 'FirstProcessingDate:name', 'Alias:name', 'MasterPrice:name',
      'ProductId:name',
      'ProductDescription:name',
      'FeatureSetId:name',
      'FeatureSetCode:name'
    ],
    pageLength: '20',
  });
});

每次在搜索框中输入值并单击旁边的按钮时，我都会调用上面的代码。我想要的只是在数据表上显示新数据。我该如何解决这个错误。

Answer 1

这是我快速拼凑的 JSFiddle/片段，请告诉我这是否有帮助: https://jsfiddle.net/p9pot11h/5/

var dataTable_ = null;

var resultArray = [
  ["290013", "TEST OF ENSEMBLE", "11-25-2016", "", "", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
  ["290015", "XXX5", "10-19-2016", "test", "$33.00", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "2002", "XXX5", "XXX5", "XXX5", "", "1864", "2017", "VERSION", "23004746", "XXX5", "", "One Time", "", "", "", "", "", "", "21004482", "9189", "Feature Set", "20003880", "XXX5", "XXX5", "BASE", "19-APR-2017", "04-18-2017", "3877", "", ""],
  ["290015", "XXX5", "10-19-2016", "test", "$33.00", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "", "", "", "", "", "1865", "Deluxe", "EDITION", "", "", "", "", "", "", "", "", "", "", "", "9190", "Charge", "", "", "", "", "", "", "", "", ""]
];

var resultArray2 = [
  ["290013", "TEST OF ENSEMBLE", "11-25-2016", "", "", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""]
];

$(document).ready(function() {

  //console.log(JSON.stringify(resultArray));
  dataTable_ = $('#example').DataTable({
    columns: [{
      title: 'Item Master Number',
      name: 'ItemMasterNumber'
    }, {
      title: 'Description',
      name: 'Description'
    }, {
      title: 'First Processing Date',
      name: 'FirstProcessingDate'
    }, {
      title: 'Alias',
      name: 'Alias'
    }, {
      title: 'Master Price',
      name: 'MasterPrice'
    }, {
      title: 'Product Id',
      name: 'ProductId'
    }, {
      title: 'Product Description',
      name: 'ProductDescription'
    }, {
      title: 'Feature Set#',
      name: 'FeatureSetId'
    }, {
      title: 'Feature Set Code',
      name: 'FeatureSetCode'
    }, {
      title: 'Feature Set Name',
      name: 'FeatureSetName'
    }, {
      title: 'Feature Set Description',
      name: 'Feature Set Description'
    }, {
      title: 'Enablement Type',
      name: 'Enablement Type'
    }, {
      title: 'Feature Id',
      name: 'FeatureId'
    }, {
      title: 'Attribute Name',
      name: 'AttributeName'
    }, {
      title: 'Attribute Value',
      name: 'AttributeValue'
    }],
    data: resultArray,
    rowsGroup: [
      // Always the array (!) of the column-selectors in specified
      // order to which rows groupping is applied.
      // (column-selector could be any of specified in:
      // https://datatables.net/reference/type/column-selector)
      'ItemMasterNumber:name', 'Description:name', 'FirstProcessingDate:name', 'Alias:name', 'MasterPrice:name',
      'ProductId:name',
      'ProductDescription:name',
      'FeatureSetId:name',
      'FeatureSetCode:name'
    ],
    pageLength: '20',
  });

  $('#search-button').on('click', function() {
    var data = resultArray2;
    var dataToSearch = $('#search').val();
    if (dataToSearch == '') {
      data = [];
    }
    // AJAX CALL TO GET RESULTS HERE

    // SUCCESS FUNCTION TO CALL INSIDE AJAX SUCCESS
    rePopulateTable(data);
  });

});

var rePopulateTable = function(data) {
  dataTable_.clear();
  dataTable_.rows.add(data);
  dataTable_.draw();
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet" />

<body>
  <input type="search" id="search" placeholder="Search" />
  <input type="button" id="search-button" value="Search DB" />
  <br/>
  <br/>
  <br/>
  <table id="example">

  </table>
</body>