2016-10-20 3 views
0

Я пытаюсь получить отсортированную таблицу html с разбивкой на страницы, работающую в моем приложении rails. Но я ничего не имею.Rails 4 - DataTable с разбивкой на страницы

Я использую рельсы 4.2.4 и основание 6.

Я все шаги

здесь: https://github.com/rweng/jquery-datatables-rails

здесь: https://datatables.net

здесь: http://datatables.net/dev/foundation.html

Все из них заставляют казаться, что работа над этим запуском очень проста.

У меня есть следующие:

Gemfile:

gem 'jquery-datatables-rails', '~> 3.4.0' 

application.js:

//= require jquery 
//= require jquery_ujs 
//= require dataTables/jquery.dataTables 
//= require dataTables/jquery.dataTables.foundation 
//= require jquery-ui 
//= require autocomplete-rails 
//= require foundation 
//= require turbolinks 
//= require_tree . 

$(function(){ 
    $(document).foundation(); 
}); 

Внутри мой взгляд у меня есть:

<script> 
    $(document).ready(function() { 
    $('#jobsTable').dataTable(); 
    }); 
</script> 

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/zf/jq-2.2.3/dt-1.10.12/datatables.min.css"/> 

<script type="text/javascript" src="https://cdn.datatables.net/v/zf/jq-2.2.3/dt-1.10.12/datatables.min.js"></script> 

<table id="jobsTable"> 
    <thead> 
    <tr> 
     <th>Job ID</th> 
     <th>Created On</th> 
     <th>User</th> 
     <th>Company</th> 
     <th>Subcontractor</th> 
     <th>Jobsite</th> 
     <th colspan="2"></th> 
    </tr> 
    </thead> 

    <tbody> 
    <% @jobs.each do |job| %> 
     <tr> 
     <td><%= job.id %> </td> 
     <td><%= job.date.strftime("%I:%M %p, %b %d %Y") %></td> 
     <td><%= job.user.username %></td> 
     <% if job.company %> 
      <td><%= job.company.name %></td> 
     <% else %> 
      <td> N/A </td> 
     <% end %> 
     <% if job.subcontractor %> 
      <td><%= job.subcontractor.name %></td> 
     <% else %> 
      <td> N/A </td> 
     <% end %> 
     <% if job.jobsite %> 
      <td><%= job.jobsite.name %></td> 
     <% else %> 
      <td> N/A </td> 
     <% end %> 
     <td><%= link_to 'Show', job %></td> 
     <!-- if current_user.admin %> --> 
      <!-- <td style="background: lightgray;"> link_to 'Destroy', job, method: :delete, data: { confirm: 'Are you sure?' } %></td> --> 
     <!-- end %> --> 
     </tr> 
    <% end %> 
    </tbody> 
</table> 

Но таблица делает не менять no ma tter какой. Это таблица в настоящее время:

enter image description here

И по всем ссылкам я перечисленных, со всем, я сделал, это должно волшебным образом изменить, чтобы выглядеть так, с кнопками и пагинацией:

enter image description here

Может ли кто-нибудь помочь и рассказать мне, что я делаю неправильно здесь? Я искал несколько часов, глядя на примеры, и мне не удалось выяснить, почему это не работает.

Update:

я дважды проверил мои шаги с направлениями по установке непосредственно с их сайта https://datatables.net/manual/installation и я до сих пор ничего не видно, что я делаю неправильно.

Любая помощь очень ценится.

ответ

1

Вам нужно сделать два изменения в свой код, чтобы сделать его работу:

  1. Вы должны удалить ваши colspan от вашего <thead>, и количество th и td должны соответствовать.

  2. Ваш тег <script> должен быть в нижней части страницы.

+0

Если вы выполнили команду 'rails generate jquery: datatables: install' после установки gem для DataTable, тогда вы можете удалить тег , который будет включать в себя dataTable lib из файла cdn. –

+0

спасибо. Это сделал трюк. Я считаю, что моя единственная проблема - несоответствие меток 'th' и' td'. Теперь все выглядит отлично. –

+0

Добро пожаловать. Если вы выполнили команду rails generate jquery: datatables: install', а затем включили файлы css и js в application.js и application.css, вам не нужно будет загружать файлы lib в файл просмотра вручную. –

0

http://railscasts.com/episodes/240-search-sort-paginate-with-ajax?autoplay=true Надеюсь, он показывает, как страница может разбиваться на страницы, сортироваться без загрузки всего документа.

+0

Добро пожаловать в Переполнение стека, Ishtaque05. Просьба представить код в вашем ответе, а не только ссылку. – timmyRS

Смежные вопросы