获取JQuery数据表中特定行的ID

Question

I have JQuery table like following image

I want to alert the ProductID once I click V link text in Action column

    <table id="productTable">

        <thead>
            <tr>
                <th>ProductID</th>
                <th>TitleEN</th>
                <th>TypeEN</th>
                <th>ModifiedDate</th>
                <th>Actions</th>
            </tr>
        </thead>

    </table>  


    @* Load datatable css *@
    <link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />

@section Scripts{
    @* Load DataTable js here *@
    <script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
    <script>
                $(document).ready(function () {
                    $("#productTable").DataTable({
                        "info": false,
                        "processing": true, 
                        "serverSide": true, 
                        "filter": false, 
                        "orderMulti": false, 
                        "ajax": {
                            "url": "/Home/LoadProductData",
                            "type": "POST",
                            "datatype": "json"
                        },
                        "columns": [
                                { "data": "Product_ID", "name": "Product_ID", "autoWidth": true },
                                { "data": "Product_Title_EN", "name": "Product_Title_EN", "autoWidth": true },
                                { "data": "Product_Type_EN", "name": "Product_Type_EN", "autoWidth": true },
                                { "data": "ModifiedDate", "name": "ModifiedDate", "autoWidth": true },
                                {
                                   data: null,
                                   className: "center",
                                   defaultContent: '<a href="" class="editor_view"> V </a>'
                                }
                                  ]
                    });
                });

                $('#editor_view').on('click', 'a.editor_view', function (e) {

                    alert($("data-Product_ID").val());

                });

    </script>

}

currently I alerted its like this

alert($("data-Product_ID").val());

but it cant get the ID of that, hw can I do this ?

this is the html for table row

<tr class="even" role="row">
<td class="sorting_1">02</td>
<td>Current Accounts</td>
<td>Assets</td>
<td></td>
<td class=" center">
<a class="editor_view" href="#"> V </a>
</td>

Answer 1

Change your script to

$("#productTable").on('click', '.editor_view', function() {
    var ID = $(this).closest('tr').find('td').eq(0).text();
    alert(ID);
});

Note that your dynamically generating the table rows so you need event delegation attached to an element that exists in the DOM when the view is first generated (ie the element with id="productTable" ).

Answer 2

$('#editor_view').on('click', 'a.editor_view', function (e) {
   alert($("data-Product_ID").val());
});

Here you have used "editor_view" as ID and I can view it is set as a class, so it will not work. It should be like

$('.editor_view').on('click', 'a.editor_view', function (e) {
  alert($("data-Product_ID").val());
});

Answer 3

Below is my Data table.

table_low_stocks.dataTable({
            "bLengthChange": true,
            "processing": false,
           // "serverSide": true,
            "bPaginate": false,
            "bInfo": false,
            "iDisplayLength" : 5,
            "bSort" : true,
            "ajax": {
                'type': 'POST',
                'url': "<?=action('AdvertiserproductsController@postLowstockproducts')?>"
            },
"columns": [
                /* {"data": "sr_no"}, */
                {"data": "product_name"},
                {"data": "inventory"},
                {"data": "update"} 
            ] // set first column as a default sort by asc
        });

This is how i am rendering the HTML (Datatable from Controller )

return Datatables::of($data)
                        ->add_column('action','<a data-productid="{{$sr_no}}" class="label label-sm label-messages-btn update-product"> <i class="fa fa-pencil-square-o"></i> Update Stock </a>')
                        ->make(true);

If you have seen above i have given data-productid="{{$sr_no}}" to a tag

so ultimately that is what you have to give anyhow,.

Now from the jquery part.what have done is .

$(document).on("click",".update-product", function(e){
        e.preventDefault();


                var getProductId = $(this).data("productid");
                alert(getProductId);
        });

and i got the product Id :-)

to give data attribute do like

data-productid="{{$sr_no}}"

and to get the data attribute u have to use

$(selector).data("productid");

Hope this is helpfull to you.