Мой босс попросил меня сделать так, чтобы наши таблицы данных автоматически обновлялись новыми данными без перезагрузки страницы.
Из моего исследования мне нужно сделать несколько сценариев AJAX с нашими таблицами данных, и я не уверен, какой из них использовать.
У меня есть форма на той же странице, которую я использую Ajax и jquery для публикации в базе данных. Все это работает отлично, но нам нужно, чтобы таблица автоматически обновлялась (добавляла или удаляла строки), а не только по событию от пользователя, а по автоматическому таймеру, поскольку данные вводятся удаленно через API.
В настоящее время у нас есть этот тип установки: (сокращение до основ)
Контроллер:
def index
@data = Data.all
respond_to do |format|
format.html
end
end
Вид:
<table class="table" id="data_table" width="100%">
<thead>
<tr>
<th>
Id
</th>
<th>
Origin
</th>
<th>
Destination
</th>
</tr>
</thead>
<tbody>
<% if @data.nil? %>
<tr></tr>
<% else %>
<% @data.each do |s| %>
<tr>
<td>
<%= s.id %>
</td>
<td align="center">
<%= s.origin_cs unless s.origin_cs.nil? %>
</td>
<td align="center">
<%= s.dest_cs unless s.dest_cs.nil? %>
</td>
</tr>
<% end %>
<% end %>
</tbody>
</table>
jQuery:
var post_load = $('#data_table').dataTable( {
paging: false,
scrollY: 200,
"bAutoWidth": true,
"bJQueryUI": true,
"dom":'TC<"clear"><"toolbar1">frtip',
"oTableTools": {
"sRowSelect": "single",
"aButtons": [
]
},
"columnDefs": [
{
"targets": 0,
"visible": false,
"searchable": false
},
{
"targets": [1,2],
"searchable": false,
"width": "250px"
}]
});