CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcrazordatatables
kez
kez

Reputation: 2313

get the ID of specific row in JQuery datatable

I have JQuery table like following image

enter image description here

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>

Upvotes: 0

Views: 4376

Answers (3)

Gokul Shinde
Gokul Shinde

Reputation: 965

$('#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());
});

Upvotes: 0

Punit Gajjar
Punit Gajjar

Reputation: 4987

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.

Upvotes: 0

user3559349
user3559349

Reputation:

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 (i.e the element with id="productTable").

Upvotes: 1

Related Questions