CODEWITHSUNDEEP
javascriptjquerydatatables
DavidM
DavidM

Reputation: 307

DataTables and jQuery to Perform onclick event in a Table

I want to perform a jquery onclick event by clicking the rows of a table. The problem is that the "find" jquery function doesn't work with datatables.

<table id="GVCausal" class="table table-hover table-striped text-nowrap">
    <thead>
        <tr>
            <th class="uno">@Html.CheckBox("chkAll")</th>
            <th class="uno">Código</th>
            <th>Nombre</th>
            <th class="hide">&nbsp;</th>
            <th class="uno">Indemn.</th>
            <th class="uno">Desahuc.</th>
        </tr>
    </thead>
    <tbody>
        <tr role="row" class="odd">
            <td>
                <input data-val="true" data-val-number="The field referencia must be a number." data-val-required="The referencia field is required." id="referencia" name="[0].referencia" type="hidden" value="14">
                <input id="chkDel" name="chkDel" type="checkbox" value="true"><input name="chkDel" type="hidden" value="false">
            </td>
            <td>
                <input data-val="true" data-val-number="The field id must be a number." data-val-required="The id field is required." name="[0].id" type="text" value="14">
            </td>
            <td>
                <input name="[0].nombre" type="text" value="NECESIDADES DE LA EMPRESA ,ESTA">
            </td>
            <td class="hide">Detalle de causal</td>
            <td>
                <input name="[0].indemnizac" type="text" value="S">
            </td>
            <td>
                <input name="[0].desahucio" type="text" value="S">
            </td>
        </tr>
    </tbody>
</table>


<input id="idcausal" name="idcausal" type="hidden" value="">
<textarea class="form-control" cols="20" id="detallecausal" name="detalle" onkeyup="InputChanged(this)" rows="15"></textarea>

This is my try, but it doesn't work well with datatables (e.g. with pagination)

<script>
    $(document).ready(function () {
        var tabla = $('#GVCausal').DataTable();
        $('#GVCausal tbody').on('click', 'tr', function () {
            var fila = tabla.row(this).data();
            $('#detallecausal').val(fila[3]);
            $('#idcausal').val(fila.find('input[name*=id]').val());
        });
    });
</script>

Upvotes: 0

Views: 2088

Answers (1)

Gyrocode.com
Gyrocode.com

Reputation: 58870

Use the code below instead:

$('#GVCausal tbody').on('click', 'tr', function () {
    var fila = tabla.row(this).data();
    $('#detallecausal').val(fila[3]);
    $('#idcausal').val($('input[name*=id]', this).val());
});

Upvotes: 1

Related Questions