獲取JQuery數據表中特定行的ID

Question

我有如下圖的JQuery表

單擊“操作”列中的“ V鏈接文本后，我想提醒ProductID

    <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>

}

目前我這樣提醒

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

但它無法獲取該ID，為什么我可以這樣做？

這是表格行的html

<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

將腳本更改為

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

請注意，您是動態生成表行的，因此需要在第一次生成視圖時將事件委托附加到DOM中存在的元素（即，具有id="productTable"的元素）。

Answer 2

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

在這里，您已將“ editor_view”用作ID，並且我可以查看將其設置為類，因此它將無法使用。 應該像

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

Answer 3

以下是我的數據表。

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
        });

這就是我渲染HTML（Controller的Datatable）的方式

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);

如果您在上面看到過，我已經將data-productid =“ {{$ sr_no}}”賦予了標簽

所以最終這就是你必須付出的一切。

現在從jquery部分開始。

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


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

我得到了產品ID ：-)

給數據屬性做喜歡

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

並獲取數據屬性，您必須使用

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

希望這對您有幫助。