jQuery get length td match data attribute-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

Create a counter object to track counts then iterate that object to update the display

const engines = {};

$('td[data-engine]').each((i,el) => engines[el.dataset.engine] = (engines[el.dataset.engine]||0)  1)

$.each(engines, (k, v) => $('#engines').append( $('<div>', {text:`Found ${k} :${v}`})))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<div id="engines"></div>