0x800a138f - Ошибка выполнения JavaScript: невозможно получить свойство «mData» неопределенной или нулевой ссылки

Question

Я использую Datatables версии 1.10.6. В jquery.dataTables.js я получаю выше ошибки.

0x800a138f - Ошибка выполнения JavaScript: невозможно получить свойство «mData» неопределенной или нулевой ссылки.

$.each(_fnGetRowElements(oSettings, rowOne[0]).cells, function (i, cell) { 
        var col = oSettings.aoColumns[i]; 

        if (col.mData === i) {// this line gives error 
         var sort = a(cell, 'sort') || a(cell, 'order'); 
         var filter = a(cell, 'filter') || a(cell, 'search'); 

         if (sort !== null || filter !== null) { 
          col.mData = { 
           _:  i+'.display', 
           sort: sort !== null ? i+'.@data-'+sort : undefined, 
           type: sort !== null ? i+'.@data-'+sort : undefined, 
           filter: filter !== null ? i+'.@data-'+filter : undefined 
          }; 

          _fnColumnOptions(oSettings, i); 
         } 
        } 
       }); 
      } 

В MVC я использую:

<script type="text/javascript"> 
    $(document).ready(function() { 
     // Setup - add a text input to each footer cell 

     $('#example tfoot th').each(function() { 
      var title = $('#example thead th').eq($(this).index()).text(); 
      $(this).html('<input type="text" placeholder="Search ' + title + '" />'); 

     }); 



     // DataTable 

     var table = $('#example').DataTable(); 
     alert(table); 

     // Apply the search 

     table.columns().every(function() { 
      var that = this; 
      $('input', this.footer()).on('keyup change', function() { 
       that 
        .search(this.value) 
        .draw(); 

      }); 

     }); 

    }); 
</script> 

<table class="display" id="example" cellspacing="0"> 
             <thead> 
              <tr> 
               <th>First Name</th> 
               <th>Last Name</th> 
               <th>Email</th> 
               <th>Employee Id</th> 
               <th>Active</th> 
               <th>SFDC</th> 
               <th>System User</th> 
              </tr> 
             </thead> 

             <tfoot> 
              <tr> 
               <th>First Name</th> 
               <th>Last Name</th> 
               <th>Email</th> 
               <th>Employee Id</th> 
               <th>Active</th> 
               <th>SFDC</th> 
               <th>System User</th> 
              </tr> 

             </tfoot> 

             <tbody> 

              @foreach (var item in Model) 
              { 
               <tr> 
                <td valign="middle" align="center"> 
                 @Html.DisplayFor(modelitem => item.FirstName) 
                </td> 
                <td valign="middle" align="center"> 
                 @Html.DisplayFor(modelitem => item.LastName) 
                </td> 

                <td valign="middle" align="center"> 
                 @Html.DisplayFor(modelitem => item.EmailAddress) 
                </td> 
                <td valign="middle" align="center"> 
                 @Html.DisplayFor(modelitem => item.EmployeeId) 
                </td> 
                <td valign="middle" align="center"> 
                 @Html.DisplayFor(modelitem => item.IsActive, true) 
                </td> 
                <td valign="middle" align="center"> 
                 @Html.DisplayFor(modelitem => item.IsSFDC, true) 
                </td> 
                <td valign="middle" align="center"> 
                 @Html.DisplayFor(modelitem => item.IsSystemUser, true) 
                </td> 
                <td valign="middle" align="center"> 
                 @Html.ActionLink(" ", "Edit", new { id = item.UserId }, new { @class = "edit_btn", title = "Edit" }) 
                 @Html.ActionLink(" ", "Details", new { id = item.UserId }, new { @class = "details", title = "Details" }) 
                 @Html.ActionLink(" ", "Delete", new { id = item.UserId }, new { @class = "delete", title = "Delete" }) 
                </td> 
               </tr> 
              } 

              </tbody> 
         </table> 

Answer 1

Я добавил дополнительный <th></th> восемь Колонка отсутствует

<th>First Name</th> 
<th>Last Name</th> 
<th>Email</th> 
<th>Employee Id</th> 
<th>Active</th> 
<th>SFDC</th> 
<th>System User</th> 
<th></th> 

Answer 2

Несоответствие количества заголовков столбцов вызывает этот вопрос, там должно быть равным числу столбцов заголовка и столбцов строк.

Answer 3

Я столкнулся с такой же ситуацией. Для моего случая, из-за атрибута runat = "server" в теге таблицы.

После удаления runat = "server" из объявления таблицы, он работал хорошо.

Answer 4

Когда я получил эту ошибку я попытался вышеуказанные решения и после просмотра исходного кода на веб-странице, я увидел, что весь внутренний содержимое таблицы был в <tbody> вместо разделены на <thead> и <tbody>. Итак, убедитесь, что вы следующий с равным количеством заголовков столбцов в виде ячеек в каждой строке, как упоминалось выше:

<table> 
    <thead> 
     <tr> 
      <th></th> 
      ... 
     <tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td></td> 
      ... 
     </tr> 
    </tbody> 
</table> 

После того как я это сделал, это сработало!

Answer 5

Это также может произойти, если действие, связанное с селектором JQuery, не может успешно выполнить для элемента конкретного документа. Таким образом, вы либо изменяете идентификатор элемента, либо исправляете JavaScript-код действия.