DataTables中分页按钮的工具提示

我有一个数据表，我必须在每一行和分页按钮上显示工具提示。 我已经在需要的地方实现了行的工具提示选项，但是无法弄清楚我们如何为数据表中的分页按钮（上一个和下一个按钮），搜索（文本框）和排序（下拉列表）等控件设置工具提示。

HTML：

 
 
 
 
Name
 
Position
 
Office
 
Age
 
Start date
 
Salary
 
 
 
 
 
Tiger Nixon
 
System Architect
 
Edinburgh
 
61
 
2011/04/25
 
$320,800
 
 
 
Garrett Winters
 
Accountant
 
Tokyo
 
63
 
2011/07/25
 
$170,750
 
 
 
Ashton Cox
 
Junior Technical Author
 
San Francisco
 
66
 
2009/01/12
 
$86,000
 
 
 
Cedric Kelly
 
Senior Javascript Developer
 
Edinburgh
 
22
 
2012/03/29
 
$433,060
 
 
 
Airi Satou
 
Accountant
 
Tokyo
 
33
 
2008/11/28
 
$162,700
 
 
 
Brielle Williamson
 
Integration Specialist
 
New York
 
61
 
2012/12/02
 
$372,000
 
 
 
Herrod Chandler
 
Sales Assistant
 
San Francisco
 
59
 
2012/08/06
 
$137,500
 
 
 
Rhona Davidson
 
Integration Specialist
 
Tokyo
 
55
 
2010/10/14
 
$327,900
 
 
 
Colleen Hurst
 
Javascript Developer
 
San Francisco
 
39
 
2009/09/15
 
$205,500
 
 
 
Sonya Frost
 
Software Engineer
 
Edinburgh
 
23
 
2008/12/13
 
$103,600
 
 
 
Jena Gaines
 
Office Manager
 
London
 
30
 
2008/12/19
 
$90,560
 
 
 
Quinn Flynn
 
Support Lead
 
Edinburgh
 
22
 
2013/03/03
 
$342,000
 
 
 
Charde Marshall
 
Regional Director
 
San Francisco
 
36
 
2008/10/16
 
$470,600
 
 
 
  

JS：

 $(document).ready(function() { var table = $('#example').DataTable(); $('#example tbody').on( 'click', 'tr', function () { if ( $(this).hasClass('selected') ) { $(this).removeClass('selected'); } else { table.$('tr.selected').removeClass('selected'); $(this).addClass('selected'); } }); $('#example').dataTable({ bJQueryUI: true, retrieve: true, "sPaginationType": "full_numbers"}).makeEditable({"aoColumns": [ { cssclass: "required" }, { cssclass: "required" }, { indicator: 'Saving...', tooltip: 'Click to edit', //tooltip for row type: 'text', submit:'Save' }, { indicator: 'Saving...', tooltip: 'Click to enter age', //tooltip for row loadtext: 'loading...', type: 'select', onblur: 'submit', data: "{'':'Select', 'A':60,'B':12,'C':23,'D':25,'E':65}" }, { indicator: 'Saving...', tooltip: 'Click to select', //tooltip for row loadtext: 'loading...', type: 'select', onblur: 'submit', data: "{'':'Select...', 'A':'A','B':'B','C':'C'}" }, { cssclass: "required" } ] }); }); 

这是JSFiddle的相同内容。 任何帮助，将不胜感激。

Answer 1

通过工具提示，我猜你的意思是头衔？ 出于某些特殊原因，这不是本机API的一部分。 在我看来，在language结构中包含title / tooltips-options是显而易见的…

 $('.paginate_button').each(function() { var text = $(this).text(), title = isNaN(text) ? text+' page' : 'Page '+text; $(this).attr('title', title); }); 

将在分页按钮上设置title ，如“上一页”，“第3页”等。

 $('.dataTables_filter input').attr('title', 'Type here to search in the table'); $('.dataTables_length select').attr('title', 'Select number of visible rows'); 

– 用于过滤/搜索框和长度菜单。

---

将上面的内容放在draw.dt事件中，以便每次重绘表时更新控件元素的title ：

 table.on('draw.dt', function() { $('.paginate_button').each(function() { var text = $(this).text(), title = isNaN(text) ? text+' page' : 'Page '+text; $(this).attr('title', title); }); $('.dataTables_filter input').attr('title', 'Type here to search in the table'); $('.dataTables_length select').attr('title', 'Select number of visible rows'); })