如何获取隐藏的 ID 以删除 jQuery 数据表中的记录 [英] How to get a hidden Id to delete a record in a jQuery Datatable

问题描述

我的 jQuery DataTable 中有编辑"和删除"按钮.第一列是记录 ID 列并且是隐藏的.我有编辑和删除按钮的事件处理程序.我应该使用 DataTable click 和 tr 函数的事件处理程序来获取 id，还是使用按钮事件处理程序(首选)，我如何从行中获取 Id?即确定点击了哪一行?

 const dataTable = $('#personTable').DataTable({数据:序列化对象，列: [{数据:'ID'，'可见':假}，{数据:'标题代码'}，{数据:'标题详细信息'}，{数据:'名字'}，{数据:'姓氏'}，{数据:空}],列定义:[{目标:8，data: 'ID',//'
<按钮类型="按钮"' +defaultContent: '<div class="floatRightClass" >'+'<a class="btn btn-default glyphicon glyphicon-pencil btn-edit" title="编辑"></a>'+'<a class="btn btn-default glyphicon glyphicon-trash btn-delete" title="删除"></a>'+'</div>'},]});$(".btn-delete").click(function (e){var dtTable = $('#personTable').DataTable();var selectedRows = dtTable.rows('tr.selected');var id = selectedRows.data().toArray().map(function (row) { return row.id });console.log("id=" + ID);//或者console.log("id=" + dataTable.rows('tr.selected').data().toArray().map(function(row){return row.ID}));//这有效，但行索引是硬编码的alert("..." + dtTable.cells({ row: 0, column: 0 }).data()[0]);//错误:未定义selectedIndex = dtTable.row(this).data()[0];alert("Id = " + selectedIndex.ID);});$('#personTable tbody').on('click', '.btn-delete', function (){var tr = $(this).closest("tr");var rowindex = tr.index();警报(行索引" + 行索引)；//获取隐藏列中ID的值(col: 0)alert("..." + dataTable.cells({ row: rowindex, column: 0 }).data()[0]);});

解决方案

通过使用$('#personTable tbody').on('click', '.btn-edit2', function ()我可以得到行的索引和隐藏的单元格值orID，用于serverSide-Db-Processing.

I have Edit and Delete buttons in my jQuery DataTable. The first column is a record ID column and is hidden. I have event handlers for the Edit and Delete buttons. Should I rather use the event handler for the DataTable click and tr function to get the id, or if using the button event handlers (preferable), how can I get the Id from the row? i.e. identify which row was clicked on?

 const dataTable = $('#personTable').DataTable({
        data: serializedObject,
        columns: [
            { data: 'ID', 'visible': false},  
            { data: 'TitleCode' },
            { data: 'TitleDetail' },
            { data: 'FirstName' },
            { data: 'LastName' },
            {data: null}
        ],
        columnDefs: [
            {
                targets: 8, 
                data: 'ID',  //'<div class="btn-group" style="width:70px"> <button type="button"' +
                defaultContent: '<div class="floatRightClass" >' +
                        '<a class="btn btn-default glyphicon glyphicon-pencil btn-edit" title="Edit"> </a>' +
                        '<a class="btn btn-default glyphicon glyphicon-trash btn-delete" title="Delete"> </a>' +
                    '</div>'
            },

        ]
    });

    $(".btn-delete").click(function (e)
    {
        var dtTable = $('#personTable').DataTable();
        var selectedRows = dtTable.rows('tr.selected');

        var id = selectedRows.data().toArray().map(function (row) { return row.id });
        console.log("id= " + ID);

        // or
        console.log("id= " + dataTable.rows('tr.selected').data().toArray().map(function(row){return row.ID}));


        // This works, but the row index is hardcoded
        alert("..." + dtTable.cells({ row: 0, column: 0 }).data()[0]);

        // Error: undefined
        selectedIndex = dtTable.row(this).data()[0];
        alert("Id = " + selectedIndex.ID);

    });

   $('#personTable tbody').on('click', '.btn-delete', function ()
    {
        var tr = $(this).closest("tr");
        var rowindex = tr.index();

        alert("rowindex " + rowindex);

        // Get the value of the ID in the hidden column (col: 0)
        alert("..." + dataTable.cells({ row: rowindex, column: 0 }).data()[0]);
    });

解决方案

By using the $('#personTable tbody').on('click', '.btn-edit2', function () I can get the index of the row and the hidden cell value orID for use in serverSide - Db - Processing.

这篇关于如何获取隐藏的 ID 以删除 jQuery 数据表中的记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！