0
我一直在解决这个问题的挫折点，所以我回到了Stackoverflow。我非常适合初学者，所以我非常感谢你提供任何帮助。数据表刷新不工作
我正在使用我的rails应用程序的数据表，我试图让我在向数据库添加一行后更新表。我按照rails-casts的教程，在这里找到：Rails-casts: JQuery and Ajax，来到我目前所在的位置。
我已成功地提供页面上的链接，点击表单替换页面上的链接。表单将数据成功提交给数据库，然后将表单替换为原始链接（就像在rails-cast教程中一样）。我遇到的唯一问题是试图在不刷新整个页面的情况下刷新表格。
我目前没有得到任何错误。我也尝试了ajax.reload（）的Datatables方法，但是，结果与我目前的情况类似。
请让我知道，如果有任何额外的信息，我可以提供。
查看表格和链接：
<%= link_to 'Add New', new_quote_path, id: "new_link", remote: true %>
<br>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="portlet box blue-madison">
<div class="portlet-title">
<div class="caption">
<i class="icon-speech"></i>
<span class="portlet-title"><%= @quote.company_name %> Census </span>
</div>
</div>
<div class="portlet-body">
<table class="table table-striped table-bordered table-hover" id="sample_2">
<thead>
<tr>
<th>Subscriber ID</th>
<th>First name</th>
<th>Last name</th>
<th>Dob</th>
<th>Sub status</th>
<th>Gender</th>
<th>Uses tobacco</th>
<th>Tobacco cessation</th>
<th>Emp status</th>
<th>Coverage type</th>
<th>Currently enrolled</th>
<th>Current anthem</th>
<th>Current plan</th>
<th>Premium</th>
</tr>
</thead>
<tbody>
<% @employees.where(:company_name => @client.company_name).each do |employee| %>
<tr>
<td>
<a class="xediable-example" href="#" data-xeditable="true" data-pk="<%= employee.id %>" data-model="employee" data-type="text" data-name = "family_id" data-url="/employees/<%= employee.id %>" data-title="Enter title">
<%= employee.family_id %>
</a>
</td>
<td>
<a href="#" data-xeditable="true" data-pk="<%= employee.id %>" data-model="employee" data-type="text" data-name = "first_name" data-url="/employees/<%= employee.id %>" data-title="Enter title">
<%= employee.first_name %>
</a>
</td>
<td>
<a href="#" data-xeditable="true" data-pk="<%= employee.id %>" data-model="employee" data-type="text" data-name = "last_name" data-url="/employees/<%= employee.id %>" data-title="Enter title">
<%= employee.last_name %>
</a>
</td>
<td>
<a href="#" data-xeditable="true" data-pk="<%= employee.id %>" data-model="employee" data-type="text" data-name = "dob" data-url="/employees/<%= employee.id %>" data-title="Enter title">
<%= employee.dob %>
</a>
</td>
<td>
<a href="#" data-xeditable="true" data-pk="<%= employee.id %>" data-model="employee" data-type="text" data-name = "sub_status" data-url="/employees/<%= employee.id %>" data-title="Enter title">
<%= employee.sub_status %>
</a>
</td>
<td>
<a href="#" data-xeditable="true" data-pk="<%= employee.id %>" data-model="employee" data-type="text" data-name = "gender" data-url="/employees/<%= employee.id %>" data-title="Enter title">
<%= employee.gender %>
</a>
</td>
<td>
<a href="#" data-xeditable="true" data-pk="<%= employee.id %>" data-model="employee" data-type="text" data-name = "uses_tobacco" data-url="/employees/<%= employee.id %>" data-title="Enter title">
<%= employee.uses_tobacco %>
</a>
</td>
<td>
<a href="#" data-xeditable="true" data-pk="<%= employee.id %>" data-model="employee" data-type="text" data-name = "tobacco_cessation" data-url="/employees/<%= employee.id %>" data-title="Enter title">
<%= employee.tobacco_cessation %>
</a>
</td>
<td>
<a href="#" data-xeditable="true" data-pk="<%= employee.id %>" data-model="employee" data-type="text" data-name = "emp_status" data-url="/employees/<%= employee.id %>" data-title="Enter title">
<%= employee.emp_status %>
</a>
</td>
<td>
<a href="#" data-xeditable="true" data-pk="<%= employee.id %>" data-model="employee" data-type="text" data-name = "coverage_type" data-url="/employees/<%= employee.id %>" data-title="Enter title">
<%= employee.coverage_type %>
</a>
</td>
<td>
<a href="#" data-xeditable="true" data-pk="<%= employee.id %>" data-model="employee" data-type="text" data-name = "currently_enrolled" data-url="/employees/<%= employee.id %>" data-title="Enter title">
<%= employee.currently_enrolled %>
</a>
</td>
<td>
<a href="#" data-xeditable="true" data-pk="<%= employee.id %>" data-model="employee" data-type="text" data-name = "current_anthem" data-url="/employees/<%= employee.id %>" data-title="Enter title">
<%= employee.current_anthem %>
</a>
</td>
<td>
<a href="#" data-xeditable="true" data-pk="<%= employee.id %>" data-model="employee" data-type="text" data-name = "current_plan_id" data-url="/employees/<%= employee.id %>" data-title="Enter title">
<%= employee.current_plan_id %>
</a>
</td>
<td>
<a href="#" data-xeditable="true" data-pk="<%= employee.id %>" data-model="employee" data-type="text" data-name = "premium" data-url="/employees/<%= employee.id %>" data-title="Enter title">
<%= employee.premium %>
</a>
</td>
</tr>
<% end %>
</tbody>
</table>
</div>
</div>
</div>
</div>
＃sample_2的Javascript：
var initTable2 = function() {
var table = $('#sample_2');
/* Table tools samples: https://www.datatables.net/release-datatables/extras/TableTools/ */
/* Set tabletools buttons and button container */
$.extend(true, $.fn.DataTable.TableTools.classes, {
"container": "btn-group tabletools-dropdown-on-portlet",
"buttons": {
"normal": "btn btn-sm default",
"disabled": "btn btn-sm default disabled"
},
"collection": {
"container": "DTTT_dropdown dropdown-menu tabletools-dropdown-menu"
}
var oTable = table.dataTable({
"order": [
[0, 'asc']
],
"lengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
// set the initial value
"pageLength": 5,
"dom": "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable
"tableTools": {
"sSwfPath": "../../assets/global/plugins/datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf",
"aButtons": [{
"sExtends": "pdf",
"sButtonText": "PDF"
}, {
"sExtends": "xls",
"sButtonText": "Excel"
}, {
"sExtends": "print",
"sButtonText": "Print",
"sInfo": 'Please press "CTR+P" to print or "ESC" to quit',
"sMessage": "Generated by DataTables"
}]
}
});
var tableWrapper = $('#sample_2_wrapper'); // datatable creates the table wrapper by adding with id {your_table_jd}_wrapper
tableWrapper.find('.dataTables_length select').select2(); // initialize select2 dropdown
}
表使用Javascript
<%= form_for @employee, remote: true do |f| %>
<% if @employee.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(@employee.errors.count, "error") %> prohibited this employee from being saved:</h2>
<ul>
<% @employee.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= f.label :company_name %><br>
<%= f.text_field :company_name %>
</div>
<div class="field">
<%= f.label :family_id %><br>
<%= f.text_field :family_id %>
</div>
<div class="field">
<%= f.label :first_name %><br>
<%= f.text_field :first_name %>
</div>
<div class="field">
<%= f.label :last_name %><br>
<%= f.text_field :last_name %>
</div>
<div class="field">
<%= f.label :dob %><br>
<%= f.date_select :dob %>
</div>
<div class="field">
<%= f.label :sub_status %><br>
<%= f.text_field :sub_status %>
</div>
<div class="field">
<%= f.label :gender %><br>
<%= f.text_field :gender %>
</div>
<div class="field">
<%= f.label :uses_tobacco %><br>
<%= f.text_field :uses_tobacco %>
</div>
<div class="field">
<%= f.label :tobacco_cessation %><br>
<%= f.text_field :tobacco_cessation %>
</div>
<div class="field">
<%= f.label :emp_status %><br>
<%= f.text_field :emp_status %>
</div>
<div class="field">
<%= f.label :coverage_type %><br>
<%= f.text_field :coverage_type %>
</div>
<div class="field">
<%= f.label :currently_enrolled %><br>
<%= f.text_field :currently_enrolled %>
</div>
<div class="field">
<%= f.label :current_anthem %><br>
<%= f.text_field :current_anthem %>
</div>
<div class="field">
<%= f.label :current_plan_id %><br>
<%= f.text_field :current_plan_id %>
</div>
<div class="field">
<%= f.label :quote_id %><br>
<%= f.text_field :quote_id %>
</div>
<div class="field">
<%= f.label :premium %><br>
<%= f.text_field :premium %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
<script>
$("#new_employee").submit(function(){
$("#new_link").show();
$("#new_employee").remove();
$("#sample_2").DataTable().destroy();
$("#sample_2").DataTable().draw();
});
</script>
HTML输出：
<div class="page-content" style="min-height:783px">
<!-- BEGIN PAGE HEADER-->
<h3 class="page-title">
ABC Company <small></small>
</h3>
<!-- BEGIN BREADCRUMB-->
<div class="page-bar">
<ul class="page-breadcrumb">
<li>
<a> </a><a href="/"><i class="icon-home"> </i> Home</a>
</li>
</ul>
</div>
<div class="row">
<div class="col-md-6">
<div>
<h3>Account Information </h3>
</div>
<table id="user" class="table table-bordered table-striped">
<tbody>
<tr>
<td style="width:15%">
Company Status
</td>
<td style="width:50%">
<a href="#" data-xeditable="true" data-pk="1" data-model="client" data-type="text" data-name="company_status" data-url="/clients/1" data-title="Enter title" class="editable editable-click">
Active
</a>
</td>
</tr>
<tr>
<td style="width:15%">
Zip Code
</td>
<td style="width:50%">
<a href="#" data-xeditable="true" data-pk="1" data-model="client" data-type="text" data-name="zip_code" data-url="/clients/1" data-title="Enter title" class="editable editable-click">
04963
</a>
</td>
</tr>
<tr>
<td style="width:15%">
Number of Employees
</td>
<td style="width:50%">
<a href="#" data-xeditable="true" data-pk="1" data-model="client" data-type="text" data-name="number_ees" data-url="/clients/1" data-title="Enter title" class="editable editable-click">
100
</a>
</td>
</tr>
<tr>
<td style="width:15%">
Profit Center
</td>
<td style="width:50%">
<a href="#" data-xeditable="true" data-pk="1" data-model="client" data-type="text" data-name="profit_center" data-url="/clients/1" data-title="Enter title" class="editable editable-click">
Augusta BIA
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6">
<div>
<h3>Benefits Team </h3>
</div>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td style="width:15%">
Company Name
</td>
<td style="width:50%">
<a href="#" data-xeditable="true" data-pk="1" data-model="client" data-type="text" data-name="company_name" data-url="/clients/1" data-title="Enter title" class="editable editable-click">
ABC Company
</a>
</td>
</tr>
<tr>
<td style="width:15%">
Producer
</td>
<td style="width:50%">
<a href="#" data-xeditable="true" data-pk="1" data-model="client" data-type="text" data-name="ben_producer" data-url="/clients/1" data-title="Enter title" class="editable editable-click">
Michael
</a>
</td>
</tr>
<tr>
<td style="width:15%">
Account Manager
</td>
<td style="width:50%">
<a href="#" data-xeditable="true" data-pk="1" data-model="client" data-type="text" data-name="ben_manager" data-url="/clients/1" data-title="Enter title" class="editable editable-click">
Jessika
</a>
</td>
</tr>
<tr>
<td style="width:15%">
Benefits Specialist
</td>
<td style="width:50%">
<a href="#" data-xeditable="true" data-pk="1" data-model="client" data-type="text" data-name="ben_csr" data-url="/clients/1" data-title="Enter title" class="editable editable-click">
Paige
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
<a id="new_link" data-remote="true" href="/quotes/new" style="display: inline;">Add New</a>
<script>
$("#new_employee").submit(function(e){
e.preventDefault();
$("#new_link").show();
$("#new_employee").remove();
$("#sample_2").DataTable().destroy();
$("#sample_2").DataTable().draw();
});
</script>
<br>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="portlet box blue-madison">
<div class="portlet-title">
<div class="caption">
<i class="icon-speech"></i>
<span class="portlet-title">ABC Company Census </span>
</div>
</div>
<div class="portlet-body">
<div id="sample_2_wrapper" class="dataTables_wrapper no-footer"><div class="row"><div class="col-md-6 col-sm-12"><div class="dataTables_length" id="sample_2_length"><label> <select name="sample_2_length" aria-controls="sample_2" class="form-control input-xsmall input-inline"><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option></select> records </label></div></div><div class="col-md-6 col-sm-12"><div id="sample_2_filter" class="dataTables_filter"><label>Search:<input type="search" class="form-control input-small input-inline" aria-controls="sample_2"></label></div></div></div><div class="table-scrollable"><table class="table table-striped table-bordered table-hover no-footer dataTable" id="sample_2" role="grid" aria-describedby="sample_2_info">
<thead>
<tr role="row"><th class="sorting_asc" tabindex="0" aria-controls="sample_2" rowspan="1" colspan="1" aria-label="Subscriber ID: activate to sort column ascending" style="width: 90.888888835907px;" aria-sort="ascending">Subscriber ID</th><th class="sorting" tabindex="0" aria-controls="sample_2" rowspan="1" colspan="1" aria-label="First name: activate to sort column ascending" style="width: 71.888888835907px;">First name</th><th class="sorting" tabindex="0" aria-controls="sample_2" rowspan="1" colspan="1" aria-label="Last name: activate to sort column ascending" style="width: 70.888888835907px;">Last name</th><th class="sorting" tabindex="0" aria-controls="sample_2" rowspan="1" colspan="1" aria-label="Dob: activate to sort column ascending" style="width: 31.888888835907px;">Dob</th><th class="sorting" tabindex="0" aria-controls="sample_2" rowspan="1" colspan="1" aria-label="Sub status: activate to sort column ascending" style="width: 70.888888835907px;">Sub status</th><th class="sorting" tabindex="0" aria-controls="sample_2" rowspan="1" colspan="1" aria-label="Gender: activate to sort column ascending" style="width: 49.888888835907px;">Gender</th><th class="sorting" tabindex="0" aria-controls="sample_2" rowspan="1" colspan="1" aria-label="Uses tobacco: activate to sort column ascending" style="width: 89.888888835907px;">Uses tobacco</th><th class="sorting" tabindex="0" aria-controls="sample_2" rowspan="1" colspan="1" aria-label="Tobacco cessation: activate to sort column ascending" style="width: 122.888888835907px;">Tobacco cessation</th><th class="sorting" tabindex="0" aria-controls="sample_2" rowspan="1" colspan="1" aria-label="Emp status: activate to sort column ascending" style="width: 74.888888835907px;">Emp status</th><th class="sorting" tabindex="0" aria-controls="sample_2" rowspan="1" colspan="1" aria-label="Coverage type: activate to sort column ascending" style="width: 95.888888835907px;">Coverage type</th><th class="sorting" tabindex="0" aria-controls="sample_2" rowspan="1" colspan="1" aria-label="Currently enrolled: activate to sort column ascending" style="width: 123.888888835907px;">Currently enrolled</th><th class="sorting" tabindex="0" aria-controls="sample_2" rowspan="1" colspan="1" aria-label="Current anthem: activate to sort column ascending" style="width: 108.888888835907px;">Current anthem</th><th class="sorting" tabindex="0" aria-controls="sample_2" rowspan="1" colspan="1" aria-label="Current plan: activate to sort column ascending" style="width: 85.888888835907px;">Current plan</th><th class="sorting" tabindex="0" aria-controls="sample_2" rowspan="1" colspan="1" aria-label="Premium: activate to sort column ascending" style="width: 63px;">Premium</th></tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td class="sorting_1">
<a class="xediable-example editable editable-click" href="#" data-xeditable="true" data-pk="77" data-model="employee" data-type="text" data-name="family_id" data-url="/employees/77" data-title="Enter title">
12
</a>
</td>
<td>
<a href="#" data-xeditable="true" data-pk="77" data-model="employee" data-type="text" data-name="first_name" data-url="/employees/77" data-title="Enter title" class="editable editable-click editable-empty">Empty</a>
</td>
<td>
<a href="#" data-xeditable="true" data-pk="77" data-model="employee" data-type="text" data-name="last_name" data-url="/employees/77" data-title="Enter title" class="editable editable-click editable-empty">Empty</a>
</td>
<td>
<a href="#" data-xeditable="true" data-pk="77" data-model="employee" data-type="text" data-name="dob" data-url="/employees/77" data-title="Enter title" class="editable editable-click">
2015-03-31
</a>
</td>
<td>
<a href="#" data-xeditable="true" data-pk="77" data-model="employee" data-type="text" data-name="sub_status" data-url="/employees/77" data-title="Enter title" class="editable editable-click editable-empty">Empty</a>
</td>
<td>
<a href="#" data-xeditable="true" data-pk="77" data-model="employee" data-type="text" data-name="gender" data-url="/employees/77" data-title="Enter title" class="editable editable-click editable-empty">Empty</a>
</td>
<td>
<a href="#" data-xeditable="true" data-pk="77" data-model="employee" data-type="text" data-name="uses_tobacco" data-url="/employees/77" data-title="Enter title" class="editable editable-click editable-empty">Empty</a>
</td>
<td>
<a href="#" data-xeditable="true" data-pk="77" data-model="employee" data-type="text" data-name="tobacco_cessation" data-url="/employees/77" data-title="Enter title" class="editable editable-click editable-empty">Empty</a>
</td>
<td>
<a href="#" data-xeditable="true" data-pk="77" data-model="employee" data-type="text" data-name="emp_status" data-url="/employees/77" data-title="Enter title" class="editable editable-click editable-empty">Empty</a>
</td>
<td>
<a href="#" data-xeditable="true" data-pk="77" data-model="employee" data-type="text" data-name="coverage_type" data-url="/employees/77" data-title="Enter title" class="editable editable-click editable-empty">Empty</a>
</td>
<td>
<a href="#" data-xeditable="true" data-pk="77" data-model="employee" data-type="text" data-name="currently_enrolled" data-url="/employees/77" data-title="Enter title" class="editable editable-click editable-empty">Empty</a>
</td>
<td>
<a href="#" data-xeditable="true" data-pk="77" data-model="employee" data-type="text" data-name="current_anthem" data-url="/employees/77" data-title="Enter title" class="editable editable-click editable-empty">Empty</a>
</td>
<td>
<a href="#" data-xeditable="true" data-pk="77" data-model="employee" data-type="text" data-name="current_plan_id" data-url="/employees/77" data-title="Enter title" class="editable editable-click editable-empty">Empty</a>
</td>
<td>
<a href="#" data-xeditable="true" data-pk="77" data-model="employee" data-type="text" data-name="premium" data-url="/employees/77" data-title="Enter title" class="editable editable-click editable-empty">Empty</a>
</td>
</tr></tbody>
</table></div><div class="row"><div class="col-md-5 col-sm-12"><div class="dataTables_info" id="sample_2_info" role="status" aria-live="polite">Showing 1 to 1 of 1 entries</div></div><div class="col-md-7 col-sm-12"><div class="dataTables_paginate paging_simple_numbers" id="sample_2_paginate"><ul class="pagination"><li class="paginate_button previous disabled" aria-controls="sample_2" tabindex="0" id="sample_2_previous"><a href="#"><i class="fa fa-angle-left"></i></a></li><li class="paginate_button active" aria-controls="sample_2" tabindex="0"><a href="#">1</a></li><li class="paginate_button next disabled" aria-controls="sample_2" tabindex="0" id="sample_2_next"><a href="#"><i class="fa fa-angle-right"></i></a></li></ul></div></div></div></div>
</div>
</div>
</div>
</div>
</div>
也提供页面的输出HTML通常是有用的，例如，从浏览器保存，不仅仅是源代码。这样我们就不需要在头脑中编译一切:) – 2015-03-31 15:01:28
感谢您的更新。在你的示例中，我仍然无法找到任何id为'new_employee'的元素。另外，您的注入脚本位于HTML中间，但未包含在DOM就绪事件处理函数中。那是故意的吗？ – 2015-03-31 15:34:37
new_employee指的是新员工表单。事件触发器和与该id绑定的方法$（“＃new_employee”）。remove（）;正在工作。该脚本位于页面中间，因为它暂时位于表单文件中，表单呈现在页面中间。我只是将这个脚本包装在DOM准备好的事件处理程序中，但这也没有帮助。 – 2015-03-31 18:03:44