个人中心
gpt4 book ai didi

jquery - 工具提示不适用于数据表子行

转载 作者：行者123 更新时间：2023-12-03 22:46:01 34 4
gpt4 key购买 nike

Bootstrap Tooltip不适用于 jQuery DataTables 的子行。

使用fnDrawCallback，它可以在普通行上工作，但对子行没有影响，我不知道如何使其工作。

"fnDrawCallback": function( oSettings ) {
   $('[rel="tooltip"]').tooltip();        
}

参见Child rows和 fnDrawCallback供引用。

HTML 示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">

    <title>DataTables example - Child rows (show extra / detailed information)</title>
    <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
    <link rel="stylesheet" type="text/css" href="../resources/demo.css">
    <style type="text/css" class="init">

td.details-control {
    background: url('../resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('../resources/details_close.png') no-repeat center center;
}

    </style>



    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
    <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
    <script type="text/javascript" language="javascript" src="../resources/demo.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> 
    <script type="text/javascript" language="javascript" class="init">


/* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Full name:</td>'+
            '<td>'+d.name+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extension number:</td>'+
            '<td>'+d.extn+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Tooltip:</td>'+
            '<td><span rel="tooltip" data-toggle="tooltip" data-placement="top" title="" data-original-title="display the tooltip" class="souligne">text with a tooltip</span></td>'+
        '</tr>'+
    '</table>';
}

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "ajax": "objects.txt",
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "salary" }
        ],
        "fnDrawCallback": function( oSettings ) {
           $('[rel="tooltip"]').tooltip();         
        },      
        "order": [[1, 'asc']]
    } );

    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
} );


    </script>
</head>

<body class="dt-example">
    <div class="container">
        <section>
            <h1>DataTables example <span>Child rows (show extra / detailed information)</span></h1>


            <table id="example" class="display" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th></th>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Salary</th>
                    </tr>
                </thead>

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

        </section>

        <h1>Tooltip works outside:</h1>
        <span rel="tooltip" data-toggle="tooltip" data-placement="top" title="" data-original-title="display the tooltip" class="souligne">text with a tooltip</span>       
    </div>



<script type="text/javascript">
$(function() {
    $('[data-toggle="tooltip"]').tooltip(); 
});
</script>

</body>
</html>

AJAX 来源:

{
  "data": [
    {
      "name": "<span rel=\"tooltip\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"\" data-original-title=\"this is a tooltip\" class=\"souligne\">Tiger Nixon<\/span>",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
      "name": "<span rel=\"tooltip\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"\" data-original-title=\"this is a tooltip\" class=\"souligne\">Test tooltip<\/span>",
      "position": "Accountant",
      "salary": "$162,700",
      "start_date": "2008/11/28",
      "office": "Tokyo",
      "extn": "5407"
    },
    {
      "name": "Brielle Williamson",
      "position": "Integration Specialist",
      "salary": "$372,000",
      "start_date": "2012/12/02",
      "office": "New York",
      "extn": "4804"
    },
    {
      "name": "Herrod Chandler",
      "position": "Sales Assistant",
      "salary": "$137,500",
      "start_date": "2012/08/06",
      "office": "San Francisco",
      "extn": "9608"
    },
    {
      "name": "Rhona Davidson",
      "position": "Integration Specialist",
      "salary": "$327,900",
      "start_date": "2010/10/14",
      "office": "Tokyo",
      "extn": "6200"
    },
    {
      "name": "Michael Bruce",
      "position": "Javascript Developer",
      "salary": "$183,000",
      "start_date": "2011/06/27",
      "office": "Singapore",
      "extn": "5384"
    },
    {
      "name": "Donna Snider",
      "position": "Customer Support",
      "salary": "$112,000",
      "start_date": "2011/01/25",
      "office": "New York",
      "extn": "4226"
    }
  ]
}

如果删除，您还可以看到:

"fnDrawCallback": function( oSettings ) {
   $('[rel="tooltip"]').tooltip();         
},

包含工具提示的通常行将不起作用。

来源:

只需使用我的 html 代码更改文件 row_details.html 即可查看测试用例(并将文件 objects.txt 添加到同一文件夹)。

最佳答案

使用createdRow初始化常规行中的工具提示。

"createdRow": function(row, data, dataIndex){
    $('[data-toggle="tooltip"]', row).tooltip();
}

关于子行，修改代码如下:

// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');

// Initialize tooltips in the child row that follows the parent row      
$('[data-toggle="tooltip"]', tr.next('tr')).tooltip();

请参阅下面的代码片段以获取代码和演示。

/* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Full name:</td>'+
            '<td>'+d.name+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extension number:</td>'+
            '<td>'+d.extn+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Tooltip:</td>'+
            '<td><span rel="tooltip" data-toggle="tooltip" data-placement="top" title="" data-original-title="display the tooltip" class="souligne">text with a tooltip</span></td>'+
        '</tr>'+      
    '</table>';
}
 
$(document).ready(function() {
  
    var data = [{"name":"<span rel=\"tooltip\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"\" data-original-title=\"this is a tooltip\" class=\"souligne\">Tiger Nixon</span>","position":"System Architect","salary":"$320,800","start_date":"2011/04/25","office":"Edinburgh","extn":"5421"},{"name":"<span rel=\"tooltip\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"\" data-original-title=\"this is a tooltip\" class=\"souligne\">Garrett Winters</span>","position":"Accountant","salary":"$170,750","start_date":"2011/07/25","office":"Tokyo","extn":"8422"},{"name":"<span rel=\"tooltip\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"\" data-original-title=\"this is a tooltip\" class=\"souligne\">Ashton Cox</span>","position":"Junior Technical Author","salary":"$86,000","start_date":"2009/01/12","office":"San Francisco","extn":"1562"}];
  
    var table = $('#example').DataTable( {
        "data": data,
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "salary" }
        ],
        "order": [[1, 'asc']],
        "createdRow": function(row, data, dataIndex){
           $('[data-toggle="tooltip"]', row).tooltip();
        }
    } );
     
    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
            
            $('[data-toggle="tooltip"]', tr.next('tr')).tooltip();
        }
    } );
 
} );
td.details-control {
    background: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_close.png') no-repeat center center;
}
<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></th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Salary</th>
    </tr>
</thead>

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

关于jquery - 工具提示不适用于数据表子行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32241971/

34 4 0
文章推荐： jquery - 使用位于 App_Data 中的静态 .json 文件？
文章推荐： JQuery:removeClass()后单击功能仍然有效
文章推荐： jquery - IE 上旋转图标的奇怪行为
文章推荐： jquery - Bootstrap 开关返回 "on/off"而不是 "true/false"
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com