jQuery Datatables从局部视图填充多个表-“无法重新初始化”错误

Question

我有一个MVC项目，正在使用jquery DataTables 1.10.2。 在项目页面中，我经常在多个地方需要重用部分视图，该视图包含一个独立的jquery DataTable实例，初始化和处理程序。 在构建局部视图时，我使用GUID来唯一命名每个DT实例，包括所有其他按钮等，因此每个DT实例都应该能够存在于自己的世界中，而不关心周围的世界。 或因此，我想...我已经在这个问题上读了很多书，而且似乎无法确定为什么会这样。 从我所做的事情中，我不相信我正在尝试更改/重新初始化现有的DT实例。 当我只有这些DT部分视图中的一个时，一切都很好。 有什么想法吗？

我有3个必须位于页面上的局部视图，而且我总是收到以下消息：

而且，只有最后一个实例实际显示任何记录，是应显示的记录的3倍，而其他所有记录都为空（甚至没有数据消息）。

1.这是在局部视图中创建原始HTML表的方式 ，在该视图中 ，该表具有唯一的标识符：

2.这是一个示例，其中调用视图如何请求有问题的局部视图 ：我将唯一标识符（GUID）以及数据通过ViewModel传递给局部视图。 所有标准的MVC都差不多，并且工作正常。

3.这是DataTable的局部视图初始化，其中的剃须刀已注入javascript，为每个DT创建了一个唯一的HTML表ID，并使用了一个唯一的DT全局对象变量（c @ unique），在填充时，它看起来像这样：c6e201ac10b4a4a6a987878c7b2390fa4。 尽管DT告诉我，我不需要重新初始化任何内容。 每个版本的DataTable部分视图都应具有唯一的所有变量（c @ unique，rows @ unique等）。 此处设置了现存的数据变量，该变量通过ViewModel传入：

        c@(unique) = $('#@(unique)phones').DataTable(
{
    "data" : existingData
, "responsive": true
, "searching" : false        
, "paging": false
, "order": 0
, "createdRow" : function (row, data, index){
    $(row).attr("data-id", index);
    rows@(unique)++;
}
, "columns": [
    { "data": "Id"
       , "visible" : false
    }
  , { "data": "PhoneTypeID", "title": "Phone Type",
      render : function (data, type, row, meta) {
          // Renders combination of select element, with exisitng value correctly selected and validation control
          var $clone = $select.clone();
          $clone.attr('name', 'Phones[' + rows@(unique) + '].PhoneTypeID' ); // changing the phone collection name for serialization
          $clone.find('option[value="' + data + '"]').attr('selected','selected'); // attempting to match existing data

          $clone.attr('data-val', 'true' ); // adding validation
          $clone.attr('data-val-required', 'Phone Type Required' ); // adding error message
          var validation = ' <div><span class="field-validation-valid text-danger" data-valmsg-for="Phones[' + rows@(unique) + '].PhoneTypeID" data-valmsg-replace="true" </span></div>';

          var selectctl =  $clone.wrap('<div></div>').parent().html();

          // combines both the select control and the validation span element
          return selectctl.concat(validation);
      }}
  , { "data": "PhoneNumber", "title": "Phone Number",
      render : function (data, type, row) {
          // Renders combination of phone number text box, with exisitng value correctly selected and validation control
          var phoneDetail = '<div><input class="form-group" name="Phones[' + rows@(unique) + '].PhoneNumber" placeholder="Number" type="tel" pattern="\d{3}[\-]\d{3}[\-]\d{4}"  value="' + data + '"'
               + ' data-val="true" data-val-required="Phone Required" />'
               + ' <input type="hidden" name="Phones[' + rows@(unique) + '].Id" value="' + row["Id"] + '" />'
               + ' <span class="field-validation-valid text-danger" data-valmsg-for="Phones[' + rows@(unique) + '].PhoneNumber" data-valmsg-replace="true" /></div>';
          return phoneDetail;
      }}
  , { "data" : "Id",
      render :  function (data,type,row,meta){
          var deleteBtn = '<a class="btn btn-warning removeSelected" href="#">Delete</a>';
          return deleteBtn;
      }
  }
]
});

我正在渲染一些列，以具有一个选择元素（PhoneTypeId），一个文本框（PhoneNumber）和一个用于删除的按钮。 select元素是使用一些代码创建的，该代码创建了一个$ select元素（此处未包括），然后将其克隆到呈现列中以匹配任何现有数据。 我所有的元素名称都使用这种表示法（SomeName [index] .PropertyName），因此序列化程序将了解该页面何时发布到我的收藏夹等。

这是一个看起来像的工作示例 ，包括当选择该行并显示删除按钮时。 尚未完全样式化，因为我似乎无法在页面上超过1个！ 任何帮助表示赞赏！

Answer 1

代码本身不是问题。 为了使doc.ready事件保持整洁，我使用了对LoadDataTable（）方法的调用。 当加载了两个或多个这些局部视图并最终调用doc.ready时，将有多个LoadDataTable方法，每个方法都指向一个DataTable的现有实例。 这就是为什么我不断收到该初始化错误的原因。 我的解决方案：要么创建一个动态命名的LoadDataTable方法（使用剃刀），要么将所有内容直接放入该部分的doc.ready方法中。 现在工作正常！

