Skip to content

Instantly share code, notes, and snippets.

@fikrimastor

fikrimastor/datatables.html

Last active July 15, 2022 12:37
Show Gist options
  • Save fikrimastor/41826b8e8c7e880882da3330d9589562 to your computer and use it in GitHub Desktop.
Save fikrimastor/41826b8e8c7e880882da3330d9589562 to your computer and use it in GitHub Desktop.
Download ZIP
Datatables Boostrap 5 Add New Row With Input
Raw
datatables.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Datatables JQuery</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap5.min.css">
<style>
.dataTables_length {
display: none;
}
.dataTables_filter {
display: none;
}
.dataTables_info {
display: none;
}
.dataTables_paginate {
display: none;
}
</style>
</head>
<body class="bg-light">
<div class="container py-5" style="max-width: 800px;">
<div class="row">
<div class="col">
<div class="row mb-4">
<div class="col-md-8">
<h1>Datatables JQuery</h1>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<input class="form-control" id="name" type="text" name="name"
aria-describedby="inputGroupPrepend" placeholder="Name"
value="Name 1">
</div>
<div class="col-md-4">
<input class="form-control" id="age" type="number" name="age"
aria-describedby="inputGroupPrepend" placeholder="Age"
value="12">
</div>
<div class="col-md-4">
<button class="btn btn-primary" id="addRow">Add new row</button>
</div>
</div>
<table id="example" class="table table-striped" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous">
</script>
<script>
$(document).ready( function () {
var table = $('#example').DataTable({
columns: [
{
data: 'name',
},
{
data: 'age',
}
]
});
$('#addRow').on('click', function () {
var t = $('#example').DataTable();
var counter = 1;
var name = $('#name').val();
var age = $('#age').val();
var obj ={
"data":[
{
"DT_RowId":counter++,
"name":name,
"age":age
}
]
};
t.rows.add(obj.data).draw();
});
$('#example').on('change', 'input', function () {
var input = $(this).closest('input');
console.log($(input).val());
});
} );
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment