关于heroku上的响应式数据表的问题
Posted
技术标签:
【中文标题】关于heroku上的响应式数据表的问题【英文标题】：Issue regarding responsive datatable on heroku 【发布时间】：2017-05-18 09:40:48 【问题描述】：我在 heroku 上托管了一个 ruby on rails 应用程序。我在我的一个页面中使用了数据表。而且我已经使它具有响应性，因此在较小宽度的移动设备中，某些列将通过每行左侧的绿色圆形加号按钮可见。并单击该按钮，该行的所有其他列都将可见。它在我的本地主机中运行良好。但是当我要在 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"
>
<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> <%= article.title %></td>
<td><%= article.text %></td>
<td><%= article.created_at %> </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
我的本地主机截图是：
【问题讨论】：
您的 default.js 和 default.css 未加载到网页中。请通过打开 Web 控制台正确进行测试。如果仍然没有解决，那么您可以在生产模式下运行 localhost 应用程序。这将帮助您找出实际问题。 如何在herokuapp上添加default.js和default.css？因为这两个文件都已经在我的本地目录中了。所以当我将它推送到heroku时，为什么它没有被上传到heroku？ @Bharatsoni 你必须检查。 我已将 javascript_include_tag 和 stylesheet_link_tag 分别从“默认”更改为“应用程序”。它解决了我的问题。感谢您提供解决问题的提示。 【参考方案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上的响应式数据表的问题的主要内容，如果未能解决你的问题，请参考以下文章
Chrome 中的“意外响应代码：503”。也许与heroku上的socket.io有关？