<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
// default link
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel ="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<link rel="stylesheet" href="jquery.dataTables.css">
<link rel="stylesheet" href="dataTables.responsive.css">
// date popup
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
// date popup
// def link
<style type="text/css">
table#t01 th {
background-color:#0066CC;
color: white;
padding:5px;
}
</style>
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "demo.json",
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" },
{
"mData": null,
"bSortable": false,
"mRender": function(data, type, full) {
return 'Delete';
}
}
]
} );
$(document).ready(function() {
var table = $('#example').DataTable();
$('#example tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
$('#button').click( function () {
table.row('.selected').remove().draw( false );
} );
} );
$("#example").on('click','.btnDelete',function(){
$(this).closest('tr').remove();
alert("SucessFull Delete data from DataBase U Cant Retrive This Data Again ");
});
// Apply Form Button click show/hide
$(function () {
$('.toggle').click(function (event) {
event.preventDefault();
var target = $(this).attr('href');
$(target).toggleClass('hidden show');
});
});
} );
$(function() {
$("#TextBox1").datepicker({
minDate: 0,
maxDate: '+1Y+6M',
onSelect: function (dateStr) {
var min = $(this).datepicker('getDate'); // Get selected date
$("#TextBox2").datepicker('option', 'minDate', min || '0'); // Set other min, default to today
}
});
});
$(function() {
$("#TextBox2").datepicker({
minDate: '0',
maxDate: '+1Y+6M',
onSelect: function (dateStr) {
var max = $(this).datepicker('getDate'); // Get selected date
$('#datepicker').datepicker('option', 'maxDate', max || '+1Y+6M'); // Set other max, default to +18 months
var start = $("#TextBox1").datepicker("getDate");
var end = $("#TextBox2").datepicker("getDate");
var days = (end - start) / (1000 * 60 * 60 * 24);
$("#TextBox3").val(days);
}
});
});
</head>
<body>
Table
Apply Form
Apply Leave Form
Shift Name:
Leave Type:
1
2
3
4
From Date:
delete
Name |
Position |
Office |
Extn. |
Start date |
Salary |
Action |
</body>
</html>