javascript - 不能向我的数据表添加超过 10 行

Question

我想动态地将行添加到我的 DataTable 以保存它们，但是当我达到 10 行时，我无法获得更多，甚至无法保存它。

// Add row into table
var addRowTable = {
  options: {
    addButton: "#addToTable",
    table: "#addrowExample",
    dialog: {}
  },
  initialize: function() {
    this.setVars().build().events()
  },
  setVars: function() {
    return this.$table = $(this.options.table), this.$addButton = $(this.options.addButton), this.dialog = {}, this.dialog.$wrapper = $(this.options.dialog.wrapper), this.dialog.$cancel = $(this.options.dialog.cancelButton), this.dialog.$confirm = $(this.options.dialog.confirmButton), this
  },
  build: function() {
    //var window.table = this.datatable;
    return this.datatable = this.$table.DataTable({
      aoColumns: [null, null, null, null, null, null, {
        bSortable: !1
      }],
      "sDom": 't'
    }), window.dt = this.datatable, this
  },
  events: function() {
    var object = this;
    return this.$table.on("click", "button.button-save", function(e) {
      e.preventDefault(), object.rowSave($(this).closest("tr"))
    }).on("click", "button.button-discard", function(e) {
      e.preventDefault(), object.rowCancel($(this).closest("tr"))
    }).on("click", "button.button-remove", function(e) {
      e.preventDefault();
      var $row = $(this).closest("tr");
      var sumToRemove = $(this).closest('tr').find('td:eq(5)').text();

      //Update sum value
      Application.sumCharge -= parseFloat(sumToRemove);
      $("#lb-sum").html(Application.sumCharge.toFixed(2));

      object.rowRemove($row)

    }), this.$addButton.on("click", function(e) {
      e.preventDefault(), object.rowAdd()
    }), this.dialog.$cancel.on("click", function(e) {
      e.preventDefault(), $.magnificPopup.close()
    }), this
  },
  rowAdd: function() {
    this.$addButton.attr({
      disabled: "disabled"
    });
    var actions, data, $row;
    actions = ['<button class="btn btn-sm btn-icon btn-pure btn-default on-editing button-save" data-toggle="tooltip" data-original-title="Save" hidden><i class="icon-drawer" aria-hidden="true"></i></button>', '<button class="btn btn-sm btn-icon btn-pure btn-default on-editing button-discard" data-toggle="tooltip" data-original-title="Discard" hidden><i class="icon-close" aria-hidden="true"></i></button>', '<button class="btn btn-sm btn-icon btn-pure btn-default on-default button-remove"><i class="icon-trash" aria-hidden="true"></i></button>'].join(" "), data = this.datatable.row.add(["", "", "", "", "", "", actions]), ($row = this.datatable.row(data[0]).nodes().to$()).addClass("adding").find("td:last").addClass("actions"), this.rowEdit($row), this.datatable.order([0, "asc"]).draw()
  },
  rowCancel: function($row) {
    var $actions, data;
    $row.hasClass("adding") ? this.rowRemove($row) : (($actions = $row.find("td.actions")).find(".button-discard").tooltip("hide"), $actions.get(0) && this.rowSetActionsDefault($row), data = this.datatable.row($row.get(0)).data(), this.datatable.row($row.get(0)).data(data), this.handleTooltip($row), this.datatable.draw())
  },
  rowEdit: function($row) {
    var counter = 0;
    var data, object = this;
    data = this.datatable.row($row.get(0)).data(), $row.children("td").each(function(i) {
      var $this = $(this);

      if (counter == 0) {
        Application.tableLength++;
        $this.hasClass("actions") ? object.rowSetActionsEditing($row) : $this.html('<label style="font-weight: 400 !important">' + Application.tableLength + '</label>');
      } else if (counter > 0 && counter < 5) {

        if (counter == 1) {
          $this.hasClass("actions") ? object.rowSetActionsEditing($row) : $this.html('<input pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" data-provide="datepicker" data-date-autoclose="true" class="form-control input-date" value="' + data[i] + '" required>');

        } else if (counter == 2) {
          $this.hasClass("actions") ? object.rowSetActionsEditing($row) : $this.html('<input type="text" class="form-control" value="' + data[i] + '" required>');

        } else if (counter == 3) {
          $this.hasClass("actions") ? object.rowSetActionsEditing($row) : $this.html('<input type="text" class="form-control" value="' + data[i] + '" required>');

        } else if (counter == 4) {
          $this.hasClass("actions") ? object.rowSetActionsEditing($row) : $this.html('<input type="text" class="form-control" value="' + data[i] + '" required>');


        }
      } else {
        $this.hasClass("actions") ? object.rowSetActionsEditing($row) : $this.html('<input type="number" step="0.01" class="form-control" value="' + data[i] + '" required>');

      }
      counter++;

    })
  },
  rowSave: function($row) {
    if ($('#form').get(0).reportValidity()) {
      var $actions, object = this,
        values = [],
        counter = 0;

      $row.hasClass("adding") && (this.$addButton.removeAttr("disabled"), $row.removeClass("adding")), values = $row.find("td").map(function() {
        var $this = $(this),
          input = '',
          input_value = $this.find("label,input,textarea").val();

        if ($this.hasClass("actions")) {
          return object.rowSetActionsDefault($row), object.datatable.cell(this).data();
        } else {
          if (counter == 0) {
            input = $this.find("label").text();
          } else if (counter > 0 && counter < 5) {
            if (counter == 1) {
              input = "<input type='hidden' name='date[]' value='" + input_value + "'>";

            }
            if (counter == 2) {
              input = "<input type='hidden' name='description[]'  value='" + input_value + "'>";

            } else if (counter == 3) {
              input = "<input type='hidden' name='details[]'  value='" + input_value + "'>";

            } else if (counter == 4) {
              input = "<input type='hidden' name='charge_observation[]'  value='" + input_value + "'>";


            }
          } else {
            input = "<input type='hidden' name='sum[]'  value='" + input_value + "'>";
            Application.sumCharge += parseFloat(input_value);
            $("#lb-sum").html(Application.sumCharge.toFixed(2));
          }
          counter++;

          return $.trim($this.find("label,input,textarea").val()) + input;
        }

      }), ($actions = $row.find("td.actions")).find(".button-save").tooltip("hide"), $actions.get(0) && this.rowSetActionsDefault($row), this.datatable.row($row.get(0)).data(values), this.handleTooltip($row), this.datatable.draw()
    }
  },
  rowRemove: function($row) {
    $row.hasClass("adding") && this.$addButton.removeAttr("disabled"), this.datatable.row($row.get(0)).remove().draw()
  },
  rowSetActionsEditing: function($row) {
    $row.find(".on-editing").removeAttr("hidden"), $row.find(".on-default").attr("hidden", !0)
  },
  rowSetActionsDefault: function($row) {
    $row.find(".on-editing").attr("hidden", !0), $row.find(".on-default").removeAttr("hidden")
  },
  handleTooltip: function($row) {
    $row.find('[data-toggle="tooltip"]').tooltip()
  }
};
$(function() {
  addRowTable.initialize()
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>

<div class="table-responsive">
  <table class="table table-bordered table-hover table-striped fixed" cellspacing="0" id="addrowExample">
    <thead>
      <tr>
        <th style="width: 5%">#</th>
        <th>{{ __('all.date')}}</th>
        <th>{{ __('all.description')}}</th>
        <th>{{ __('all.details')}}</th>
        <th style="width: 25%">{{ __('all.observation')}}</th>
        <th>{{ __('all.sum')}}</th>
        <th style="width: 10%">{{ __('all.action')}}</th>
      </tr>
    </thead>
    <tbody>

    </tbody>

    <tbody>

    </tbody>
  </table>
  <h6 class="p-10 bg-primary text-light text-right">{{ __('all.total sum')}} : <b id="lb-sum">0.00</b> <small>MAD</small></h6>
</div>

标签： javascriptjquerydatatables