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',
  });
});

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

Answer 1

这是一个快速汇总的JSFiddle / snippet，请告诉我这是否有帮助：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>

警告：无法重新初始化数据表问题

1 个答案: