DataTable 2

With the most recent Bootstrap version

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/r/bs/dt-1.10.8,fh-3.0.0,kt-2.0.0,r-1.0.7,sc-1.3.0/datatables.min.css">
<script src="https://cdn.datatables.net/r/bs/dt-1.10.8,fh-3.0.0,kt-2.0.0,r-1.0.7,sc-1.3.0/datatables.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="col-sm-12">
    <table id="usersTable" class="table table-striped table-bordered table-hover" data-page-length='10'>
        <thead>
            <tr>
                <th>User Name</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Enabled</th>
                <th>Job Title</th>
                <th>Email</th>
                <th>Phone #</th>
                <th>Admin</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr role="row" class="even">
                <td>user name</td>
                <td>First</td>
                <td>Last</td>
                <td>Yes</td>
                <td></td>
                <td>email@emaila</td>
                <td></td>
                <td>No</td>
                <td>Edit</td>
            </tr>
        </tbody>
    </table>
</div>

JavaScript

$('#usersTable').DataTable({
    "drawCallback": function( settings ) {
     if(!$("#usersTable").parent().hasClass("table-responsive")){
      $("#usersTable").wrap("<div class='table-responsive'></div>");
     }
    }
});