【发布时间】：2018-05-04 11:20:30
【问题描述】：
当用户重新访问表所在的页面时，如何使我的 Datatable 与 Turbolinks 一起使用。第一次访问该页面时它工作正常。但是，如果您移动到另一个页面，然后再回到它。该页面加载了以前的内容，然后很快表中的所有数据都消失了。
我在 Rails 中使用 ajax-datatable gem，代码如下：
在现金流咖啡脚本中：
$-> $('#cashflows_table').dataTable
processing: true
serverSide: true
select: true
ajax: $('#cashflows_table').data('source')
url: 'cashflows/index.html.erb'
type: 'POST'
pagingType: 'full_numbers'
columns: [
{ searchable: true, orderable: true, data: 'date' },
{ searchable: true, orderable: false, data: 'description' },
{ searchable: true, orderable: true, data: 'amount' },
{ searchable: true, visible: false, orderable: true, data: 'created_at' },
{ ssearchable: true, visible: false, orderable: true, data: 'updated_at' },
{ searchable: false, visible: false, orderable: false, data: 'user_id' },
{ searchable: true, visible: true, orderable: true, data: 'name' },
]
$('#datepicker').datetimepicker format: 'DD/MM/YYYY'
$("a[data-remote]").on "ajax:success", (e, data, status, xhr) ->
alert "The article was deleted."
('#cashflow_table').dataTable.fnDestroy
$ ->
$('#form-show').click ->
$('#form-section').toggle()
$ ->
$('#form-hide').click ->
$('#form-section').slideUp()
false
cashflows 数据表类的代码如下：
class CashflowDatatable < AjaxDatatablesRails::Base
def user
@user ||= options[:user]
end
def view_columns
# Declare strings in this format: ModelName.column_name
# or in aliased_join_table.column_name format
@view_columns ||= {
# id: { source: "User.id", cond: :eq },
# name: { source: "User.name", cond: :like }
date: { source: 'Cashflow.date', cond: :like, searchable: true},
description: { source: 'Cashflow.description', cond: :like },
amount: { source: 'Cashflow.amount', cond: :eq, searchable: true},
created_at:{ source: 'Cashflow.created_at', cond: :eq },
updated_at: { source: 'Cashflow.updated_at', cond: :eq },
user_id: { source: 'Cashflow.user_id', cond: :eq },
category: { source: 'Cashflow.category.name',cond: :eq,
searchable: true },
name: { source: 'Category.name', cond: :eq,
searchable: true }
}
end
def data
records.map do |record|
{
date: record.date,
description: record.description,
created_at: record.created_at,
updated_at: record.updated_at,
user_id: record.user_id,
name: record.category.name,
amount: record.amount,
}
end
end
private
def get_raw_records
Cashflow.where(user_id: options[:current_user].id).joins(:category)
end
# ==== These methods represent the basic operations to perform on records
# and feel free to override them
def filter_records(records)
->(column) { column.table[column.field].eq(column.search.value.to_i + 1) }
end
# def sort_records(records)
# end
# def paginate_records(records)
# end
# ==== Insert 'presenter'-like methods below if necessary
end
我的现金流量表 HTML 模板如下所示：
<div class='container'>
<div class='row'>
<div class=col-md-12>
<div class='row'>
<div class="col-md-12" style = 'background-color: white'>
<button id= 'form-show' class= 'btn btn-primary form-btn'> Add Transaction</button>
</div>
<div class='row'>
<br/>
<%=render 'form'%>
</div>
<br/>
<table id="cashflows_table"
class="table table-striped table-bordered"
width="100%",
data-source = "<%= cashflows_path(format: :json)%>">
<thead>
<tr>
<th class="col-xs-12 col-sm-6 col-md-4 col-lg-1" scope="col">Date</th>
<th class="col-xs-12 col-sm-6 col-md-4 col-lg-4" scope="col">Description</th>
<th class="col-xs-12 col-sm-6 col-md-4 col-lg-2" scope="col">Amount</th>
<th class="col-xs-12 col-sm-6 col-md-4 col-lg-1" scope="col">created_at</th>
<th class="col-xs-12 col-sm-6 col-md-4 col-lg-1" scope="col">udpated_at</th>
<th class="col-xs-12 col-sm-6 col-md-4 col-lg-1" scope="col">user_id</th>
<th class="col-xs-12 col-sm-6 col-md-4 col-lg-1" scope="col">name</th>
</tr>
</thead>
<tbody class="table-hover">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
而我的application.html.erb如下：
<!DOCTYPE html>
<html>
<head>
<meta text/html; charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>
Cash Flosum
</title>
<%= javascript_pack_tag 'application', "data-turbolinks-track": "reload" %>
<%= javascript_pack_tag 'application' %>
<%= javascript_include_tag 'application', "data-turbolinks-track": "reload"%>
<%= stylesheet_link_tag 'application', media: 'all'%>
<%= csrf_meta_tags %>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css" data-turbolinks-track="reload">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js" data-turbolinks-track="reload"></script>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<!--Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head>
<header>
<%= render 'layouts/navigation' %>
<%= render 'layouts/messages'%>
</header>
<body>
<div class = 'container-fluid'>
<%= yield %>
</div>
</body>
<foot>
<%=render 'layouts/footer'%>
</foot>
<%= debug(params) if Rails.env.development? %>
</html>
【问题讨论】：