Andrew Diemer
Reputation: 55
How can I insert new entry into jQuery table through a modal?
I have a table of data that I want to add additional info onto through a modal. steps:
- The modal sits above the table
- you click the modal
- enter info for the form in the modal
- click submit and modal closes and data appears in table
Any help with the code below would be greatly appreciated!
Script:
$(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 -->
Upvotes: 0
Views: 89
Answers (1)
user1608841
Reputation: 2475
I have added snippet below for your solution. I have for now added hardcoded data on click of button in Modal. You can actually get the data there from fields of modal. Run below code.
$(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 -->Upvotes: 1
Related Questions
- Add data to dynamic table from modal form
- Taking Text from a modal input field and placing it into a table
- Add inputs from modal to a new table row using javascript
- Data into bootstrap modal from table row using javascript
- Insert data using bootstrap modal in datatables library
- New row in table is not added after closing modal in javaScript
- Get values from form in modal and put them into table row using javaScript
- How to insert value into a html table row by row from a popup modal using jQuery
- Insert data into MYSQL using jquery modal form
- jquery simple modal and insert on database