2012-06-27 1 views
2

ПРОБЛЕМА, ФИКСИРОВАННАЯ СЕЙЧАС.JQuery DataTables не отображается после следующего урока

Я исправил его, удалив раздел javascript для липкого заголовка, который прокручивается со страницы. я действительно не знаю, почему мой браузер херово, когда этот код в application.html.erb


Мои DataTables будет работать, когда мой application.html.erb выглядит следующим образом:

<!DOCTYPE html> 
<html> 

    <head> 
     <title>Dummyapp1</title> 
      <%= stylesheet_link_tag "application" %> 
      <%= javascript_include_tag "application", "contractens" %> 
      <%= csrf_meta_tags %> 

    <div> 

    </head> 

<body> 
==rest of script== 

и она не работает, когда мой application.html.erb выглядит следующим образом:

<!DOCTYPE html> 
<html> 

    <head> 
     <title>Dummyapp1</title> 
      <%= stylesheet_link_tag "application" %> 
      <%= javascript_include_tag "application", "contractens" %> 
      <%= csrf_meta_tags %> 

    <div> 

</div> 

    <!-- If you have jQuery directly, then skip next line --> 
    <script src="http://www.google.com/jsapi"></script> 

    <script type="text/javascript"> 
    // If you have jQuery directly, then skip next line 
    google.load("jquery", "1"); 

    function sticky_relocate() { 
     var window_top = $(window).scrollTop(); 
     var div_top = $('#sticky-anchor').offset().top; 
     if (window_top > div_top) 
     $('#sticky').addClass('stick') 
     else 
     $('#sticky').removeClass('stick'); 
     } 
    // If you have jQuery directly, use the following line, instead 
    // $(function() { 
    // If you have jQuery via Google AJAX Libraries 
    google.setOnLoadCallback(function() { 
     $(window).scroll(sticky_relocate); 
     sticky_relocate(); 
     }); 
    </script> 

    </head> 

<body> 

Я следую за это Railscasts Учебник для DataTables в рельсах. У меня это было в другом приложении. там работает нормально. Я сделал то же самое, что и другое приложение, но оно показывает мне текст вместо фактической таблицы.

Here's мой взгляд, для таблицы:

<h1>Listing contracten</h1> 

    <table id="contractens" class="display"> 
     <thead> 
      <tr> 
      <th>Naam</th> 
      <th>Omschrijving</th> 
      <th>Datumingang</th> 
      <th>Contractduur</th> 
      <th>Opzegtermijn</th> 
      <th>Betalingstermijn</th> 
      </tr> 
     </thead> 
    <tbody> 
     <%= @contractens.each do |contracten| %> 
     <tr> 
     <td><%= contracten.naam %></td> 
     <td><%= contracten.omschrijving %></td> 
     <td><%= contracten.datumingang %></td> 
     <td><%= contracten.contractduur %></td> 
     <td><%= contracten.opzegtermijn %></td> 
     <td><%= contracten.betalingstermijn %></td> 
     </tr> 
    <% end %> 
    </tbody> 
    </table> 

<%= link_to "Nieuw", new_contracten_path %> 

и мои файлы JavaScript заполнены правильно.

скриншот here'sa выпуска:

issue

Надеется, что вы можете мне помочь :)

EDIT: он должен выглядеть так, без CSS:

enter image description here

и он должен выглядеть так: css:

enter image description here

Это мой contractens.js.coffee:

jQuery -> 
     $('#contractens').dataTable 
      sPaginationType: "full_numbers" 
      bJQueryUI: true 

Это мой application.js:

//= require jquery 
//= require jquery_ujs 
//= require dataTables/jquery.dataTables 
//= require_tree . 

И это мой application.css:

/* 
*= require_self 
*= require dataTables/jquery.dataTables 
*= require_tree . 
*/ 

EDIT 2:

, когда у меня есть функция javascript, чтобы скрыть div при установке флажка. когда у меня есть

jQuery -> 
     $('#contractens').dataTable 

в моей contractens.js.coffee он работает, но когда у меня есть:

jQuery -> 
     $('#contractens').dataTable 
     sPaginationType: "full_numbers" 
     bJQueryUI: true 

не работает. поэтому что-то блокирует jquery, я думаю.

+0

Вы назвали '$ ('# contractens'). DataTable()'? – Daniel

+0

да я сделал в моем файле contractens.js.coffee –

ответ

2

Изменить

<%= @contractens.each do |contracten| %> 

для

<% @contractens.each do |contracten| %> 

Набор <%= %> тег используется, когда вы хотите выход.

+0

Странно, но текст в настоящее время ушел, я до сих пор не вижу таблицы –

+0

Почему странно? Вы печатали переменную экземпляра contractens при использовании <%= %>. –

+0

Нет, я имею в виду странно, что таблица все еще не отображается после того, как я ее удалил –

1

Я также имел тот же самый вопрос, который я изменил это один: в моем application.js:

//= require jquery 
//= require jquery_ujs 
//= require dataTables/jquery.dataTables 
//= require_tree . 

К

//= require jquery 
//= require_tree . 
//= require jquery_ujs 
//= require dataTables/jquery.dataTables 

И он работает сейчас.

+0

Вы знаете, что этот вопрос уже более года? –

+1

@KeesSonnema Yup :) его единственный для тех людей, у кого может быть этот тип проблемы. –

+0

В моем случае это был файл jugging js. но это все равно полезно :) спасибо за упоминание. –