jquery - FooTable:缺少切换图标？-6ren

jquery - FooTable:缺少切换图标？

转载作者：太空宇宙更新时间：2023-11-04 10:05:57

24

4

我正在尝试使用 FooTable作为独立版本。我复制/粘贴 this 的代码示例并包含 jQuery.js、fontawesome.css 和 footable js/css。

关于example page页面，您会看到一个切换加号图标会在列隐藏后立即出现。但是，在我的示例副本中，没有出现切换图标。我错过了什么吗？

编辑我只是在 Windows 7 计算机和不同的 Ubuntu 设备上检查同一个文件。在这两个图标上都没有出现。

我的例子是这样的:

这是我的代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
    <!-- FontAwesome-->
    <link rel="stylesheet" href="/resources/vendor/font-awesome/css/font-awesome.min.css">
    <ling rel="stylesheet" href="css/footable.standalone.css">

      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
      <script>window.jQuery || document.write('<script src="/resources/vendor/jQUery/jquery-1.11.2.min.js"><\/script>')</script>

    <script src="js/footable.min.js"></script>

  </head>
  <body>Check if fontawesome is loaded: <i class="fa fa-plus" aria-hidden="true"></i>

    <table class="table">
    <thead>
        <tr>
            <th data-breakpoints="xs">ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th data-breakpoints="xs">Job Title</th>
            <th data-breakpoints="xs sm">Started On</th>
            <th data-breakpoints="xs sm md" data-title="DOB">Date of Birth</th>
        </tr>
    </thead>
    <tbody>
        <tr >
            <td>1</td>
            <td>Dennise</td>
            <td>Fuhrman</td>
            <td>High School History Teacher</td>
            <td>November 8th 2011</td>
            <td>July 25th 1960</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Elodia</td>
            <td>Weisz</td>
            <td>Wallpaperer Helper</td>
            <td>October 15th 2010</td>
            <td>March 30th 1982</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Raeann</td>
            <td>Haner</td>
            <td>Internal Medicine Nurse Practitioner</td>
            <td>November 28th 2013</td>
            <td>February 26th 1966</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Junie</td>
            <td>Landa</td>
            <td>Offbearer</td>
            <td>October 31st 2010</td>
            <td>March 29th 1966</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Solomon</td>
            <td>Bittinger</td>
            <td>Roller Skater</td>
            <td>December 29th 2011</td>
            <td>September 22nd 1964</td>
        </tr>
        <tr>
            <td>6</td>
            <td>Bar</td>
            <td>Lewis</td>
            <td>Clown</td>
            <td>November 12th 2012</td>
            <td>August 4th 1991</td>
        </tr>
        <tr>
            <td>7</td>
            <td>Usha</td>
            <td>Leak</td>
            <td>Ships Electronic Warfare Officer</td>
            <td>August 14th 2012</td>
            <td>November 20th 1979</td>
        </tr>
        <tr>
            <td>8</td>
            <td>Lorriane</td>
            <td>Cooke</td>
            <td>Technical Services Librarian</td>
            <td>September 21st 2010</td>
            <td>April 7th 1969</td>
        </tr>
    </tbody>
</table>

<script>
jQuery(function($){
    $('.table').footable();

});
</script>
  </body>
</html>

最佳答案

确保 font-awesome 字体的路径可用，通常 font-awesome.css 试图在

找到字体

