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

Question

Expected output:

Based on role dropdown selection every time need to bind datatable grid

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

UI Looks like below:

My code:

$(document).ready(function() {

  $('#RoleId').change(function() {
    var RoleId = $("#RoleId").val();
    var SetData = $("#SetRoleMapping");
    var url = "/Home/GetRoleMapplingList?RoleId=" + RoleId;
    $.ajax({
      type: "GET",
      url: url,
      success: function(data) {
        var RoleMapping = JSON.parse(data);
        for (var i = 0; i < RoleMapping.length; i++) {
          var Data = "<tr class='row_" + RoleMapping[i].Id + "'>" +
            "<td>" + RoleMapping[i].Id + "</td>" +
            "<td>" + RoleMapping[i].RoleId + "</td>" +
            "<td>" + RoleMapping[i].MenuName + "</td>" +
            "<td>" + RoleMapping[i].Active + "</td>" +
            "</tr>";
          SetData.append(Data);

        }

        var table = $('#example').DataTable({
          'paging': true,
          'lengthChange': true,
          'searching': true,
          'ordering': true,
          'info': true,
          'autoWidth': true
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="~/Content/boostrap/jquery/dist/jquery.min.js"></script>
<script src="~/Content/boostrap/datatables.net/js/jquery.dataTables.min.js"></script>

<table id="example" class="display nowrap dataTable dtr-inline">
  <thead>
    <tr>
      @*
      <th><input name="select_all" value="1" id="example-select-all" type="checkbox" /></th>*@
      <th>Id</th>
      <th>Role Id</th>
      <th>Menu Name</th>
      <th>Active</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      @*
      <th>sdfsdf</th>*@
      <th>Id</th>
      <th>Role Id</th>
      <th>Menu Name</th>
      <th>Active</th>
    </tr>
  </tfoot>
  <tbody id="SetRoleMapping"></tbody>
</table>

Answer 1

Updated Code:
   $('#RoleId').change(function () {
            var table;
            var RoleId = $("#RoleId").val(); 
            var SetData = $("#SetRoleMapping").empty();
            var url = "/Home/GetRoleMapplingList?RoleId=" + RoleId;
            $.ajax({    
                type: "GET",
                url: url,
                success: function (data) {
                    var RoleMapping = JSON.parse(data);
                    for (var i = 0; i < RoleMapping.length; i++) {
                        var Data = "<tr class='row_" + RoleMapping[i].MenuId + "'>" +
                            "<td><input type='checkbox' class='chkRow' " + RoleMapping[i].IsActive + " id='chkid1'></td>" +
                             "<td>" + RoleMapping[i].MenuId + "</td>" +
                                "<td>" + RoleMapping[i].RoleId + "</td>" +
                            "<td>" + RoleMapping[i].MenuName + "</td>" +                            
                            "</tr>";
                        SetData.append(Data);

                    }
                    table.destroy();
                    table = $('#example').DataTable({
                        'destroy': true,
                        'paging': true,
                        'lengthChange': true,
                        'searching': true,
                        'ordering': true,
                        'info': true,
                        'autoWidth': true                            
                }

        });     

Answer 2

You should declare the table object as global, at the beginning of the code:

var table;

Then you should destroy the instance of table before creating a new one:

table.destroy();

Then you should add the destroy attribute when you create the DataTable object:

table = $('#example').DataTable({
  'destroy': true,
  'paging': true,
  'lengthChange': true,
  'searching': true,
  'ordering': true,
  'info': true,
  'autoWidth': true
});