Question

我有像下面的图像一样的JQuery表

点击“操作”列中的ProductID链接文字后，我想提醒V

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

在这里你使用了＆＃34; editor_view＆＃34;作为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（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);

如果您已经看到上面我已经给出了data-productid =＆＃34; {{$ sr_no}}＆＃34;到标签

所以最终这就是你必须给予的，。

现在来自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");

希望这对你有所帮助。

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

3 个答案: