Jquery Datatable Search Example - Jquery
How to search in datatable using jquery?
Snippet Code
Rate this page :
|
[ 0 votes]
|
This simple jquery code is used to search the content in data table. To run this code you need to install datatable plugin use latest version of jquery file.
<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() {
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>College</th></tr>
</thead>
<tbody style='cursor:pointer;'>
<tr><td>1</td><td>University departments of Anna University Chennai</td></tr>
<tr><td>2</td><td>P.S.G. College of Technology</td></tr>
<tr><td>3</td><td>Coimbatore Institute of Technology</td></tr>
<tr><td>4</td><td>Sri Sivasubramaniya Nadar College of Engineering</td></tr>
<tr><td>5</td><td>Government College of Technology</td></tr>
<tr><td>6</td><td>Thiagarajar College of Engineering</td></tr>
<tr><td>7</td><td>Kumaraguru College of Technology</td></tr>
<tr><td>8</td><td>Central Electrochemical Research Institute(CSIR)</td></tr>
<tr><td>9</td><td>Sri Venkateswara College of Engineering </td></tr>
<tr><td>10</td><td>St.Joseph College of Engineering</td></tr>
<tr><td>11</td><td>Kongu Engineering College</td></tr>
<tr><td>12</td><td>Mepco Schlenk Engineering College</td></tr>
<tr><td>13</td><td>R.M.K Engineering College</td></tr>
<tr><td>14</td><td>Panimalar Engineering College</td></tr>
<tr><td>15</td><td>Meenakshi Sundararajan Engineering College </td></tr>
</tbody>
</table>
<input type='button' id='click' value='Delete Row'>
</div>
