Ширина вопроса от http://datatables.net/ - PullRequest
Новая
       1

Ширина вопроса от http://datatables.net/

1 голос
/ 22 марта 2012

Используя таблицу данных из http://datatables.net/, как я могу остановить ее переполнение на странице?enter image description here

РЕДАКТИРОВАТЬ: 

<script type="text/javascript">
$(document).ready(function() {    
   $('#comment').dataTable( {
    "oLanguage": {
      "sInfo": "",
      "sInfoEmpty": "",
      "sInfoFiltered": ""
    },
    "sPaginationType": "full_numbers",
    "iDisplayLength": 5,
    "bLengthChange": false,
    "aaSorting": [[3, 'desc']],
    "aoColumns": [ 
      { "bSortable": false },
      null,
      null,
      { "asSorting": [ "desc" ] },
      null,
      { "bSortable": false }
    ] } );
});
</script>


<table id="comment">
      <thead>
      <tr>
        <th></th>
        <th>Name</th>
        <th>Comment</th>
        <th>Created</th>
        <th>Attachments</th>
        <th><center>Delete?</center></th>
      </tr>
    </thead>
    <tbody>
    <% @company.comments.each do |comment| %>
    <tr>
      <td>
      <% if comment.user.avatar.blank? %>
      <%= image_tag("default_user.png", :height => "50", :width => "50") %>
      <% else %>
      <%= image_tag(comment.user.avatar_url, :height => "50", :width => "50") %>
      <% end %>
      </td>
      <% if comment.user.name.nil? %>
      <td><%= comment.user.email %></td>
      <% else %>
      <td><%= comment.user.name %></td>
      <% end %>
      <td><%=raw comment.body %></td>
      <td><%= comment.created_at.to_s(:db) %></td>
      <% if comment.file.blank? %>
      <td></td>
      <% else %>
      <td><%= link_to comment.file_identifier, comment.file_url %></td>
      <% end %>
      <td><center><%= link_to image_tag("delete.png", :alt => "Delete", :height => "15px"), [comment.company, comment], :confirm => 'Are you sure?', :method => :delete %></center></td>
    </tr>
  <% end %>
  </tbody>
  </table>

Ответы [ 3 ]

2 голосов
/ 23 марта 2012

Функция DataTables не поможет при устранении неисправностей. Это проблема CSS. А также вопрос контента. Сначала содержание:

Размеры на столах "нечеткие"; таблица сделает все возможное, чтобы соответствовать вашим предложениям, и будет точно соответствовать вашим предложениям, когда это возможно. Однако, когда у вас огромная длинная нить (кажется, я вижу целую серию А и Д, верно?), У нее нет выбора. Это сделает колонку настолько широкой, насколько это необходимо, чтобы соответствовать содержанию. Тогда остальные столбцы будут настолько узкими, насколько это возможно, и по-прежнему будут размещать ваш контент.

Решение? CSS. Это сводится к overflow: hidden. В вашей таблице стилей установите для элементов TD значение overflow: hidden, и строка будет «обрезана». Это не всегда визуально приятно, но иногда веб-разработка - это компромисс.

Одним из таких компромиссов является также установка text-overflow: ellipsis. Любой текст, который не помещается в ячейку, будет обрезан, а символ многоточия (три сильно закрученных точки; это один символ, а не три фактические точки) будет вставлен в конце, где он обрезается.

Но тогда как вы видите данные целиком? Хитрый Я только что запустил скрипт в обратном вызове fnRowCallback, который устанавливает заголовок ячейки таким же, как ее содержимое. Затем при наведении курсора подсказка показывает вам содержимое. Я уверен, что есть лучшие способы.

В конце концов, вам нужно спросить: действительно ли сверхдлинная строка такая реалистичная? Какой ожидаемый контент?

0 голосов
/ 22 марта 2012

Применить пользовательскую ширину, например: 

.dataTables_wrapper {width:60%}
0 голосов
/ 22 марта 2012

http://datatables.net/styling/ids_classes имеет список примененных классов / идентификаторов - вы не можете просто установить ширину для элемента оболочки?

...