У меня есть рубин на рельсах, размещенном на геройку. Я использовал datatable на одной из моих страниц. И я сделал это отзывчивым, так что в мобильных устройствах меньшей ширины некоторые из столбцов будут видны с зеленой круглой кнопкой плюс в левой части каждой строки. И нажав на эту кнопку, все остальные столбцы для строки будут видны. И он отлично работает в моем локальном хосте. Но когда я собираюсь развернуть его на герою, все эти функции прекрасно работают, за исключением того, что зеленая круглая кнопка плюс не видна. Но нажав на место, где должна появиться зеленая круглая кнопка плюс, станут видны другие столбцы. Так что на героку это хорошо работает, кроме кнопки зеленого плюс не видно.Проблема с отзывчивыми данными по герою
Я выполнил команду:
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> <%= 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 не загружены на веб-страницу. Пожалуйста, выполните тестирование, открыв веб-консоль. И если вы еще не решили, вы можете запустить приложение localhost в рабочем режиме. Это поможет вам разобраться в реальной проблеме. –
Как добавить default.js и default.css на herokuapp? Поскольку оба этих файла уже находятся в моем локальном каталоге. Поэтому, когда я нажимаю его на герою, почему он не загружается на героку? @Bharatsoni – Abhradip
Что вы должны проверить. –