Question

我从another question获得了这段代码，但是我的问题是如何修改此代码，以便每个列标题都可以有一个自定义的唯一工具提示？例如，用户将鼠标悬停在Salary上，工具提示将显示“一些文本”，而当您将鼠标悬停在Start Date上时，它将显示“一些不同文本”？我认为我必须将.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>

Answer 1

是的，您快要走了。

此 .each函数 $('#example thead th').each(function () {用于设置标头的title(ToolTip)。

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

1。。在此。每个功能中，您可以选中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并设置为{{ 1}}。

以下是代码段：

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

唯一的DataTable列标题工具提示

1 个答案: