代码之家 › 专栏 › 技术社区 › Kyle Weise

唯一的数据表列标题工具提示

datatables jquery javascript

Kyle Weise · 技术社区 · 6 年前

我是从 another question ,但我的问题是,如何修改此代码,以便每个列标题都有一个自定义的、唯一的工具提示?例如,用户将鼠标悬停在薪资上,工具提示显示“某些文本”,而当您将鼠标悬停在开始日期上时,工具提示显示“某些不同的文本”?我想我得换个 .each() 函数,但我不太精通JavaScript,不知道如何处理这个问题。

$(document).ready(function() {  
    var table = $('#example').DataTable( {     
        "ajax": 'https://api.myjson.com/bins/qgcu',
        "initComplete": function(settings){
            $('#example thead th').each(function () {
               var $td = $(this);
               $td.attr('title', $td.text());
            });

            /* Apply the tooltips */
            $('#example thead th[title]').tooltip(
            {
               "container": 'body'
            });          
        }  
    }); 
});

<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

<table id="example" class="display">
<thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Salary</th>
        <th>Start Date</th>
    </tr>
</thead>

<tfoot>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Salary</th>
        <th>Start Date</th>      
    </tr>
</tfoot>
</table>

1 回复 | 直到 6 年前

NullPointer 6 年前

是的,你快到了。

这个 $('#example thead th').each(function () { 用于设置 title(ToolTip) 头部。

有很多方法可以做到这一点。

一。 .每个功能 你可以检查 header text 然后就可以决定 自定义文本 .

下面是代码片段:

$(document).ready(function() {  
    var table = $('#example').DataTable( {     
        "ajax": 'https://api.myjson.com/bins/qgcu',
        "initComplete": function(settings){
            $('#example thead th').each(function () {
               var $td = $(this);
               var headerText = $td.text(); 
               var headerTitle=$td.text(); 
        if ( headerText == "Name" )
            headerTitle =  "custom Name";
        else if (headerText == "Position" )
            headerTitle = "custom Position";
        else if ( headerText == "Office" )
             headerTitle =  "custom Office";
        else if ( headerText == "Salary" )
             headerTitle =  "custom Salary";
        else if ( headerText == "Start Date" )
             headerTitle =  "custom Start Date";
               $td.attr('title', headerTitle);
            });

            /* Apply the tooltips */
            $('#example thead th[title]').tooltip(
            {
               "container": 'body'
            });          
        }  
    }); 
});

<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

<table id="example" class="display">
<thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Salary</th>
        <th>Start Date</th>
    </tr>
</thead>

<tfoot>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Salary</th>
        <th>Start Date</th>      
    </tr>
</tfoot>
</table>

2。 自定义标题 header attribute 和 .each function 你可以得到 custom title attribute 标题(工具提示) 头部。

$(document).ready(function() {  
    var table = $('#example').DataTable( {     
        "ajax": 'https://api.myjson.com/bins/qgcu',
        "initComplete": function(settings){
            $('#example thead th').each(function () {
               var $td = $(this);
              $td.attr('title', $td.attr('custom-title'));
            });

            /* Apply the tooltips */
            $('#example thead th[title]').tooltip(
            {
               "container": 'body'
               
            });          
        }  
    }); 
});

<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

<table id="example" class="display">
<thead>
    <tr>
        <th custom-title="custom Name">Name</th>
        <th custom-title="custom Position">Position</th>
        <th custom-title="custom Office">Office</th>
        <th custom-title="custom Salary">Salary</th>
        <th custom-title="custom Start Date">Start Date</th>
    </tr>
</thead>

<tfoot>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Salary</th>
        <th>Start Date</th>      
    </tr>
</tfoot>
</table>