In the table i have using both Pc view and mobile View if i hav add delete button in inside row.
IS delete button is work properly in desktop view when i compresses mobile view its delete its
<!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
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" language="javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="dataTables.responsive.js"></script>
<script src="https://cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.min.js"></script>
// def link
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
table#t01 th {
background-color:#0066CC;
color: white;
padding:5px;
}
</style>
<script type="text/javascript" >
</script>
<script type="text/javascript" >
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "demo.json",
"columns": [
{ "data": "name" },
{
"data": null,
"bSortable": false,
"mRender": function(data, type, full) {
return '<button class="btnDelete">Delete</button>';
}
} ,
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
$(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');
});
});
} );
</script>
<script type="text/javascript">
$(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);
}
});
});
</script>
</head>
<body>
<div class="container">
<h2>Table</h2>
<table id="t01" width="100%">
<tr>
<th>Apply Leave</th>
</tr>
</table>
<br>
<table>
<a href="#credits" class="toggle btn btn-primary">Apply Form</a>
<div id="credits" class="well hidden">
<h1>Apply Leave Form</h1>
<div class="form-group">
<label for="sn">Shift Name:</label>
<input type="text" class="form-control" id="sn">
<label for="st">Leave Type:</label>
<select class="form-control" id="st">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<div class="row">
<div class="input-daterange" id="datepicker" >
<div class="col-xs-6">
<label class="control-label" for="TextBox1">From Date: </label>
<input class="form-control" type="text" id="TextBox1" />
</div>
<div class="col-xs-6">
<label class="control-label" for="TextBox2">To Date: </label>
<input class="form-control" type="text" id="TextBox2" />
</div>
<div class="col-xs-12">
<label class="control-label" for="TextBox3">Total Leave Days: </label>
<input class="form-control" type="text" id="TextBox3" />
</div>
</div>
</div>
<label for="ld">Leave Days:</label>
<input type="text" class="form-control" id="ld">
<label for="lr">Leave Reason:</label>
<textarea class="form-control" rows="5" id="lr"></textarea>
</div>
<div class="row">
<div class="col-xs-12"> <button type="submit" class="btn btn-primary center-block " >submit</button></div>
</div>
</div>
</table>
<button id="button">delete</button>
<table id="example" class="table table-striped table-hover dt-responsive" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th data-priority="2">Action</th>
<th data-priority="1">Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
</div>
</body>
</html>