如何通过模式将新条目插入到jQuery表中？

Question

我有一个数据表，我想通过模态添加其他信息。步骤：

1. 模态位于表格上方
2. 点击模态
3. 在模态
中输入表单的信息
4. 点击提交，模式关闭，数据显示在表格
中

我们非常感谢您对以下代码的任何帮助！

脚本：

$(document).ready(function() {
    var exampleDatatable = $('#example').DataTable({
        responsive: {
            details: {
                type: 'column',
                target: 'tr'
            }
        },
        columnDefs: [ {
            className: 'control',
            orderable: false,
            targets:   1
        } ],
        order: [ 1, 'asc' ],
        bFilter: true,
        bLengthChange: true,
        pagingType: "simple",
        "paging": true,
        "searching": true,
        "language": {
            "info": " _START_ - _END_ of _TOTAL_ ",
            "sLengthMenu": "<span class='custom-select-title'>Rows per page:</span> <span class='custom-select'> _MENU_ </span>",
            "sSearch": "",
            "sSearchPlaceholder": "Search",
            "paginate": {
                "sNext": " ",
                "sPrevious": " "
            },
        },
        dom:
            "<'row'<'col-sm-12'tr>>" +
            "<'pmd-card-footer' <'pmd-datatable-pagination' l i p>>",
    });

    $('#enter').click(function(){
      $row = $('<tr/>');
          cellVal = $("input1").val();
          $row.append($("<td/>").text(cellVal));
      $('example').append($row);
    });

    /// Select value
    $('.custom-select-info').hide();

    $(".custom-select-action").html('<button class="btn btn-sm pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-primary" type="button"><i class="material-icons pmd-sm">delete</i></button><button class="btn btn-sm pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-primary" type="button"><i class="material-icons pmd-sm">more_vert</i></button>');

} );