../fonts/*.eof|woff

因此请确保此路径可从您的网页访问，或使用 font-awesome cdn 链接

https://www.bootstrapcdn.com/fontawesome/

关于jquery - FooTable:缺少切换图标？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38009160/

24

4

0

文章推荐： java - 输入之间的空间不会给数组索引带来异常？

文章推荐： linux - 我可以通过 "GOT address"获取符号名称吗？

footable - 如何在页面加载后立即初始化表的过滤器
我使用优秀的插件“footable”来排序和过滤我的表格。但在某些情况下，我的页面必须使用某个过滤器进行初始化。比如我的网址是: myurl/mypage/19 在服务器端，我得到“19”并将其发送
jquery - FooTable 删除内部内容
我正在使用fooTable并且的内部内容有问题元素。他们都被删除了。以前的版本中没有这种情况，但 v3 删除了它。例如，如果我添加一个按钮 Turn on它被删除，以及表格单元格的类。如何避免这
javascript - Footable 分页根本不显示
我正在努力显示可用的分页，但即使我检查了文档和所有其他示例，仍然无法弄清楚。在下面的代码中，以不同的方式尝试了两个表，并且都没有显示分页。有谁能解释并指出在此代码中显示分页需要什么？谢谢。
javascript - Footables - 排序指示器未正确显示
我尝试在 Footables 中使用排序。它工作正常，除了标题中的排序图标指示器没有正确显示(它看起来像一个乱码)。这似乎是一个编码问题。这是我包含的 css footable.core.min.c
javascript - FooTable 插件日期时间问题
我使用 FooTable jQuery 插件创建了一个动态表。 http://jsbin.com/wasawa/edit 这里我使用 PHP date('Y-m-d H:i:s') 格式的 MySQL
css - Footable:更改手机屏幕中的行位置
我有一个 footable 如下: 该列以状态开头，然后是标题、I、II、III、IV、V、VI、VII、日期。切换到手机新版时，也是按照如下图所示的顺序我想重新排列 Status 列并将其显示在
jquery - 编辑页脚 FooTable
我使用 FooTable 插件初始化后我尝试 'on': { 'postinit.ft.table': function(e, ft) { var rows = tabl
jquery - FooTable:缺少切换图标？
我正在尝试使用 FooTable作为独立版本。我复制/粘贴 this 的代码示例并包含 jQuery.js、fontawesome.css 和 footable js/css。关于example p
jquery - FooTable 自定义切换按钮
FooTable 的小切换按钮来自以下 css .footable.breakpoint > tbody > tr.footable-detail-show > td > span.footable-
javascript - 使用 footable 向单元格添加属性
我正在使用 footables ajax 功能，但我对如何向各个标签添加属性感到困惑。例如，在文档中，有一个可以设置的 data-sort-value 属性。对于静态表，我可以使用 foo . 我发现
footable，如何在页面加载后显示 "sorted"图标？
我使用优秀的“footable”插件。我可以通过单击标题对表格进行排序，但如何告诉“footable”:在页面加载后立即使用此列对该表格进行排序？我尝试使用此关键字:data-sort-initia
javascript - Footables 列排序会重复表中的行，为什么？
我正在将 footables 添加到表格中，但表格的每一行都必须有一个 tbody。这是因为我正在向以这种方式生成 html 的现有系统添加可移动排序和过滤。每次您尝试按列标题对表格进行排序时，这似
jquery - 更改 Footable 表中的行数限制？
我正在 postgresql 中执行一个查询，它返回了超过 160 个寄存器。当我尝试将数据放入可容纳的表格中时，它只显示 10 行，仅此而已。我尝试在名为 data-page-size="10000
javascript - 为什么 footable 的分页不起作用？
我正在尝试在我的项目中实现 FooTable-2，但由于某种原因我无法使用分页。我正在关注 THIS教程，这是我目前所拥有的表格代码: Active Trackers
javascript - 如何删除 footable 中的所有行？
我有一个脚垫需要清洁。我的意思是，我需要删除 footable 中的所有行。是否有任何功能可以做到这一点？还是需要逐行删除？我尝试重新初始化表: $('.footable').footable();
javascript - 完成 footable 初始化后如何继续做事？
我为我的数据表 ( http://fooplugins.github.io/FooTable/ ) 使用名为 fooTable 的查询插件下面是我初始化数据表的代码... jQuery(functi
javascript - Footable doSort 根本不起作用
我正在使用footable版本 2.0.3。当我尝试使用...手动排序时 $('.footable').data('footable-sort').doSort(4, true) ...我收到以下错
javascript - 如何从 Footable 检索列数据
我们的页面中有一个包含一些数据的页脚，其中一列有一个删除行按钮，按预期工作。问题是，当按下deleterow时，我们想从列中检索一个值，并对其进行一些处理。示例: ID -- Name -- De
css - Footable css 类添加逗号
我在 ASP.net gridview 上应用了 footable CSS 类来开发响应表。 gridview 包含一个文本框(模板)字段，当在平板电脑或手机上查看时，该字段显示在详细信息行中(在折叠
jquery - 我怎样才能改变 footable 标题样式？
我在元素中使用 footable。当 footable 生成响应表时，它使 th 和 td 在同一个 tr 中。但我希望它能将 th 和 tds 分开。让我试着用图片来解释。我想要这样。但它生成的是

首页

博学

6Ren·AI

商城

jquery - FooTable:缺少切换图标？