jQuery DataTables get hidden column data in

Question

$("#TransactionTable").DataTable({
                    ajax: {
                        url: '/Transaction/SearchMockup',
                        type: 'POST',
                        data: {
                            cardEndingWith: $("#ccn").val(),
                            status: $("#status").val(),
                            supplier: $("#supplier").val(),
                            fromDate: $("#fromDate").val(),
                            toDate: $("#toDate").val()
                        }
                    },
                    columns: [
                    {
                    { data: 'Status' },
                    { data: 'TransactionId' },
                    { data: 'CreditCardNumber' },
                    { data: 'Supplier' },
                    { data: 'CreatedAt' },
                    { data: 'Amount' },
                    { data: 'Guid' }
                    ],
                    columnDefs: [
                    {
                        "targets": [6],
                        "visible": false,
                        "className": "guid"
                    },
                    {
                        "targets": [1],
                        "className": "transactionIdColumn",
                    }
                    ]
                });

Have that table definition, want on click at "TransactionId" column, to get the value/data of the hidden "Guid" column. My guid column have class name called "transactionIdColumn" as you can see. Need help with the jQuery Code.

Try to do something like this:

$("#TransactionTable .transactionIdColumn").on('click', function (elm) {
                var guidNumber = $(elm).closest("tr").find(".transactionIdColumn").html();
                alert(guidNumber);
            });

As written, var guidNumber = $(elm).closest("tr").find(".transactionIdColumn").html(); looks to be equivalent to var guidNumber = $(this).html();. Changing that .find() selector should give you a fighting chance. — Roamer-1888
– Roamer-1888, Commented Aug 2, 2017 at 15:16
Use the datatable api to access the data ... see stackoverflow.com/a/36695886/1175966 — charlietfl
– charlietfl, Commented Aug 2, 2017 at 15:17

saf21 · Accepted Answer · 2017-08-04 09:51:58Z

1

you can try this.

{ "data"  : "TransactionId",
  "render": function (data, type, full, meta) {
              var guid = full['guid'];
              return '<a href="#" class="trans_id" data-guid="'+guid+'"> '+data+' </a>';
            }
},

Here is the link to the datatables.render

 $("#TransactionTable .trans_id").on('click', function (elm) {
     var guidNumber = $(this).data('guid');
     alert(guidNumber);
 });

answered Aug 4, 2017 at 9:51

saf21

8442 gold badges15 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery DataTables get hidden column data in

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related