Блог

Наша компания использует CloudTables, и я пытаюсь использовать плагин для экспорта файлов, чтобы предоставить пользователю загружаемый CSV-файл для таблицы. Вот что у нас есть, прежде чем пытаться реализовать:

 <div class="row large-top-space large-bottom-space">
  <div class="col-md-5">
    <h3>Pending - Active Cases</h3>
  </div>
  <div class="col-sm-2">
  // CSV button will go here
  </div>
  <div class="col-md-3">
    <form class="form-inline float-right">
      <label class="sr-only" for="inlineFormInputGroupUsername2">filter table</label>
      <div class="input-group mb-2 mr-sm-2">
        <div class="input-group-prepend">
          <div class="input-group-text" style="background-color: #44a1df"><i class="fa fa-search text-white"></i></div>
        </div>
        <input type="text" class="form-control" id="filter-input" placeholder="filter list">
      </div>
    </form>
  </div>
</div>

<table id="filter-list" class="table table-hover large-bottom-space" data-datatable>
  <thead class="thead-light">
    <tr>
      <th scope="col">Code</th>
      <th scope="col">Patient</th>
      <th scope="col">DOB</th>
      <th scope="col">Surgery Date<i class="fas fa-info-circle fa-fw ml-1" data-toggle="tooltip" title="Scheduled date, entered by the surgeon's practice"></i></th>
      <th scope="col">Ophthalmologist</th>
      <th scope="col">Optometrist</th>
    </tr>
  </thead>

  <tbody>
    <% @cases.each do |c| %>
      <tr class="a-filterable-row">
        <td><%= link_to c.code, od_case_details_path(c) %></td> <!-- link to view invoice receipt? -->
        <td><%= c.patient_name_for_table %></td>
        <td data-order="<%= c.dob %>">
          <%= to_date_s(c.dob)  if c.dob.present? %>
        </td>
        <td data-order="<%= c.surgery_date %>">
          <%= to_date_s(c.surgery_date) if c.surgery_date.present? %>
        </td>
        <td><%= placeholder_if_empty c.rendering_physician.try(:name), empty_val: '' %></td>
        <td><%= c.referring_od.name %></td>
      </tr>
    <% end %>
  </tbody>
</table>
<script>
  window.cofiTableFilter.bindTable('filter-input', 'filter-list', [1, 2, 3, 4, 5, 6 ]);
</script>

 

Прежде всего, это

 window.cofiTableFilter.bindTable('filter-input', 'filter-list', [1, 2, 3, 4, 5, 6 ]);
 

Ванильная версия обычного скрипта jQuery для доступа к таблицам данных JS?

Второй:

Основываясь на документах, как мне закодировать кнопку? В элементе под названием csvHtml5 button есть что-то вроде кроличьей норы, но я не уверен, как это на самом деле выглядит в HTML.

А затем с помощью общего примера jQuery:

 $('#myTable').DataTable( {
    dom: 'Bfrtip',
    buttons: [
        'csv'
    ]
} );
 

Могу ли я поместить это в теги ниже? И заменить ('#myTable') на ('#form-filter') ?

Я думаю, что я уже пробовал это, но получил всплывающую ошибку, которая жалуется на объявление двойного идентификатора, что также сбивает с толку.

Документы немного сбивают с толку, когда дело доходит до реализации этого в уже существующих HTML и obstrusiveJS.

Кстати, это приложение для Rails, но в данном контексте это не имеет особого значения.