<div class="wrapper-editor">

​

  <div class="block my-4">

    <div class="d-flex justify-content-center">

      <p class="h5 text-primary createShowP">0 row selected</p>

    </div>

  </div>

​

  <div class="row d-flex justify-content-center modalWrapper">

    <div class="modal fade addNewInputs" id="modalAdd1" tabindex="-1" role="dialog" aria-labelledby="modalAdd"

      aria-hidden="true">

      <div class="modal-dialog" role="document">

        <div class="modal-content">

          <div class="modal-header text-center">

            <h4 class="modal-title w-100 font-weight-bold text-primary ml-5">Add new form</h4>

            <button type="button" class="close text-primary" data-dismiss="modal" aria-label="Close">

              <span aria-hidden="true">&times;</span>

            </button>

          </div>

          <div class="modal-body mx-3">

            <div class="md-form mb-5">

              <input type="text" id="inputfirstname" class="form-control validate" name="firstname">

              <label data-error="wrong" data-success="right" for="inputfirstname">firstname</label>

            </div>

​

            <div class="md-form mb-5">

              <input type="text" id="inputlastname" class="form-control validate" name="lastname">

              <label data-error="wrong" data-success="right" for="inputlastname">lastname</label>

            </div>           

          </div>

          <div class="modal-footer d-flex justify-content-center buttonAddFormWrapper">

            <button class="btn btn-outline-primary btn-block buttonAdd" data-dismiss="modal">Add form

              <i class="fas fa-paper-plane-o ml-1"></i>

            </button>

          </div>

        </div>

      </div>

    </div>

​

    <div class="text-center">

      <a href="" class="btn btn-info btn-rounded btn-sm" data-toggle="modal" data-target="#modalAdd1">Add<i

          class="fas fa-plus-square ml-1"></i></a>

    </div>

​

    <div class="modal fade modalEditClass" id="modalEdit1" tabindex="-1" role="dialog" aria-hidden="true">

      <div class="modal-dialog" role="document">

        <div class="modal-content">

          <div class="modal-header text-center">

            <h4 class="modal-title w-100 font-weight-bold text-secondary ml-5">Edit form</h4>

            <button type="button" class="close text-secondary" data-dismiss="modal" aria-label="Close">

              <span aria-hidden="true">&times;</span>

            </button>

          </div>

          <div class="modal-body mx-3">

             <div class="md-form mb-5">

              <input type="text" id="inputfirstname" class="form-control validate" name="firstname">

              <label data-error="wrong" data-success="right" for="inputfirstname">firstname</label>

            </div>

​

            <div class="md-form mb-5">

              <input type="text" id="inputlastname" class="form-control validate" name="lastname">

              <label data-error="wrong" data-success="right" for="inputlastname">lastname</label>

            </div>

          </div>

          <div class="modal-footer d-flex justify-content-center editInsideWrapper">

            <button class="btn btn-outline-secondary btn-block editInside" data-dismiss="modal">Edit

              form

              <i class="fas fa-paper-plane-o ml-1"></i>

            </button>

          </div>

        </div>

      </div>

    </div>

​

    <div class="text-center buttonEditWrapper">

      <button class="btn btn-info btn-rounded btn-sm buttonEdit" data-toggle="modal" data-target="#modalEdit1"

        disabled>Edit<i class="fas fa-pencil-square-o ml-1"></i></a>

    </div>

​

    <div class="modal fade" id="modalDelete1" tabindex="-1" role="dialog" aria-labelledby="modalDelete1"

      aria-hidden="true">

      <div class="modal-dialog" role="document">

        <div class="modal-content">

          <div class="modal-header text-center">

            <h4 class="modal-title w-100 font-weight-bold ml-5 text-danger">Delete</h4>

            <button type="button" class="close text-danger" data-dismiss="modal" aria-label="Close">

              <span aria-hidden="true">&times;</span>

            </button>

          </div>

          <div class="modal-body mx-3">

            <p class="text-center h4">Are you sure to delete selected row?</p>

​

          </div>

          <div class="modal-footer d-flex justify-content-center deleteButtonsWrapper">

            <button type="button" class="btn btn-danger btnYesClass" id="btnYes1" data-dismiss="modal">Yes</button>

            <button type="button" class="btn btn-primary btnNoClass" id="btnNo1" data-dismiss="modal">No</button>

          </div>

        </div>

      </div>

    </div>

​

    <div class="text-center">

      <button class="btn btn-danger btn-sm btn-rounded buttonDelete" data-toggle="modal" disabled data-target="#modalDelete"

        disabled>Delete<i class="fas fa-times ml-1"></i></a>

    </div>

  </div>

​

  <table id="dt-more-columns" class="table table-striped table-bordered" cellspacing="0" width="100%">

​

  </table>

</div>

​

$(document).ready(function () {

$('#dt-more-columns').DataTable({

    ajax: {

        url: 'core/getdata2.php?action=test',

        dataSrc: ''        

    },

columns: [{title: "firstname", data:"firstname"}, {title: "lastname",data:"lastname"}]

});

$('#dt-more-columns').mdbEditor({

modalEditor: true,

headerLength: 2

});

$('.dataTables_length').addClass('bs-select');

​

});