DataTable中分页按钮的工具提示 [英] Tooltip for pagination buttons in DataTables

查看：115
本文介绍了DataTable中分页按钮的工具提示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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



HTML： 

  div class =container> 
< table cellpadding =0cellspacing =0border =0class =dataTableid =example> 
< thead> 
< tr> 
< th> Name< / th> 
< th> Position< / th> 
< th> Office< / th> 
< th>年龄< / th> 
< th>开始日期< / th> 
< th>工资< / th> 
< / tr> 
< / thead> 
 
< tbody> 
< tr> 
< td> Tiger Nixon< / td> 
< td>系统架构师< / td> 
< td>爱丁堡< / td> 
< td> 61< / td> 
< td> 2011/04/25< / td> 
< td> $ 320,800< / td> 
< / tr> 
< tr> 
< td> Garrett Winters< / td> 
< td>会计< / td> 
< td>东京< / td> 
< td> 63< / td> 
< td> 2011/07/25< / td> 
< td> $ 170,750< / td> 
< / tr> 
< tr> 
< td> Ashton Cox< / td> 
< td>初级技术作者< / td> 
< td>旧金山< / td> 
< td> 66< / td> 
< td> 2009/01/12< / td> 
< td> $ 86,000< / td> 
< / tr> 
< tr> 
< td> Cedric Kelly< / td> 
< td>高级Javascript开发者< / td> 
< td>爱丁堡< / td> 
< td> 22< / td> 
< td> 2012/03/29< / td> 
< td> $ 433,060< / td> 
< / tr> 
< tr> 
< td> Airi Satou< / td> 
< td>会计< / td> 
< td>东京< / td> 
< td> 33< / td> 
< td> 2008/11/28< / td> 
< td> $ 162,700< / td> 
< / tr> 
< tr> 
< td> Brielle Williamson< / td> 
< td>集成专家< / td> 
< td>纽约< / td> 
< td> 61< / td> 
< td> 2012/12/02< / td> 
< td> $ 372,000< / td> 
< / tr> 
< tr> 
< td> Herrod Chandler< / td> 
< td>销售助理< / td> 
< td>旧金山< / td> 
< td> 59< / td> 
< td> 2012/08/06< / td> 
< td> $ 137,500< / td> 
< / tr> 
< tr> 
< td> Rhona Davidson< / td> 
< td>集成专家< / td> 
< td>东京< / td> 
< td> 55< / td> 
< td> 2010/10/14< / td> 
< td> $ 327,900< / td> 
< / tr> 
< tr> 
< td> Colleen Hurst< / td> 
< td> Javascript Developer< / td> 
< td>旧金山< / td> 
< td> 39< / td> 
< td> 2009/09/15< / td> 
< td> $ 205,500< / td> 
< / tr> 
< tr> 
< td> Sonya Frost< / td> 
< td>软件工程师< / td> 
< td>爱丁堡< / td> 
< td> 23< / td> 
< td> 2008/12/13< / td> 
< td> $ 103,600< / td> 
< / tr> 
< tr> 
< td> Jena Gaines< / td> 
< td> Office Manager< / td> 
< td>伦敦< / td> 
< td> 30< / td> 
< td> 2008/12/19< / td> 
< td> $ 90,560< / td> 
< / tr> 
< tr> 
< td> Quinn Flynn< / td> 
< td>支持Lead< / td> 
< td>爱丁堡< / td> 
< td> 22< / td> 
< td> 2013/03/03< / td> 
< td> $ 342,000< / td> 
< / tr> 
< tr> 
< td> Charde Marshall< / td> 
< td>区域总监< / td> 
< td>旧金山< / td> 
< td> 36< / td> 
< td> 2008/10/16< / td> 
< td> $ 470,600< / td> 
< / tr> 
< / tbody> 
< / table> 
< / div>

JS：



数据表（）;
$（'＃）$（$）$（$）示例tbody'）on（'click'，'tr'，function（）{
if（$（this）.hasClass（'selected'））{
$（this）.removeClass选择'）;
}
else {
表。$（'tr.selected'）。removeClass（'selected'）;
$（this）.addClass '）;
}
}）;
$（'＃example'）。dataTable（{
bJQueryUI：true，
retrieve：true，
sPaginationType：full_numbers}）。makeEditable（{aoColumns：[
{
cssclass：required
}，
{
cssclass：
}，
{
指标：'保存...'，
工具提示：'点击编辑'，//行
的工具提示类型：'文本'，
提交：'保存'
}，
{
指示符：'保存...'，
工具提示：'点击进入年龄' /太lt;











$ b $ ，'A'：60，'B'：12，'C'：23，'D'：25，'E'：65}
}，
{
指标：
工具提示：'点击选择'，//工具提示行
loadtext：'loading ...'，
type：'select'，
onblur：'submit'，
data：{''：'Select ...'，'A'：'A'，'B'：'B'，'C'：'C'}
}，
{cssclass：required}
]
}）;
}）;

这里是 JSFiddle 相同。任何帮助将不胜感激。

解决方案

通过工具提示我想你的意思是标题？由于某些特殊原因，这不是本地API的一部分。在我看来，显而易见的是在语言中包含title / tooltips选项构造... 

  $（'。paginate_button'）。each（function（）{
 var text = $（this）.text（），
 title = isNaN（text）？text +'page'：'Page'+ text; 
 $（this）.attr（'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 事件中，以便标题为控制元素每次更新表重新绘制：

  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 for the table'）; 
 $（'。dataTables_length select'）。attr（'title'，'Select number of visible rows'）; 
}）


I have a datatable where I have to show the tooltip on every row and in the pagination buttons as well. I have implemented the tooltip option for the rows wherever required, but not able to figure out that how do we set the tooltip for the controls like pagination buttons (Prev and Next buttons), search (textbox) and sort (dropdown) in datatables.

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" }
]
});      
});

Here is the JSFiddle for the same. Any help would be appreciated.

解决方案

By tooltip I guess you mean titles? For some peculiar reason, this is not part of the native API. In my opinion, it would be obvious to include title / tooltips-options in the language construct ... 

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

Will set title on the pagination buttons, as "Previous page", "Page 3" etc. 

$('.dataTables_filter input').attr('title', 'Type here to search in the table');

$('.dataTables_length select').attr('title', 'Select number of visible rows');

– for filter / search box and the length menu.

Place the above inside a draw.dt event so title for the control elements is updated each time the table is redrawn :

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');
})

这篇关于DataTable中分页按钮的工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