英文:
Property 'dataTableExt' does not exist on type 'JQuery<HTMLElement>' - when trying to use jQuery DataTables with TypeScript
问题
我已经准备好一个简单的 jsFiddle 示例，展示了一个带有可点击行和复选框过滤的jQuery DataTable：
当我尝试将我的代码转换为TypeScript时（这里是一个不太工作的 StackBlitz 示例），然后在VS Code中显示了2个错误：
属性 'dataTableExt' 不存在于类型 'JQuery
' 上（对于 $.fn.dataTableExt.afnFiltering.push 行）
没有匹配此调用的重载（对于 renderAvgData 调用）
我已经在GitHub和DataTable论坛上搜索过，但还没有找到解决方案。
以下是我的工作Javascript代码的副本（与 jsFiddle 中的代码相同）：
'use strict';
function renderOpenElo(data, typeStr, row, meta) {
return typeStr === 'display' ? '<SPAN CLASS="xlarge">▹</SPAN> ' + data : data;
}
function renderAvgData(data) {
return '<TABLE WIDTH=100%>' +
'<TR><TH>Average score: ' + data.avg_score + '</TH></TR>' +
'<TR><TH>Average time: ' + data.avg_time + '</TH></TR></TABLE>';
}
jQuery(function() {
var topTable = $('#topTable').DataTable({
ajax: 'https://wordsbyfarber.com/ru/top-5',
pageLength: 5,
order: [
[0, 'desc']
],
columns: [{
data: 'elo',
searchable: false,
className: 'details-control',
render: renderOpenElo
},
{
data: 'uid',
className: 'dt-right'
}
]
});
$('#topTable tbody').on('click', 'td.details-control', function() {
var span = $(this).find('span').first();
var tr = $(this).closest('tr');
var row = topTable.row(tr);
if (row.child.isShown()) {
row.child.hide();
span.html('▹');
} else {
row.child(renderAvgData(row.data())).show();
span.html('▿');
}
});
$('#below,#middle,#above').click(function() {
topTable.draw();
});
$.fn.dataTableExt.afnFiltering.push(
function(oSettings, aData, iDataIndex, row) {
if ('topTable' == oSettings.nTable.id) {
console.log(row);
if (row.uid < 10000) {
return $('#below').is(':checked');
}
if (10000 < row.uid && row.uid < 20000) {
return $('#middle').is(':checked');
}
return $('#above').is(':checked');
}
return true;
}
);
});
如果您需要进一步的帮助，请告诉我。
英文:
I have prepared a simple jsFiddle demo, which shows a jQuery DataTable with clickable rows and checkbox filtering:
When I try to convert my code to TypeScript (here a not really working StackBlitz demo), then I have 2 errors displayed in VS Code:
> Property 'dataTableExt' does not exist on type 'JQuery<HTMLElement>' (for the $.fn.dataTableExt.afnFiltering.push line)
> No overload matches this call (for the renderAvgData call)
I have searched around, on GitHub and at the DataTable forum, but hasn't been able to find a resolution for that.
Below is the copy of my working Javascript code (same as in the jsFiddle):
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-js -->
'use strict;'
function renderOpenElo(data, typeStr, row, meta) {
return typeStr === 'display' ? '<SPAN CLASS="xlarge">&rtri;</SPAN> ' + data : data;
}
function renderAvgData(data) {
return '<TABLE WIDTH=100%>' +
'<TR><TH>Average score: ' + data.avg_score + '</TH></TR>' +
'<TR><TH>Average time: ' + data.avg_time + '</TH></TR></TABLE>';
}
jQuery(function() {
var topTable = $('#topTable').DataTable({
ajax: 'https://wordsbyfarber.com/ru/top-5',
pageLength: 5,
order: [
[0, 'desc']
],
columns: [{
data: 'elo',
searchable: false,
className: 'details-control',
render: renderOpenElo
},
{
data: 'uid',
className: 'dt-right'
}
]
});
$('#topTable tbody').on('click', 'td.details-control', function() {
var span = $(this).find('span').first();
var tr = $(this).closest('tr');
var row = topTable.row(tr);
if (row.child.isShown()) {
row.child.hide();
span.html('&rtri;');
} else {
row.child(renderAvgData(row.data())).show();
span.html('&dtri;');
}
});
$('#below,#middle,#above').click(function() {
topTable.draw();
});
$.fn.dataTableExt.afnFiltering.push(
function(oSettings, aData, iDataIndex, row) {
if ('topTable' == oSettings.nTable.id) {
console.log(row);
if (row.uid < 10000) {
return $('#below').is(':checked');
}
if (10000 < row.uid && row.uid < 20000) {
return $('#middle').is(':checked');
}
return $('#above').is(':checked');
}
return true;
}
);
});
<!-- language: lang-css -->
td.details-control {
cursor: pointer;
}
span.xlarge {
font-size: x-large;
}
<!-- language: lang-html -->
<link type="text/css" rel="stylesheet" href="//cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<script src="//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<p align="center">Show user ids:
<label><input type="checkbox" id="below" checked> Below 10k </label>
<label><input type="checkbox" id="middle" checked> 10k - 20k </label>
<label><input type="checkbox" id="above" checked> Above 20k </label>
</p>
<table id="topTable" class="stripe" width=100%>
<thead>
<tr>
<th>Elo</th>
<th>User id</th>
</tr>
</thead>
<tbody></tbody>
</table>
<!-- end snippet -->
答案1
得分: 0
插件作者非常友好地回答了我在DataTables论坛中的两个问题：
- 应该使用$.fn.dataTable.ext.search进行过滤
- 在DataTables版本1.13.5中，
.show()错误消息已经解决
英文:
The plugin author has been very nice to answer both my questions in the DataTables forum:
- The $.fn.dataTable.ext.search should be used for filtering
- The
.show()error message has been resolved in DataTables version 1.13.5
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论