HTML：

    <section class="row component-section">
        <!-- table card code and example -->
        <div class="col-md-12">
            <div class="component-box">
                <!-- table card example -->
            <!-- responsive table example -->
            <div class="pmd-card pmd-z-depth pmd-card-custom-view">
            <div class="pmd-card-body modal-btn">
                <div class="row">
                    <div class="col-md-12 col-sm-12"> 
                        <h3><button data-target="#form-dialog" data-toggle="modal" class="btn pmd-ripple-effect btn-primary pmd-z-depth" type="button">Submit a new Code</button></h3>
                        <div tabindex="-1" class="modal fade" id="form-dialog" style="display: none;" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header bordered">
                                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                                        <h2 class="pmd-card-title-text">New Code</h2>
                                    </div>
                                    <div class="modal-body">
                                        <form class="form-horizontal">
                                            <div class="form-group pmd-textfield pmd-textfield-floating-label">
                                                <label for="first-name">Code</label>
                                                <input type="text" class="mat-input form-control" id="test1" value="">
                                            </div>
                                        </form>
                                    </div>
                                    <div class="pmd-modal-action">
                                        <button data-dismiss="modal" value="submit" id="hello" class="btn pmd-ripple-effect btn-primary" type="submit" href="/referal-page.html">Create</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                <table id="example" class="table pmd-table table-hover table-striped display responsive nowrap" cellspacing="0" width="100%">
                    <thead>

                        <tr>
                            <th>First name</th>
                            <th>Last name</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th>Age</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Ashton</td>
                            <td>Cox</td>
                            <td>Junior Technical Author</td>
                            <td>San Francisco</td>
                            <td>66</td>
                        </tr>
                        <tr>
                            <td>Garrett</td>
                            <td>Winters</td>
                            <td>Accountant</td>
                            <td>Tokyo</td>
                            <td>63</td>
                        </tr>
                        <tr>
                            <td>Ashton</td>
                            <td>Cox</td>
                            <td>Junior Technical Author</td>
                            <td>San Francisco</td>
                            <td>66</td>
                        </tr>
                        <tr>
                            <td>Cedric</td>
                            <td>Kelly</td>
                            <td>Senior Javascript Developer</td>
                            <td>Edinburgh</td>
                            <td>22</td>
                        </tr>
                        <tr>
                            <td>Tiger</td>
                            <td>Nixon</td>
                            <td>System Architect</td>
                            <td>Edinburgh</td>
                            <td>61</td>
                        </tr>
                        <tr>
                            <td>Garrett</td>
                            <td>Winters</td>
                            <td>Accountant</td>
                            <td>Tokyo</td>
                            <td>63</td>
                        </tr>
                        <tr>
                            <td>Ashton</td>
                            <td>Cox</td>
                            <td>Junior Technical Author</td>
                            <td>San Francisco</td>
                            <td>66</td>
                        </tr>
                        <tr>
                            <td>Cedric</td>
                            <td>Kelly</td>
                            <td>Senior Javascript Developer</td>
                            <td>Edinburgh</td>
                            <td>22</td>
                        </tr>
                        <tr>
                            <td>Cedric</td>
                            <td>Kelly</td>
                            <td>Senior Javascript Developer</td>
                            <td>Edinburgh</td>
                            <td>22</td>
                        </tr>
                        <tr>
                            <td>Ashton</td>
                            <td>Cox</td>
                            <td>Junior Technical Author</td>
                            <td>San Francisco</td>
                            <td>66</td>
                        </tr>
                        <tr>
                            <td>Cedric</td>
                            <td>Kelly</td>
                            <td>Senior Javascript Developer</td>
                            <td>Edinburgh</td>
                            <td>22</td>
                        </tr>
                        <tr>
                            <td>Donna</td>
                            <td>Snider</td>
                            <td>Customer Support</td>
                            <td>New York</td>
                            <td>27</td>
                        </tr>
                        <tr>
                            <td>Donna</td>
                            <td>Snider</td>
                            <td>Customer Support</td>
                            <td>New York</td>
                            <td>27</td>
                        </tr>
                    </tbody>
                </table>
            </div> <!-- responsive table example end -->

            </div>
        </div> <!-- table card code and example end -->
    </section> <!-- table card end -->

Answer 1

我已在下面添加了解决方案的代码段。我现在已经在Modal中单击按钮添加了硬编码数据。实际上，您可以从模态字段中获取数据。 在代码下面运行。

