Some Popular Items

HTML

<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<h1>Some Popular Items</h1>

<table id="somePopItems" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Role</th>
            <th>Region</th>
            <th>Employee Name</th>
            <th>Actions</th>
           
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Admin</td>
            <td>east</td>
            
            <td>Priyanka</td>
            <td>edit|deactivate</td>
        </tr>
        <tr>
            <td>Admin</td>
            <td>east,west</td>
            
            <td>ajith</td>
            <td>edit|deactivate</td>
        </tr>
        <tr>
            <td>Admin</td>
            <td>south,east</td>
            
            <td>revathi</td>
            <td>edit|deactivate</td>
        </tr>
        <tr>
            <td>sales Admin</td>
            <td>north,west1</td>
            
            <td>Priyanka</td>
            <td>edit|deactivate</td>
        </tr>
        <tr>
            <td>Admin</td>
            <td>east</td>
            
            <td>Akanskhya</td>
            <td>edit|deactivate</td>
        </tr>
        <tr>
           <td>Sales Admin</td>
            <td>east</td>
            
            <td>poornima</td>
            <td>edit|deactivate</td>
        <tr>
            <td>Admin</td>
            <td>west2,east</td>
            
            <td>Ram</td>
            <td>edit|deactivate</td>
        </tr>
    </tbody>
</table>

JavaScript

$(document).ready(function () {
    $('#somePopItems').dataTable({
        columnDefs: [{
            targets: [0],
            orderData: [0, 1]
        }, {
            targets: [1],
            orderData: [1, 0]
        }, {
            targets: [2],
            orderData: [2, 0]
        },
         {
            targets: [3],
            orderData: [3, 0]
            }]
    });
});