DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.0.0/js/dataTables.rowReorder.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/rowreorder/1.0.0/css/rowReorder.dataTables.css">
<table id="example">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Salary</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>E-mail</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>$320,800</td>
                <td>Edinburgh</td>
                <td>5421</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>$170,750</td>
                <td>Tokyo</td>
                <td>8422</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>$86,000</td>
                <td>San Francisco</td>
                <td>1562</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>$433,060</td>
                <td>Edinburgh</td>
                <td>6224</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>$162,700</td>
                <td>Tokyo</td>
                <td>5407</td>
                <td>[email protected]</td>
            </tr>
            <tr>
        ...

JavaScript

var table = $("#example").DataTable({
    columns: [
        { name: 'col-name' },
        { name: 'col-position' },
        { name: 'col-salary' },
        { name: 'col-office' },        
        { name: 'col-extn' },
        { name: 'col-email' }
    ]
});

$("#example").on('click', 'td', function() {
    //get the initialization options
    var columns = table.settings().init().columns;
    //get the index of the clickec cell
    var colIndex = table.cell(this).index().column;
    alert('you clicked on the column with the name '+columns[colIndex].name);
})

var columns = table.settings().init().columns;
table.columns().every(function(index) { 
    console.log(columns[index].name);
})