jQuery selector in DataTables

by Kevin Morisette

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">
<table id="example">
    <thead>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>asdf</td>
            <td>asdf</td>
            <td>asdf</td>
            <td>asdf</td>
        </tr>
        <tr>
            <td>fdsa</td>
            <td>asdf
                <input type="checkbox" />
                <input type="checkbox" />
            </td>
            <td>asdf
                <input type="checkbox" />
                <input type="checkbox" />
            </td>
            <td>asdf</td>
        </tr>
        <tr>
            <td>asdf</td>
            <td>asdf</td>
            <td>asdf</td>
            <td>asdf</td>
        </tr>
        <tr>
            <td>asdf</td>
            <td>asdf</td>
            <td>asdf</td>
            <td>
                <input type="text" />
                <input type="checkbox" />
            </td>
        </tr>
    </tbody>
</table>

JavaScript

oTable = $('#example').DataTable();

$('#example tbody').on('click', 'tr:not(input)', function () {
    if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
    } else {
        oTable.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
    }
});