我有一个数据表，我必须在每一行和分页按钮上显示工具提示。我已经在需要的地方实现了行的工具提示选项，但是无法弄清楚我们如何为数据表中的分页按钮（上一个和下一个按钮），搜索（文本框）和排序（下拉列表）等控件设置工具提示。
HTML：
<div class="container">
<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
</tbody>
</table>
</div>
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。任何帮助将不胜感激。
答案 0 :(得分：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设置在分页按钮上，如＆＃34;上一页＆＃34;，＆＃34; Page 3＆＃34;等。
$('.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');
})
答案 1 :(得分：0)
请考虑使用 titleAttr：，例如：
"buttons": [
{
extend: 'pageLength',
className: 'pageLength',
titleAttr: 'Search',
text: '<i class="fa fa-search fa-lg text-success"></i>'
},
{
extend: 'copy',
titleAttr: 'Copy to clipboard',
className: 'copyButton',
text: '<i class="fa fa-clone fa-lg text-success"></i>'
},
{
extend: 'excel',
titleAttr: 'Copy to excel file',
text: '<i class="fa fa-file-excel-o fa-lg text-success"></i>'
},
{
extend: 'pdf',
titleAttr: 'Copy pdf file',
text: '<i class="fa fa-file-pdf-o fa-lg text-success"></i>'
},
{
extend: 'csv',
titleAttr: 'Copy to csv file',
text: '<i class="fa fa-file-excel-o fa-g text-success"></i>'
},
{
extend: 'print',
titleAttr: 'Print the results',
title: '',
exportOptions: {
columns: ':visible',
stripHtml: false,
},
text: '<i class="fa fa-print fa-lg text-success"></i>',
customize: function (win) {
$(win.document.body)
.css('font-size', '10pt')
.prepend(
'<img src="" style="position:absolute; top:0; left:0;" />'
);
$(win.document.body).find('table')
.addClass('compact')
.css('font-size', 'inherit');
}
},
]