数据表刷新不起作用

我一直在对这个问题进行故障排除，直到感到沮丧，所以我回到了Stackoverflow。我是一个非常初学者，所以请耐心等待，我感谢您提前提供的帮助。

我在rails应用程序中使用Datatables，并试图在向数据库添加一行后更新该表。我遵循了rails-casts的教程，在这里找到了：rails-casts:JQuery和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>