工具提示不适用于可数据对象的分页。
工具提示不适用于可数据对象的分页。
提问于 2016-11-16 16:00:35
如何在datatable插件中使用分页时显示工具提示？当列中的文本太长时，我使用与数据相关的插件protip来显示工具提示。工具提示插件已经与以下代码片段一起工作：
//Datatable Setup
jQuery(document).ready(function($) {
var table = $('#irp-table.raab').DataTable({
"columnDefs": [
{ visible: false, targets: 2 },
{ className: 'mdl-data-table__cell--non-numeric', targets: [0, 1]}
],
"order": [[ 0, 'asc' ]],
"displayLength": 25,
"drawCallback": function ( settings ) {
var api = this.api();
var rows = api.rows( {page:'current'} ).nodes();
var last=null;
api.column(2, {page:'current'} ).data().each( function ( group, i ) {
if ( last !== group ) {
$(rows).eq( i ).before(
'<tr class="group"><td colspan="3">'+group+'</td></tr>'
);
last = group;
}
} );
}
} );
//Initialize ToolTip
jQuery(document).ready(function($) {
$.protip();
});
//ToolTip hover behaviour
jQuery(document).ready(function($) {
$('td').bind('mouseenter', function () {
var $this = $(this);
if (this.offsetWidth < this.scrollWidth) {
var text = $this.text();
$this.attr("data-pt-title", text);
$this.protipShow()
}
}).mouseenter();
});但是，对于我在datatable上使用分页的情况，它只在第一个站点上工作，然后导航到另一个站点。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-11-16 16:11:37
解决方案
每次drawCallback重绘表时，您都需要使用DataTables来初始化工具提示。这是需要的，因为在显示第一个页面时，除了第一个页面之外的页面的TR和TD元素不存在于DOM中。
另外，不需要调用mouseenter()。
例如：
"drawCallback": function ( settings ) {
var api = this.api();
// ... skipped ...
$.protip();
$('td', api.table().container()).on('mouseenter', function () {
var $this = $(this);
if (this.offsetWidth < this.scrollWidth) {
var text = $this.text();
$this.attr("data-pt-title", text);
$this.protipShow();
}
});
}链接
有关更多示例和详细信息，请参见jQuery DataTables:自定义控件不适用于第二页和第二页之后。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40636645
复制相关文章
相似问题
腾讯云开发者
