0
我有一個創建數據表的函數。在頁面加載時，創建並繪製數據表。現在，當我有一個表單提交在桌子上進行搜索時，我會調用相同的函數。首先我創建一個數據表的實例，我調用clear函數，然後調用函數重新創建它。Jquery Datatable在重新創建數據表時出現錯誤：TypeError：t [c]未定義
這裏是我創建的第一次的數據表，它工作得很好：
$(window).load(function() {
var table = UpdateTableCompany(null, null);
.....
下面是函數其管理數據表：
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;
}
這裏取而代之的是的提交執行搜索功能的表單：
$("#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的的 DataTable的版本是1.10.4
這是我在控制檯中看到 
我嘗試過的實驗錯誤：我沒有加載在文件準備的數據表，所以我做了一個搜索提交加載數據表，它的工作！當然，如果我再次搜索，則會發生相同的錯誤，所以問題與數據表的重新創建有關。所有後端代碼（php）都能正常工作，並提供所需的結果。
這裏是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>我一直在使用的unminified版本試圖數據表（V 1.10.12）和我仍然和錯誤，但現在說他的：
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
UPDATE：
我想我知道爲什麼會發生這種情況，儘管我仍然需要爲此找到一個解決方案。碰巧的是，當我在DataTable中實例化定義我的專欄：
"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頁面的表頭
<thead>
<tr>
<th>Company</th>
<th>Name</th>
<th><span>Listed Games</th>
<th>Type</th>
<th>Actions</th>
</tr>
</thead>在這種情況下，我有5個表頭和7個數據列定義（兩個可見= false）。當我在一個較舊的項目中使用它們時，我所要做的就是將「可見」屬性設置爲false，以便它們不會映射到表頭，但在這裏它似乎不起作用......爲什麼你認爲會發生？我有辦法解決它嗎？
嗯，我想我在後端使用PHP，但我覺得這個問題不是用php做的，而是在jQuery或數據表插件 – Salvo
任何人，請幫助。我已經把所有我認爲可以使用的東西。 – Salvo