Jquery Datatable Delete Row Example - Jquery
How to delete row in datatable using jquery?
Snippet Code
Rate this page :
|
[ 0 votes]
|
Jquery datatable delete code is used to delete the selected row from a table. You should install datatable plugin to run the below code.
<link href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.css" rel="stylesheet">
<script src='https://code.jquery.com/jquery-1.11.1.min.js'></script>
<script src='https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js'></script>
<script>
$(document).ready(function() {
$("#demo_filter").css("display","none");
var table = $('#demo').DataTable();
$('#demo tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
$('#click').click( function () {
table.row('.selected').remove().draw( false );
} );
} );
</script>
<div align='center'>
<table id="demo" class="display" cellspacing="2" border='1'>
<thead>
<tr><th>ID</th><th>Name</th></tr>
</thead>
<tbody style='cursor:pointer;'>
<tr><td>1</td><td>Ani</td></tr>
<tr><td>2</td><td>bob</td></tr>
<tr><td>3</td><td>cat</td></tr>
<tr><td>4</td><td>dot</td></tr>
<tr><td>5</td><td>east</td></tr>
<tr><td>6</td><td>fox</td></tr>
<tr><td>7</td><td>goat</td></tr>
<tr><td>8</td><td>hat</td></tr>
<tr><td>9</td><td>ice</td></tr>
<tr><td>10</td><td>john</td></tr>
<tr><td>11</td><td>kevin</td></tr>
<tr><td>12</td><td>lak</td></tr>
<tr><td>13</td><td>man</td></tr>
<tr><td>14</td><td>not</td></tr>
<tr><td>15</td><td>out</td></tr>
</tbody>
</table>
<input type='button' id='click' value='Delete Row'>
</div>
