DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables-fixedheader/3.4.0/dataTables.fixedHeader.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.4.0/css/fixedHeader.dataTables.min.css">
<table cellpadding="0" cellspacing="0" border="0" class="row-border" id="table">
<thead>
    <th>Video ID</th>
    <th>Filename</th>
    <th>Action</th>
</thead>
<tbody>
    <tr>
    <td>1</td>
    <td>ABCD</td>
        <td><input type='button' name='deleteBtn' value='Delete' /></td>
    </tr>
    <tr>
    <td>1</td>
    <td>ABCD</td>
        <td><input type='button' name='deleteBtn' value='Delete' /></td>
    </tr>
    <tr>
    <td>1</td>
    <td>ABCD1</td>
        <td><input type='button' name='deleteBtn' value='Delete' /></td>
    </tr>
    <tr>
    <td>1</td>
    <td>ABCD</td>
        <td><input type='button' name='deleteBtn' value='Delete' /></td>
    </tr>
    <tr>
    <td>1</td>
    <td>ABCD</td>
        <td><input type='button' name='deleteBtn' value='Delete' /></td>
    </tr>
    <tr>
    <td>1</td>
    <td>ABCD</td>
        <td><input type='button' name='deleteBtn' value='Delete' /></td>
    </tr>
    <tr>
    <td>1</td>
    <td>ABCD</td>
        <td><input type='button' name='deleteBtn' value='Delete' /></td>
    </tr>
    <tr>
    <td>1</td>
    <td>ABCD</td>
        <td><input type='button' name='deleteBtn' value='Delete' /></td>
    </tr>
    
</tbody>
<tfoot>
    <tr>
        <th>Video ID</th>
        <th>Filename</th>
        <th>Action</th>
    </tr>
</tfoot>
</table>

JavaScript

var table = $('#table').DataTable({fixedHeader:true});