CODEWITHSUNDEEP
javascriptdatatablesdatatables-1.10
Michael Ngooi
Michael Ngooi

Reputation: 131

Get drop down selected value from row in datatables when trigger button

I've included the sample in jsFiddle.

My question is, how to get the row drop down selected value when trigger the "click" button at the same row.

This is my HTML:

<table id="table1">
<thead>
    <tr>
        <th>Item</th>
        <th>UOM</th>
        <th></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Item 1</td>
        <td>
            <select>
                <option></option>
                <option>BAG</option>
                <option>UNIT</option>
            </select>
        </td>
        <td>
            <button type="button" class="add">Click</button>
        </td>
    </tr>
    <tr>
        <td>Item 1</td>
        <td>
            <select>
                <option></option>
                <option>BAG</option>
                <option>UNIT</option>
            </select>
        </td>
        <td>
            <button type="button" class="add">Click</button>
        </td>
    </tr>
</tbody>

My JavaScript:

oTable = $("#table1").dataTable({
    "fnDrawCallback": function(oSetting){
        $(".add").click(function(){
            var data = oTable.row($(this).parents('tr') ).data();
            console.log(data);
        });
    }
});

Upvotes: 1

Views: 2957

Answers (1)

Gyrocode.com
Gyrocode.com

Reputation: 58900

SOLUTION

I would use rowCallback to define a callback that gets executed when row is drawn.

Then you can query value of <select> element by $('select', row).val() as shown below:

'rowCallback': function(row, data, index){
    $('.add', row).click(function(){
        console.log($('select', row).val());
    });
}

DEMO

See this jsFiddle for code and demonstration.

Upvotes: 2

Related Questions