Question

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

我有3个必须驻留在页面上的部分视图，我总是收到这样的消息：

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

1。以下是我在部分视图中创建原始HTML表的方法，其中我有一个表的唯一标识符：

2。以下是调用视图如何请求有问题的部分视图的示例：我通过ViewModel将唯一标识符（GUID）和我的数据传递到局部视图中。所有标准的MVC类似的东西，并且工作正常。

第3。这是我的部分视图初始化DataTable ，其中razor注入到javascript中，为每个要使用的DT创建一个唯一的HTML表ID，以及一个唯一的DT全局对象变量（c @ unique），当填充将看起来像这样：c6e201ac10b4a4a6a987878c7b2390fa4。尽管DT告诉我，我不需要重新初始化任何东西。每个版本的DataTable局部视图都应该具有其所有变量（c @ unique，rows @ unique等）才是唯一的。这里设置existingData变量，它通过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 方法（使用razor），或者只是将所有内容直接放在partial的doc.ready方法中。现在工作正常！

Answer 2

我能看到的是，您并未尝试销毁现有表格。在帖子中查看以下内容：

x <- 'this|"<is>"|"<a>"|"<test>1|2|3</test>"'
str_replace_all( x, '>[^"][^<]+<', function(x) gsub("\\|", " ", x) )
[1] "this|\"<is>\"|\"<a>\"|\"<test>1 2 3</test>\""

您需要添加＆＃34; destroy＆＃34;，true。请看如下：

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

jquery数据表从局部视图填充的多个表 - ＆＃39;无法重新初始化＆＃39;错误

2 个答案: