DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="https://www.datatables.net/release-datatables/extensions/FixedColumns/js/dataTables.fixedColumns.js"></script>
<link rel="stylesheet" href="https://www.datatables.net/release-datatables/extensions/FixedColumns/css/dataTables.fixedColumns.css">
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td></td>
            <!-- <td>Extra td</td> -->
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td></td>
            <!-- <td>Tokyo</td> -->
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td></td>
            <!-- <td>San Francisco</td> -->
        </tr>
        <tr>
            <td>Cedric Kelly</td>
            <td>Senior Javascript Developer</td>
            <td></td>
            <!-- <td>Edinburgh</td> -->
        </tr>
    </tbody>
</table>

CSS

.dataTables_filter {
    display: none;
}
th, td {
    white-space: nowrap;
}
div.dataTables_wrapper {
    width: 530px;
}
#example{
    border-bottom: none;
}
#example tr:last-child td:not(.options){
    border-bottom: 1px solid;
}
#example .options{
    background: white;
    border: none;
}

JavaScript

var myTable = $('#example').DataTable({
    "columnDefs": [{ 
        "targets": [2], 
        "orderable": false, 
        //width: '10%',
        "sClass": 'options'
    }]
});

var trIndex = null;
$("#example tr td").mouseenter(function () {
    trIndex = $(this).parent();
    $(trIndex).find("td:last-child").html('<a href="">Edit</a>&nbsp;&nbsp;<a href="">Delete</a>');
});

// remove button on tr mouseleave

$("#example tr td").mouseleave(function () {
    $(trIndex).find('td:last-child').html("&nbsp;");
});