Search code examples
javascriptjquerydatatableseachcustom-data-attribute

jQuery get length td match data attribute


I would like to get row count by data attribute, for example, data-engine with ami match 3, what method could possible to get count or length?

Note: the data-engine value as ami come from a smarty template variable. So, i need target data-engine instated of ami

$(document).ready( function () {
    $('#table_id').DataTable();
    
     let data_engines = [];
    $('#table_id').find('td[data-engine]').each(function () {
        let data_engine = $(this).attr('data-engine');
        if ($.inArray(data_engine, data_engines) == -1) {
            data_engines.push(data_engine);
        }
    });

    for (let i = 0; i < data_engines.length; i++) {
        let count = $('#table_id').find('td[data-engine="' + data_engines[i] + '"]').length;
        let option_engine = `<option value="${data_engines[i]}">${data_engines[i]} : ${count}</option>`;
        $('.snds').append(option_engine);
    }
} );
<script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.3/b-2.0.1/fc-4.0.0/sl-1.3.3/datatables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.3/b-2.0.1/fc-4.0.0/sl-1.3.3/datatables.min.css"/>

<table id="table_id">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-engine="ami">Apple</td>
            <td>Mango</td>
        </tr>
        <tr>
            <td data-engine="ami">Mengo</td>
            <td>Apple 2</td>
        </tr>
         <tr>
            <td data-engine="ciam">Apple</td>
            <td>Mango</td>
        </tr>
        <tr>
            <td data-engine="ami">Banana</td>
            <td>Oliv</td>
        </tr>
        <tr>
            <td data-engine="ciam">Oliv</td>
            <td>Orange</td>
        </tr>
    </tbody>
</table>
============================================<br>
Dropdown:
<select class="snds" id="aeid">
<option value="ami">ami</option>
<option value="ciam">ciam</option>
</select>


Solution

  • Update 2:

        let data_engines = [];
        $('#table_id').find('td[data-engine]').each(function () {
            let data_engine = $(this).attr('data-engine');
            if ($.inArray(data_engine, data_engines) == -1) {
                data_engines.push(data_engine);
            }
        });
    
        for (let i = 0; i < data_engines.length; i++) {
            let count = $('#table_id').find('td[data-engine="' + data_engines[i] + '"]').length;
            let text = `${data_engines[i]} : ${count}`;
            $('.snds').find(`option[value="${data_engines[i]}"]`).text(text);
        }
    <table id="table_id">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td data-engine="ami">Apple</td>
                <td>Mango</td>
            </tr>
            <tr>
                <td data-engine="ami">Mengo</td>
                <td>Apple 2</td>
            </tr>
            <tr>
                <td data-engine="ciam">Apple</td>
                <td>Mango</td>
            </tr>
            <tr>
                <td data-engine="ami">Banana</td>
                <td>Oliv</td>
            </tr>
            <tr>
                <td data-engine="ciam">Oliv</td>
                <td>Orange</td>
            </tr>
    
        </tbody>
    </table>
    <select class="snds" id="aeid">
        <option value="ami">ami</option>
        <option value="ciam">ciam</option>
    </select>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>