我有一个创建数据表的函数。在页面加载时,数据表被创建并绘制。现在,当我有一个表单提交来搜索表格时,我调用相同的函数。首先我创建一个数据表的实例,然后调用清除函数,最后再调用重新创建函数。
以下是我第一次创建数据表的方式,它可以正常工作:
$(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。
这是我在控制台中看到的错误信息:
![enter image description here](https://istack.dev59.com/DFD9o.webp)
这是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>
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实例化中定义列时出现了这种情况:
"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>