DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.0.1/css/select.dataTables.min.css">
<script src="https://cdn.datatables.net/select/1.0.1/js/dataTables.select.min.js"></script>
<div class="container">
            
<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
    <thead>
        <tr>
            <th>ID</th>
            <th>Rendering engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Engine version</th>
            <th>CSS grade</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Trident</td>
            <td>Internet
                 Explorer 4.0</td>
            <td>Win 95+</td>
            <td> 4</td>
            <td>X</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Trident</td>
            <td>Internet
                 Explorer 5.0</td>
            <td>Win 95+</td>
            <td>5</td>
            <td>C</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Trident</td>
            <td>Internet
                 Explorer 5.5</td>
            <td>Win 95+</td>
            <td>5.5</td>
            <td>A</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Trident</td>
            <td>Internet
                 Explorer 6</td>
            <td>Win 98+</td>
            <td>6</td>
            <td>A</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Trident</td>
            <td>Internet Explorer 7</td>
            <td>Win XP SP2+</td>
            <td>7</td>
            <td>A</td>
        </tr>
        <tr>
            <td>6</td>
            <td>Trident</td>
            <td>AOL browser (AOL desktop)</td>
            <td>Win XP</td>
            <td>6</td>
            <td>A</td>
        </tr>
        <tr>
...

JavaScript

$(document).ready(function() {
    var dt = $('#example').dataTable({
        select: {
            style:    'os',
            info:false
        },
    });
    var api = dt.api();
    
    $(".action").on("click", function(){
        var deleteRows = api.rows({selected: true});
        var approvedDeleteRows = deleteRows.filter(function(value, index, dt){
            var data = dt.row(value).data();
            var ID = data[0];
            return ID % 2 == 0;
        });
        //This is always 10 but it should not
        console.log(approvedDeleteRows.data().length);
    });
    
});