如何在单击 Jquery Datatable 的按钮时获取行值

Question

我已经使用 jquery 创建了一个数据表，如下所示 -

function LoadtblItemWiseOrder() {

$("#tblItemWiseOrder").DataTable().destroy();
var req = {
    "processing": true,
    "language": {
        processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span> '
    },
    "serverSide": true,
    "paging": true,
    "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
    "pageLength": 5,
    "searching": true,
    "filter": true,
    "language": {
        "paginate": {
            "next": '&#8594;',
            "previous": '&#8592;'
        }
    },
    "ajax": {
        "url": window.LoadItemWiseOrders,
        "type": "POST",
        "datatype": "json",
        "data": {}
    },
    'order': [[0, "asc"]],
    columns: [
        { title: "SNo", "data": "SNo", "name": "SNo", "autoWidth": true, "visible": true },
        { title: "Id", "data": "Id", "name": "Id", "autoWidth": true, "visible": false },
        { title: "WA No", "data": "SoNoView", "name": "SoNoView", "autoWidth": true, "visible": true },
        { title: "Customer Id", "data": "CustomerId", "name": "CustomerId", "autoWidth": true, "visible": true },
        { title: "Customer Name", "data": "CustomerName", "name": "CustomerName", "autoWidth": true, "visible": true },
        { title: "PO No", "data": "PoNo", "name": "PONo", "autoWidth": true, "visible": true },
        { title: "PO Date", "data": "PoDate", "name": "PODate", "autoWidth": true, "visible": true },
        { title: "PO Delivery Date", "data": "PoDeliveryDate", "name": "PODeliveryDate", "autoWidth": true, "visible": false },
        { title: "Supply", "data": "SupplyTerms", "name": "SupplyTerms", "autoWidth": true, "visible": false },
        { title: "Supply Terms", "data": "SupplyTermsText", "name": "SupplyTermsText", "autoWidth": true, "visible": false },
        { title: "QuoteNos", "data": "QuoteNo", "name": "QuoteNo", "autoWidth": true, "visible": false },
        { title: "QuoteItems", "data": "QuoteItemSlNo", "name": "QuoteItemSlNo", "autoWidth": true, "visible": false },
        { title: "Quote No", "data": "QuoteNoView", "name": "QuoteNoView", "autoWidth": true, "visible": true },
        { title: "Quote Item Sl No", "data": "QuoteItemSlNoText", "name": "QuoteItemSlNoText", "autoWidth": true, "visible": true },
        { title: "PO Sl No", "data": "PoSLNo", "name": "PoSLNo", "autoWidth": true, "visible": false },
        { title: "PO Qty", "data": "PoQty", "name": "PoQty", "autoWidth": true, "visible": false },
        { title: "Unit Price", "data": "UnitPrice", "name": "UnitPrice", "autoWidth": true, "visible": true },
        {
            title: "Action", "data": "", orderable: false, width: "auto",
            "render": function (data, type, full, meta) {
                var columnVal = "";
                columnVal = '<div><button type = "button" onclick=EditOrderItems("' + $(this) + '") class="btn btn-info btn-sm"> Edit </button><button type = "button" onclick=DeleteUsingItemId("' + full.Id + '") class="btn btn-danger btn-sm"> Delete </button></div>';
                return columnVal;
            }
        }
    ],
    "fnCreatedRow": function (nRow, aData, iDataIndex) {
    },
    "drawCallback": function (settings) {
    },
    "footerCallback": function (row, data, start, end, display) {

    }
}

$("#tblItemWiseOrder").DataTable(req);
$("#tblItemWiseOrder tbody").show();

}

HTML 的标头固定为 -

<table id="tblItemWiseOrder" class="table table-striped table-info">
                    <thead>
                        <tr>
                            <td>SNo</td>
                            <td>Id</td>
                            <td>Order Type</td>
                            <td>WA No</td>
                            <td>Customer Id</td>
                            <td>Customer Name</td>
                            <td>PO No</td>
                            <td>PO Date</td>
                            <td>PO Delivery Date</td>
                            <td>Supply</td>
                            <td>Supply Terms</td>
                            <td>QuoteNos</td>
                            <td>Quote No</td>
                            <td>Quote Items</td>
                            <td>Quote Item Sl No</td>
                            <td>PO Sl No</td>
                            <td>PO Qty</td>
                            @*<td>Unit Price</td>*@
                            <td>Action</td>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>

现在，我希望在按钮单击<button type = "button" onclick=EditOrderItems("' + $(this) + '") class="btn btn-info btn-sm"> Edit </button> 时使用所有行值调用我的函数。但我无法获得所有行的值 -

function  EditOrderItems(thisObj) {

thisObj.parent().parent().children().each(function () {
    alert("childs");
});
}

但我无法获得我在很多地方搜索过的类似于here 的值。另外我想将行数据作为参数传递给函数。那么，这可能吗？

编辑： 我已按照答案中的建议修改了表结构 -

    var myData = [];
