jQuery数据表在重新创建数据表时给出错误:TypeError:t [c]未定义 [英] Jquery Datatable gives error when recreating datatable: TypeError: t[c] is undefined
问题描述
我有一个创建数据表的函数.在页面加载时，将创建并绘制数据表.现在，当我有一个表单提交要在表上进行搜索时，我调用了相同的函数.首先，我创建数据表的一个实例，调用clear函数，然后调用该函数以重新创建它.
I have a function that creates a datatable. On page load the datatable is created and drawn. Now, when I have a form submit to make a search on a table, I call the same function. First I make an instance of the datatable, I call the clear function then I call the function to recreate it.
这是我第一次创建数据表的方式，效果很好:
Here is how I create the datatable for the first time, which works just fine:
$(window).load(function () {
var table = UpdateTableCompany(null, null);
.....
以下是管理数据表的功能:
Here is the function which manages the datatable:
function UpdateTableCompany(val, search_field)
{
$('#tablePubDev').DataTable().clear();
var table = $('#tablePubDev').DataTable({
destroy: true,
searching: false,
"lengthMenu": [[5, 10, 15, -1], [5, 10, 15, "All"]],
"pageLength": 5,
"columnDefs": [
{
"render": function (data, type, row) {
var text = '<div class="form-group">' +
'<div class="checkbox-nice center" style="cursor: default; height:100px;">' +
'<img src="/application/assets/img/pub_devs/logos/' + row['c']['logo'] + '" style="max-height:100%; max-width: 100%;"/>' +
'</div>' +
'<div class="checkbox-nice text-center" style="cursor: default">' +
'<strong >Id: ' + pad(data, 11) + '</strong>' +
'</label>' +
'</div>' +
'</div>';
return text;
},
"targets": 0,
},
{
"render": function (data, type, row) {
var text = '<div class="form-group">' +
'<div class="checkbox-nice center" style="cursor: default; height:100px;"><p class="center" style="font-size: 150%; font-weight: bold;">' +
row['c']['descr'] +
'</p></div>' +
'</div>';
return text;
},
"targets": 1,
},
{
"render": function (data, type, row) {
var add_text1 = '';
var checked1 = '';
var add_text2 = '';
var checked2 = '';
if (data != null && data > 0) {
checked1 += 'checked="checked"';
} else
add_text1 += 'buttonDisabled ';
if (row['c']['developer'] != null && row['c']['developer'] > 0) {
checked2 += 'checked="checked"';
} else
add_text2 += 'buttonDisabled ';
var text = '<div class="form-group">' +
'<div class="checkbox-nice ' + add_text1 + '" style="cursor: default">' +
'<input type="checkbox" ' + checked1 + ' disabled="disabled" id="checkbox-1">' +
'<label for="checkbox-1">' +
'Publisher ' +
'</label>' +
'</div>' +
'<div class="checkbox-nice ' + add_text2 + '" style="cursor: default">' +
'<input type="checkbox" id="checkbox-2" ' + checked2 + ' disabled="disabled">' +
'<label for="checkbox-2">' +
'Developer' +
'</label>' +
'</div>' +
'</div>';
return text;
},
"targets": 3,
},
{
"render": function (data, type, row) {
var text = '<td style="width: 20%;">' +
//'<a href="#" class="table-link">' +
//'<span class="fa-stack">' +
//'<i class="fa fa-square fa-stack-2x"></i>' +
//'<i class="fa fa-search-plus fa-stack-1x fa-inverse"></i>' +
//'</span>' +
//'</a>' +
'<a href="#" class="table-link updatePubDev" data-modal="modal-11">' +
'<span class="fa-stack">' +
'<i class="fa fa-square fa-stack-2x"></i>' +
'<i class="fa fa-pencil fa-stack-1x fa-inverse"></i>' +
'</span>' +
'</a>' +
'<span class="fa-stack table-link danger deletePubDev">' +
'<i class="fa fa-square fa-stack-2x"></i>' +
'<i class="fa fa-trash-o fa-stack-1x fa-inverse"></i>' +
'</span>' +
'</td>';
return text;
},
"targets": 4,
}
],
"columns": [
{"data": "c.idpubdev", "name": "c.idpubdev"},
{"data": "c.descr", "name": "c.descr"},
{"data": "c.date_founded", "name": "c.date_founded"},
{"data": "c.publisher", "name": "c.publisher"},
{"data": "c.date_founded", "name": "c.date_founded"},
{"data": "c.developer", "name": "c.developer", "visible": false, "searchable": false},
{"data": "c.logo", "name": "c.logo", "visible": false, "searchable": false},
],
"order": [[0, false], [1, 'asc'], [2, 'asc'], [3, 'asc']],
"displayLength": 3,
serverSide: true,
"ajax":
{
"url": "/pubdev/search/",
"type": "POST",
"data": function (d) {
if (val)
d.val = val;
if (search_field)
d.search_field = search_field;
}
},
error: function (request, status, error) {
alert('Unable to update table contents');
console.log(request);
console.log(status);
console.log(error);
},
});
return table;
}
这里是执行搜索功能的表单的提交:
Here instead is the submit of the form which executes the search function:
$("#search_form").submit(function (e) {
e.preventDefault();
var search_key = $.trim($('#val').val());
var search_field = 'c.descr like ';
table = $('#tablePubDev').DataTable();
table.clear();
table = UpdateTableCompany(search_field, search_key);
});
我当前正在使用jQuery版本v1.10.2的缩小格式 数据表的版本为1.10.4
I am currently using the minified format of jquery version v1.10.2 The version of datatable is 1.10.4
这是我在控制台中遇到的错误
This is the error I get in the console
我尝试了一个实验:我没有准备好将数据表加载到文档中，所以我进行了搜索提交以加载数据表，它起作用了！当然，如果我进行第二次搜索，则会发生相同的错误，因此问题与重新创建数据表有关.所有的后端代码(php)都能正常工作，并给出所需的结果.
I tried an experiment: I did not load the datatable in document ready, so I made a search submit to load the datatable , and it worked! Of course if I do a second search then the same error occurs, so the problem has to do with the recreation of datatable. All the back end code (php) works correctly and gives the desired results.
这是html中的表格
<div class="main-box no-header clearfix">
<div class="main-box-body clearfix">
<div class="table-responsive">
<table id="tablePubDev" class="table user-list table-hover">
<thead>
<tr>
<th>Company</th>
<th>Name</th>
<th><span>Listed Games</th>
<th>Type</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
我尝试使用数据表的最小化版本(v 1.10.12)，但仍然出现错误，但现在却显示了他的错误:
I have tried using the unminified version of datatable (v 1.10.12) and I got still and error but now it says his:
TypeError:headerCells [i]未定义
TypeError: headerCells[i] is undefined
headerCells[i].style.width = column.sWidthOrig !== null && column.sWidthOrig !==...
// Clone the table header and footer - we can't use the header / footer
// from the cloned table, since if scrolling is active, the table's
// real header and footer are contained in different table tags
tmpTable.find('thead, tfoot').remove();
tmpTable
.append( $(oSettings.nTHead).clone() )
.append( $(oSettings.nTFoot).clone() );
// Remove any assigned widths from the footer (from scrolling)
tmpTable.find('tfoot th, tfoot td').css('width', '');
// Apply custom sizing to the cloned header
**headerCells = _fnGetUniqueThs( oSettings, tmpTable.find('thead')[0]** ); <-- This is where the error occurs <--
for ( i=0 ; i<visibleColumns.length ; i++ ) {
column = columns[ visibleColumns[i] ];
headerCells[i].style.width = column.sWidthOrig !== null && column.sWidthOrig !== '' ?
_fnStringToCss( column.sWidthOrig ) :
'';
// For scrollX we need to force the column width otherwise the
// browser will collapse it. If this width is smaller than the
// width the column requires, then it will have no effect
if ( column.sWidthOrig && scrollX ) {
$( headerCells[i] ).append( $('<div/>').css( {
width: column.sWidthOrig,
margin: 0,
padding: 0,
border: 0,
height: 1
} ) );
}
}
// Find the widest cell for each column and put it
更新:
我想我知道为什么会这样，尽管我仍然需要找到解决办法.碰巧的是，当我在Datatable实例中定义列时:
I think I know why this is happening, although I still need to find a fix for this. It just so happens that When I define my columns in the Datatable instantiation:
"columns": [
{"data": "c.idpubdev", "name": "c.idpubdev"},
{"data": "c.descr", "name": "c.descr"},
{"data": "c.date_founded", "name": "c.date_founded"},
{"data": "c.publisher", "name": "c.publisher"},
{"data": "c.date_founded", "name": "c.date_founded"},
{"data": "c.developer", "name": "c.developer", "visible": false, "searchable": false},
{"data": "c.logo", "name": "c.logo", "visible": false, "searchable": false},
这些内容必须与我在html页面中包含的表格标题一样多
These need to be exactly as many as the table headers that I included in my html page
<thead>
<tr>
<th>Company</th>
<th>Name</th>
<th><span>Listed Games</th>
<th>Type</th>
<th>Actions</th>
</tr>
</thead>
在这种情况下，我有5个表头和7个数据列定义(两个具有visible = false).当我在一个较旧的项目中使用它们时，我所要做的就是将"visible"属性设置为false，这样就不会将它们映射到表头，但是在这里似乎不起作用...为什么你认为那会发生吗?我想办法解决这个问题吗?
In this case I have 5 table headers and 7 data column definitions (two have visible = false). When I used them in an older project, all I had to do was set the "visible" property to false so that they wouldn't be mapped to a table header, but here it doesn't seem to work... Why do you think that would happen? I sthere a way to work around it?
推荐答案
好，我实际上解决了这个问题！因此，datatable.js插件中存在一个错误(功能??).当尝试自动调整列的宽度时，它需要具有与定义的数据列一样多的标题.因此，如果您有7个列定义并且仅定义了5个标头，则代码将失败，并出现空指针异常.解决此问题的一种方法是将autowidth参数设置为false(默认情况下为true).
Ok, I actually solved this problem! So there is a bug (feature ?? ) in the datatable.js plugin. When it tries to autowidth the columns, it needs to have as many headers as there are data columns defined. So if you have 7 column definitions and you have only 5 headers defined, the code will fail with a null pointer exception. One way to work around this is to set the autowidth parameter to false (by default it is true).
function UpdateTableCompany(val, search_field)
{
var table = $('#tablePubDev').DataTable({
'destroy': true,
searching: false,
'info': false,
paging: true,
retrieve: false,
processing: true,
"autoWidth": false, // This parameter must be set to false
......
通过这样做，您避免了对实际上试图执行自动宽度的functon的调用.因此，通过避免数据表代码的这一部分，您将不会遇到所描述的错误.
By doing this you avoid the call to the functon which actually tries to do the autowidth. So by avoiding that part of the datatable code, you wont have the error described.
这篇关于jQuery数据表在重新创建数据表时给出错误:TypeError:t [c]未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
