jQuery Datatables responsive example

by Godly Mathew

HTML

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/responsive/1.0.0/css/dataTables.responsive.css">
<script src="//cdn.datatables.net/responsive/1.0.0/js/dataTables.responsive.js"></script>
<div class="mclass">
    
    <div>
        <input type="text" id="txtSearch" placeholder="Search Name or UHID">
        <input type="button" value="Clear" id="btnClear">
    </div>
    
<br><br>
    
    <table id="example" class="display nowrap" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>RegNo</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Godly</td>
                <td>180255601</td>
            </tr>
            <tr>
                <td>Maria</td>
                <td>180255602</td>
            </tr>
            <tr>
                <td>Sherin</td>
                <td>180255603</td>
            </tr>
            <tr>
                <td>Ansu</td>
                <td>180255604</td>
            </tr>
            <tr>
                <td>Soumya</td>
                <td>180255605</td>
            </tr>
            <tr>
                <td>Sandhya</td>
                <td>180255606</td>
            </tr>

        </tbody>
    </table>
</div>

CSS

.mclass
{
  margin:30px 50px;
}

input[type="text"]
{
  padding:5px 10px;
  border-radius:6px;
  border:solid 1px #c0c0c0;
}

JavaScript

$(document).ready(function() {          
            var table = $('#example').DataTable({
              dom: 'lrt',
              paging: false,
              info: false,
              "search": {
                "caseInsensitive": true
              }
            });
          $('#txtSearch').on('keyup change', function() {
            dataTable_Search($(this).val());
          });

          $('#btnClear').on('click', function() {
            $('#txtSearch').val('');
            dataTable_Search('');
          });

          function dataTable_Search(v) {
            table.search(v).draw();
          }
        });