'How to Move row up and down, insert row before and after, delete row in DataTable
I tried move row up and down, insert row after and before, delete row and validation in datatable (Table plugin for jQuery) and daterangepicker (A JavaScript component for choosing date ranges, dates and times.) with select option menu. It doesn't work and the validation & daterangepicker doesn't works for all rows (works only the first row).
Code: index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Table with Menu</title>
<!--<link rel="stylesheet" href="style.css">-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.0/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.0/js/jquery.dataTables.js"></script>
</head>
<body>
<button id="addRow">Add Row</button>
<table id="table_id" class="display" style="width:100%">
<thead>
<tr>
<th>S.NO</th>
<th>Employee Id</th>
<th>Full Name</th>
<th>Email</th>
<th>Phone</th>
<th>DOB</th>
<th>Age</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><input type="number" id="empid"></td>
<td><input type="text" id="empname"></td>
<td><input type="email" id="email"></td>
<td><input type="number" id="phone"></td>
<td><input type="text" id="date"></td>
<td><input type="text" id="age"></td>
<td>
<select>
<option value="rowup"><button>Move Row Up</button></option>
<option value="rowdown">Move Row Down</option>
<option value="delete"><button id="del">Delete Row</button></option>
<option value="insertafter">Insert Row after</option>
<option value="insertbefore">Insert Row Before</option>
</select>
</td>
</tr>
</tbody>
</table>
<script src="index1.js"></script>
</body>
</html>
Code: index.js
var iDisplayIndex;
var table1 = $("#table_id").DataTable({
"order": [[0,"desc"]],
"fnRowCallback" : function(nRow, aData, iDisplayIndex){
$("td:first", nRow).html(iDisplayIndex +1);
return nRow;
},
columnDefs: [
{orderable: false, targets: [1,2,3,4,5,6,7]}
],
'drawCallback': function(settings){
$('#table_id tr:last td select option[value="rowup"]').remove();
$('#table_id tr td select option[value="rowup"]').unbind('click');
$('#table_id tr td select option[value="rowdown"]').unbind('click');
$('#table_id tr td select option[value="rowup"]').click(moveUp);
$('#table_id tr td select option[value="rowdown"]').click(moveDown);
}
});
function moveUp(){
var tr = $(this).parents('tr');
moveRow(tr,'up');
}
function moveDown(){
var tr = $(this).parents('tr');
moveRow(tr, 'down');
}
function moveRow(row, direction){
var index = table1.row(row).index();
var order = -1;
if(direction === 'down'){
order = 1;
}
var data1 = table1.row(index).data();
data1.order += order;
var data2 = table1.row(index+order).data();
data2.order += -order;
table1.row(index).data(data2);
table1.row(index+order).data(data1);
table1.page(0).draw(false);
}
var years;
var months;
$('#date').daterangepicker({
singleDatePicker: true,
minYear: 1980,
maxYear: parseInt(moment().format('YYYY'),10)
}, function(start, end, label){
years = moment().diff(start, 'years');
var age = document.getElementById("age");
if(years >= 1){
//alert("you are " + years + " years old!");
age.value = years + " years";
}
else{
months = moment().diff(start, 'months');
//alert('You are ' + months + " months old!");
age.value = months + " months";
}
});
var row = [iDisplayIndex, "<input type='number' id='empid'>","<input type='text' id='empname'>","<input type='email' id='email'>","<input type='number' id='phone'>","<input type='text' id='date'>","<input type='text' id='age'>","<select><option value='rowup'>Move Row up</option><option value='rowdown'>Move Row Down</option><option value='deleterow'><button >Delete Row</button></option><option value='insertnewafter'>Insert new Row After</option><option value='insertnewbefore'>Insert new Row Before</option></select>"];
$("#addRow").on('click', function(){
var empname = document.getElementById("empname");
var empid = document.getElementById("empid");
var email = document.getElementById("email");
var phone = document.getElementById("phone");
var age = document.getElementById("age");
if(empname.value == "" || empname.value == null){
alert("Employee name is empty");
}
if(empid.value == "" || empid.value == null){
alert("Employee Id is empty");
}
if(email.value== "" || email.value == null){
if(!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email.value))){
alert("Email is not in format");
}
else{
alert("Email is empty");
}
}
if(phone.value == "" || phone.value == null){
if(phone.value.length != 10){
alert("Invalid Phone number");
}
else{
alert("Phone is empty");
}
}
if(age.value == "" || age.value == null){
alert("Age is Empty");
}
else{
table1.row.add(row).draw();
}
});
table1.rows().eq(0).each(function(index){
var row1 = table1.row(index);
var data1 = row.data();
console.log(row1,data1);
});
$('#del').on('click','tr', function(){
table1.row(this).delete();
});
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|