function LoadtblItemWiseOrder() {

    $("#tblItemWiseOrder").DataTable().destroy();
    var req = {
        "processing": true,
        "language": {
            processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span> '
        },
        "serverSide": true,
        "paging": true,
        "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
        "pageLength": 5,
        "searching": true,
        "filter": true,
        "language": {
            "paginate": {
                "next": '&#8594;',
                "previous": '&#8592;'
            }
        },
        "ajax": {
            "url": window.LoadItemWiseOrders,
            "type": "POST",
            "datatype": "json",
            "data": {},
            "dataSrc": function (json) {
                myData = json.data;
                return json.data;
            }
        },
        'order': [[0, "asc"]],
        columns: [
            { title: "SNo", "data": "SNo", "name": "SNo", "autoWidth": true, "visible": true },
            { title: "Id", "data": "Id", "name": "Id", "autoWidth": true, "visible": false },
            { title: "WA No", "data": "SoNoView", "name": "SoNoView", "autoWidth": true, "visible": true },
            { title: "Customer Id", "data": "CustomerId", "name": "CustomerId", "autoWidth": true, "visible": true },
            { title: "Customer Name", "data": "CustomerName", "name": "CustomerName", "autoWidth": true, "visible": true },
            { title: "PO No", "data": "PoNo", "name": "PONo", "autoWidth": true, "visible": true },
            { title: "PO Date", "data": "PoDate", "name": "PODate", "autoWidth": true, "visible": true },
            { title: "PO Delivery Date", "data": "PoDeliveryDate", "name": "PODeliveryDate", "autoWidth": true, "visible": false },
            { title: "Supply", "data": "SupplyTerms", "name": "SupplyTerms", "autoWidth": true, "visible": false },
            { title: "Supply Terms", "data": "SupplyTermsText", "name": "SupplyTermsText", "autoWidth": true, "visible": false },
            { title: "QuoteNos", "data": "QuoteNo", "name": "QuoteNo", "autoWidth": true, "visible": false },
            { title: "QuoteItems", "data": "QuoteItemSlNo", "name": "QuoteItemSlNo", "autoWidth": true, "visible": false },
            { title: "Quote No", "data": "QuoteNoView", "name": "QuoteNoView", "autoWidth": true, "visible": true },
            { title: "Quote Item Sl No", "data": "QuoteItemSlNoText", "name": "QuoteItemSlNoText", "autoWidth": true, "visible": true },
            { title: "PO Sl No", "data": "PoSLNo", "name": "PoSLNo", "autoWidth": true, "visible": false },
            { title: "PO Qty", "data": "PoQty", "name": "PoQty", "autoWidth": true, "visible": false },
            { title: "Unit Price", "data": "UnitPrice", "name": "UnitPrice", "autoWidth": true, "visible": true },            
            {
                data: 'id',
                title: "Action", "data": "", orderable: false, width: "auto",
                render: value => `<div><button type="button" class="btn btn-info btn-sm editItemBtn" data-id="${value}">Edit</button> <button type="button" class="btn btn-danger btn-sm deleteItemBtn" data-id="${value}">Delete</button></div>`
            }
        ],
        "fnCreatedRow": function (nRow, aData, iDataIndex) {
        },
        "drawCallback": function (settings) {
        },
        "footerCallback": function (row, data, start, end, display) {

        }
    }

    $("#tblItemWiseOrder").DataTable(req);
    $("#tblItemWiseOrder tbody").show();
}

函数调用为-

var table = $('#tblItemWiseOrder');

table.on('click', '.editItemBtn', function () {
    const id = this.getAttribute('data-id');
    const data = myData.find(d => d.id == Id);
    const data1 = myData.find(d => d.id == SoNoView);
    console.log(data+' '+data1);

})

table.on('click', '.deleteItemBtn', function () {
    const id = this.getAttribute('data-id');
    const data = myData.find(d => d.id == id);
})

Answer 1

由于您已经在使用ajax 的对象，您可以使用dataSrc 属性。这可用于定义您的响应对象的哪个属性用作您的数据，但它也可以接受一个函数。在函数中将响应数据保存为本地 JavaScript 数组并返回您的数据。

const myData = [];

ajax: {
    url: window.LoadItemWiseOrders,
    type: "POST",
    datatype: "json",
    data: {}
    dataSrc: function(json) {
        myData = json.data;
        return json.data;
    }
}

然后当你定义你的按钮时，给它一个类和一个data-id 属性（我更喜欢把所有的javascript 放在它自己的文件中而不是使用onclick()）。您还可以通过指定您希望它使用哪个data 属性并利用箭头函数的默认返回功能来简化您的render 语句。对字符串使用反引号，这样您就不需要连接。

{
    data: 'id',
    title: "Action", orderable: false, width: "auto",
    render: value => `<div><button type="button" class="btn btn-info btn-sm edit" data-id="${value}">Edit</button> <button type="button" class="btn btn-danger btn-sm delete" data-id="${value}">Delete</button></div>`
}

最后，在您的 JavaScript 文件中创建一个事件处理程序来处理类中的按钮单击，并在您的 myData 数组中搜索该行的数据。

const table = $("#tblItemWiseOrder").DataTable(req);

table.on('click', '.edit', function() {
    const id = this.getAttribute('data-id');
    const data = myData.find( d => d.id == id );
}

table.on('click', '.delete', function() {
    const id = this.getAttribute('data-id');
    const data = myData.find( d => d.id == id );
}

完成更改并成功将它们保存到数据库后，您可以重新加载表，这将重新填充您的 myData 数组。

table.ajax.reload();