2017-01-04 20 views
0

我在heroku上託管應用程序的ruby。我在我的一個頁面中使用了數據表。而且我已經做出了響應,因此在寬度較小的移動設備中,某些列可以在每行左側顯示綠色圓形加按鈕。點擊該按鈕後,該行的所有其他列將會顯示。它在我的本地主機上正常工作。但是當我要在heroku上部署它時,除了綠色圓形加號按鈕不可見外,所有這些功能都可以正常工作。但點擊應該出現綠色圓形加按鈕的空間,其他列就會變得可見。所以在heroku上,除了綠色加號按鈕不可見以外,它工作得很好。有關在heroku上響應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>&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

而且我的本地截圖:

enter image description here

+0

您的default.js和default.css未加載到網頁中。請打開Web控制檯來正確測試。如果仍然沒有解決,那麼你可以在生產模式下運行localhost應用程序。這將幫助你找出實際問題。 –

+0

如何在herokuapp上添加default.js和default.css?因爲這兩個文件都已經在我的本地目錄中。所以當我將它推向heroku時,爲什麼它不會被上傳到heroku上? @Bharatsoni – Abhradip

+0

你必須檢查。 –

回答

0

看在你的頁面中的錯誤,我發現了一些有趣:

混合內容:'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。