Answer 2

我可以看到的是您并没有在破坏现有的表。 在您的帖子中查看以下内容：

c@(unique) = $('#@(unique)phones').DataTable(
{
    "data" : existingData
, "responsive": true
, "searching" : false        
, "paging": false
, "order": 0
, "createdRow" : function (row, data, index){
    $(row).attr("data-id", index);
    rows@(unique)++;
}
, "columns": [
    { "data": "Id"
       , "visible" : false
    }
  , { "data": "PhoneTypeID", "title": "Phone Type",
      render : function (data, type, row, meta) {
          // Renders combination of select element, with exisitng value correctly selected and validation control
          var $clone = $select.clone();
          $clone.attr('name', 'Phones[' + rows@(unique) + '].PhoneTypeID' ); // changing the phone collection name for serialization
          $clone.find('option[value="' + data + '"]').attr('selected','selected'); // attempting to match existing data

          $clone.attr('data-val', 'true' ); // adding validation
          $clone.attr('data-val-required', 'Phone Type Required' ); // adding error message
          var validation = ' <div><span class="field-validation-valid text-danger" data-valmsg-for="Phones[' + rows@(unique) + '].PhoneTypeID" data-valmsg-replace="true" </span></div>';

          var selectctl =  $clone.wrap('<div></div>').parent().html();

          // combines both the select control and the validation span element
          return selectctl.concat(validation);
      }}
  , { "data": "PhoneNumber", "title": "Phone Number",
      render : function (data, type, row) {
          // Renders combination of phone number text box, with exisitng value correctly selected and validation control
          var phoneDetail = '<div><input class="form-group" name="Phones[' + rows@(unique) + '].PhoneNumber" placeholder="Number" type="tel" pattern="\d{3}[\-]\d{3}[\-]\d{4}"  value="' + data + '"'
               + ' data-val="true" data-val-required="Phone Required" />'
               + ' <input type="hidden" name="Phones[' + rows@(unique) + '].Id" value="' + row["Id"] + '" />'
               + ' <span class="field-validation-valid text-danger" data-valmsg-for="Phones[' + rows@(unique) + '].PhoneNumber" data-valmsg-replace="true" /></div>';
          return phoneDetail;
      }}
  , { "data" : "Id",
      render :  function (data,type,row,meta){
          var deleteBtn = '<a class="btn btn-warning removeSelected" href="#">Delete</a>';
          return deleteBtn;
      }
  }
]
});

您需要添加“ destroy”，为true。 使其如下所示：

c@(unique) = $('#@(unique)phones').DataTable(
{
    "destroy" : true
    "data" : existingData
, "responsive": true
, "searching" : false        
, "paging": false
, "order": 0
, "createdRow" : function (row, data, index){
    $(row).attr("data-id", index);
    rows@(unique)++;
}
, "columns": [
    { "data": "Id"
       , "visible" : false
    }
  , { "data": "PhoneTypeID", "title": "Phone Type",
      render : function (data, type, row, meta) {
          // Renders combination of select element, with exisitng value correctly selected and validation control
          var $clone = $select.clone();
          $clone.attr('name', 'Phones[' + rows@(unique) + '].PhoneTypeID' ); // changing the phone collection name for serialization
          $clone.find('option[value="' + data + '"]').attr('selected','selected'); // attempting to match existing data

          $clone.attr('data-val', 'true' ); // adding validation
          $clone.attr('data-val-required', 'Phone Type Required' ); // adding error message
          var validation = ' <div><span class="field-validation-valid text-danger" data-valmsg-for="Phones[' + rows@(unique) + '].PhoneTypeID" data-valmsg-replace="true" </span></div>';

          var selectctl =  $clone.wrap('<div></div>').parent().html();

          // combines both the select control and the validation span element
          return selectctl.concat(validation);
      }}
  , { "data": "PhoneNumber", "title": "Phone Number",
      render : function (data, type, row) {
          // Renders combination of phone number text box, with exisitng value correctly selected and validation control
          var phoneDetail = '<div><input class="form-group" name="Phones[' + rows@(unique) + '].PhoneNumber" placeholder="Number" type="tel" pattern="\d{3}[\-]\d{3}[\-]\d{4}"  value="' + data + '"'
               + ' data-val="true" data-val-required="Phone Required" />'
               + ' <input type="hidden" name="Phones[' + rows@(unique) + '].Id" value="' + row["Id"] + '" />'
               + ' <span class="field-validation-valid text-danger" data-valmsg-for="Phones[' + rows@(unique) + '].PhoneNumber" data-valmsg-replace="true" /></div>';
          return phoneDetail;
      }}
  , { "data" : "Id",
      render :  function (data,type,row,meta){
          var deleteBtn = '<a class="btn btn-warning removeSelected" href="#">Delete</a>';
          return deleteBtn;
      }
  }
]
});