jquery 数据表警告：table id=example -无法重新初始化DataTable,有关此错误的详细信息，请参阅http://datatables.net/tn/3

lndjwyie 于 2022-11-22 发布在 jQuery

关注(0)|答案(2)|浏览(376)

预期输出：
根据角色下拉选择每次需要绑定数据表网格
错误：数据表警告：table id=example -无法重新初始化DataTable。有关此错误的详细信息，请参阅http://datatables.net/tn/3
UI如下所示：

我的代码：

$(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>

jquery

来源：https://stackoverflow.com/questions/48535932/datatables-warning-table-id-example-cannot-reinitialise-datatable-for-more-i

2条答案

按热度按时间

omqzjyyz1#

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

展开查看全部

赞(0）回复(0）举报 2022-11-22

alen0pnh2#

您应该在程式码开头将 table 对象宣告为全域对象：

var table;

中的每一个
然后，您应该在创建新示例之前销毁 table 的示例：

table.destroy();

格式
然后，您应该在建立 DataTable 对象时加入 destroy 属性：

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

格式

展开查看全部

赞(0）回复(0）举报 2022-11-22

我来回答

jquery 数据表警告：table id=example -无法重新初始化DataTable,有关此错误的详细信息，请参阅http://datatables.net/tn/3

2条答案

相关问题

热门标签

最新问答