$(document).ready(function() {
  var exampleDatatable = $('#example').DataTable({
    responsive: {
      details: {
        type: 'column',
        target: 'tr'
      }
    },
    columnDefs: [{
      className: 'control',
      orderable: false,
      targets: 1
    }],
    order: [1, 'asc'],
    bFilter: true,
    bLengthChange: true,
    pagingType: "simple",
    "paging": true,
    "searching": true,
    "language": {
      "info": " _START_ - _END_ of _TOTAL_ ",
      "sLengthMenu": "<span class='custom-select-title'>Rows per page:</span> <span class='custom-select'> _MENU_ </span>",
      "sSearch": "",
      "sSearchPlaceholder": "Search",
      "paginate": {
        "sNext": " ",
        "sPrevious": " "
      },
    },
    dom: "<'row'<'col-sm-12'tr>>" +
      "<'pmd-card-footer' <'pmd-datatable-pagination' l i p>>",
  });

  $('#hello').click(function() {
      exampleDatatable.row.add( [
            'rahul', // get your values from Modal popup here
            'N',
            'PM',
            'Mumbai',
             '27'
        ] ).draw( false );
  });

  /// Select value
  $('.custom-select-info').hide();

  $(".custom-select-action").html('<button class="btn btn-sm pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-primary" type="button"><i class="material-icons pmd-sm">delete</i></button><button class="btn btn-sm pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-primary" type="button"><i class="material-icons pmd-sm">more_vert</i></button>');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section class="row component-section">
  <!-- table card code and example -->
  <div class="col-md-12">
    <div class="component-box">
      <!-- table card example -->
      <!-- responsive table example -->
      <div class="pmd-card pmd-z-depth pmd-card-custom-view">
        <div class="pmd-card-body modal-btn">
          <div class="row">
            <div class="col-md-12 col-sm-12">
              <h3><button data-target="#form-dialog" data-toggle="modal" class="btn pmd-ripple-effect btn-primary pmd-z-depth" type="button">Submit a new Code</button></h3>
              <div tabindex="-1" class="modal fade" id="form-dialog" style="display: none;" aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header bordered">
                      <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                      <h2 class="pmd-card-title-text">New Code</h2>
                    </div>
                    <div class="modal-body">
                      <form class="form-horizontal">
                        <div class="form-group pmd-textfield pmd-textfield-floating-label">
                          <label for="first-name">Code</label>
                          <input type="text" class="mat-input form-control" id="test1" value="">
                        </div>
                      </form>
                    </div>
                    <div class="pmd-modal-action">
                      <button data-dismiss="modal" value="submit" id="hello" class="btn pmd-ripple-effect btn-primary" type="submit" href="/referal-page.html">Create</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <table id="example" class="table pmd-table table-hover table-striped display responsive nowrap" cellspacing="0" width="100%">
          <thead>

            <tr>
              <th>First name</th>
              <th>Last name</th>
              <th>Position</th>
              <th>Office</th>
              <th>Age</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Ashton</td>
              <td>Cox</td>
              <td>Junior Technical Author</td>
              <td>San Francisco</td>
              <td>66</td>
            </tr>
            <tr>
              <td>Garrett</td>
              <td>Winters</td>
              <td>Accountant</td>
              <td>Tokyo</td>
              <td>63</td>
            </tr>
            <tr>
              <td>Ashton</td>
              <td>Cox</td>
              <td>Junior Technical Author</td>
              <td>San Francisco</td>
              <td>66</td>
            </tr>
            <tr>
              <td>Cedric</td>
              <td>Kelly</td>
              <td>Senior Javascript Developer</td>
              <td>Edinburgh</td>
              <td>22</td>
            </tr>
            <tr>
              <td>Tiger</td>
              <td>Nixon</td>
              <td>System Architect</td>
              <td>Edinburgh</td>
              <td>61</td>
            </tr>
            <tr>
              <td>Garrett</td>
              <td>Winters</td>
              <td>Accountant</td>
              <td>Tokyo</td>
              <td>63</td>
            </tr>
            <tr>
              <td>Ashton</td>
              <td>Cox</td>
              <td>Junior Technical Author</td>
              <td>San Francisco</td>
              <td>66</td>
            </tr>
            <tr>
              <td>Cedric</td>
              <td>Kelly</td>
              <td>Senior Javascript Developer</td>
              <td>Edinburgh</td>
              <td>22</td>
            </tr>
            <tr>
              <td>Cedric</td>
              <td>Kelly</td>
              <td>Senior Javascript Developer</td>
              <td>Edinburgh</td>
              <td>22</td>
            </tr>
            <tr>
              <td>Ashton</td>
              <td>Cox</td>
              <td>Junior Technical Author</td>
              <td>San Francisco</td>
              <td>66</td>
            </tr>
            <tr>
              <td>Cedric</td>
              <td>Kelly</td>
              <td>Senior Javascript Developer</td>
              <td>Edinburgh</td>
              <td>22</td>
            </tr>
            <tr>
              <td>Donna</td>
              <td>Snider</td>
              <td>Customer Support</td>
              <td>New York</td>
              <td>27</td>
            </tr>
            <tr>
              <td>Donna</td>
              <td>Snider</td>
              <td>Customer Support</td>
              <td>New York</td>
              <td>27</td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- responsive table example end -->

    </div>
  </div>
  <!-- table card code and example end -->
</section>
<!-- table card end -->