独特的DataTable列标题工具提示

Question

独特的DataTable列标题工具提示

3

我从另一个问题中获取了这段代码，但我的问题是如何修改此代码，以便每个列标题都可以有一个自定义的、独特的工具提示？例如，当用户悬停在“薪水”上时，工具提示显示“一些文本”，当您悬停在“开始日期”上时，它会显示“一些不同的文本”？我想我需要将.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>

- Kyle Weise

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- NullPointer · Accepted Answer

是的，你几乎已经走上了这条路。

这个.each函数$('#example thead th').each(function () {是用于设置标题的title(工具提示)的。

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

1. 在这个.each函数中，您可以检查header text，然后决定您的custom 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属性 ，在 .each函数 中，您可以获取 自定义标题属性 并将其设置为header的 title（ToolTip）。

以下是代码片段：

$(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>