Question

我在heroku上托管了一个ruby on rails应用程序。我在我的一个页面中使用过datatable。而且我已经做出了响应，因此在较小宽度的移动设备中，一些列将在每行的左侧带有绿色圆形加号按钮可见。然后单击该按钮将显示该行的所有其他列。它在我的localhost中工作正常。但是当我要在heroku上部署它时，所有这些功能都正常工作，除了绿色圆形加号按钮不可见。但是点击应该出现绿色圆形加号按钮的空间，其他列变得可见。所以在heroku上它运行良好，除了绿色加号按钮不可见。

我执行了命令：

bundle exec assets:precomplile

但仍然无法正常工作。

该特定页面的代码是：

<html>
<head>
<title>Tables - PixelAdmin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="http://cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.css"/>
<link rel="stylesheet" href="http://cdn.datatables.net/responsive/1.0.2/css/dataTables.responsive.css"/>
<style>
    body {
        font-size: 140%;
    }

    table.dataTable th,
    table.dataTable td {
        white-space: nowrap;
    }
</style>
</head>

<body class="theme-default main-menu-animated" style="padding-top: 40px;">
<table id="example" class="table table-striped table-hover dt-responsive display nowrap" cellspacing="0"
               width="100%">
<thead>
    <tr>
        <th>Serial No.</th>
        <th>Title</th>
        <th>Text</th>
        <th>Creation Time</th>
        <th>Updation Time</th>
        <th>Details</th>
    </tr>
</thead>
 <% @articles.each do |article| %>
<tr>
  <td><%= article.id %></td>
  <td>&nbsp;&nbsp;<%= article.title %></td>
  <td><%= article.text %></td>
  <td><%= article.created_at %>&nbsp;&nbsp;&nbsp;&nbsp;</td>
  <td><%= article.updated_at %></td>
  <td><%= link_to 'Show', article_path(article) %></td>
</tr>
<% end %>
</table>




<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/responsive/1.0.2/js/dataTables.responsive.js">   </script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.js"></script>

<script>
$(document).ready(function () {
    $('#example')
            .dataTable({
                "responsive": true,
                "dom": '<"top"lf>t<"bottom"pi><"clear">'
            });
});
</script>

</body>
</html>

请帮我解决这个问题。在此先感谢!!

我的heroku应用程序中该页面的链接是：

https://workerq.herokuapp.com/articles

我的localhost截图是：

Answer 1

查看页面中的错误，我发现了一些有趣的内容：

混合内容：“https://workerq.herokuapp.com/articles”页面是通过HTTPS加载的，但是请求了一个不安全的样式表“http://cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.css”。此请求已被阻止;内容必须通过HTTPS提供。

来自cdn的每个加载都给出了如上所述的错误，我的兴趣是你使用gems bootstrap-sass和jquery-datatables-rails而不是cdn。

关于heroku上的响应数据表的问题

1 个答案: