初始化 jQuery DataTables 时，引导工具提示不是功能

Posted 2023-05-08

【中文标题】初始化 jQuery DataTables 时，引导工具提示不是功能

【英文标题】：Bootstrap Tooltip NOT A FUNCTION when jQuery DataTables is initialized

【发布时间】：2017-12-10 18:16:38

【问题描述】：

也许答案就在这里，我只是没有看到它，所以非常欢迎任何帮助。我有一个表，我正在将 jQuery DataTables 加载到上面，另外我正在使用 Bootstrap，并且 td 中的一些跨度具有 Bootstrap 工具提示。工具提示本身就可以正常工作，因为我在页脚中有初始化脚本 - 但是当我添加 dataTables 基本初始化脚本时，突然出现错误：

未捕获的类型错误：$(...).tooltip 不是函数

这是我所拥有的：

html5

<table id="resources" class="hover" cellspacing="0" >
        <thead>
            <tr>
                <th>Type</th>
                <th>Title</th>
                <th>Thumbnail</th>
                <th>Instrument</th>
                <th>Share</th>
                <th>Resources</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Type</th>
                <th>Title</th>
                <th>Thumbnail</th>
                <th>Instrument</th>
                <th>Share</th>
                <th>Resources</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Video</td>
                <td><a href="#" class="resource-link" data-toggle="modal" data-target="#videoModal">Title of Video</a></td>
                <td><a href="#" class="resource-link" data-toggle="modal" data-target="#videoModal"><img src="thumbnail.jpg"  class="img-responsive img-resource"></a></td>
                <td>Insutrment</td>
                <td><a class="btn btn-default btn-xs" data-toggle="modal" data-target="#shareModal">Share <i class="fa fa-share-alt" aria-hidden="true"></i></a></td>
                <td><span class="fa-stack fa-1x" data-toggle="tooltip" data-placement="top" title="Video Resource"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-video-camera fa-stack-1x fa-inverse"></i></span></td>
            </tr>
     </tbody>
</table>

JS

$(document).ready(function()
     $("#resources").DataTable();
     $('[data-toggle="tooltip"]').tooltip(
          container : 'body'
     );
);

我正在加载以下库：

jQuery - 3.2.1 引导程序 - 3.3.7 数据表 - 1.10.15

【问题讨论】：

这是一个古老的 jQuery 版本。也许直到更新版本才添加？

让我换个问题，更新我的 jQuery 版本并没有解决问题

刚遇到同样的问题，结果我两次包含 JQuery - 一次是手动，然后又是在数据表 cdn 中

【参考方案1】：

似乎工作正常。

$(document).ready(function() 
  $("#resources").DataTable();
  $('[data-toggle="tooltip"]').tooltip();
);

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>



<table id="resources" class="hover" cellspacing="0" >
  <thead>
    <tr title="Tooltip Test">
      <th>Type</th>
      <th>Title</th>
      <th>Thumbnail</th>
      <th>Instrument</th>
      <th>Share</th>
      <th>Resources</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Type</th>
      <th>Title</th>
      <th>Thumbnail</th>
      <th>Instrument</th>
      <th>Share</th>
      <th>Resources</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Video</td>
      <td><a href="#" class="resource-link" data-toggle="modal" data-target="#videoModal">Title of Video</a></td>
      <td>
        <a href="#" class="resource-link" data-toggle="modal" data-target="#videoModal"><img src="thumbnail.jpg"  class="img-responsive img-resource"></a>
      </td>
      <td>Insutrment</td>
      <td><a class="btn btn-default btn-xs" data-toggle="modal" data-target="#shareModal">Share <i class="fa fa-share-alt" aria-hidden="true"></i></a></td>
      <td><span class="fa-stack fa-1x" data-toggle="tooltip" data-placement="top" title="Video Resource"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-video-camera fa-stack-1x fa-inverse"></i></span></td>
    </tr>
  </tbody>
</table>

【讨论】：

我使用的是 Bootstrap 的工具提示，而不是 Jquery-UI。我什至没有在 jquery-ui 中加载到页面。

在引入所有资源后运行我更新的 sn-p。似乎有效。

嗯...我一定是顺序不对，我只是通过 CSS 和 JS 库链接代码重新排序，现在可以正常工作了。