Custom button with id of the row index (not the row id

Jason C

Hi all!

I am new to datatables and having an issue (a 8 hour issue) trying to figure out how to create a custom button that has an id of the current row index from which it was clicked.

Here is my render code:

            {
                "data": null,
                "sortable": false,
                "render": function (data, type, row) {
                        return "<button type='button' class='btn btn-grid-edit btn-xs' data-toggle='modal' id='" + row.id + "' data-id=" + row.id + " data-target='#modal-edit'> Edit </button>";
                }
            },

The issue is that my row.id skips. I need the actual index of the row. In the "Showing n of n entries" I only have 339 rows...but because my data skips from say 324 to 352 I am getting "undefined" when it tries to return the row.

Thank you for any help!!!

colin

Hi Jason,

This example is based on one in the website's examples pages.

It shows the row ID of the clicked on row. Note that the row ID isn't the visible index (i.e. the position of the row in the table), it's the order of the row in the loaded data. This is the index that DataTables uses.

Hope that helps,

Cheers,

Colin

Jason C

Thank you Colin for the response. I ended up having to just place all the data in the button render:

                "render": function (data, type, full, meta) {
                    if (data.id == '1' || data.id == '2') {
                        return "<button type='button' class='btn btn-grid-edit disabled btn-xs'> Edit </button>";
                    }
                    else {
                        addSwitch = 'False';
                        return "<button type='button' class='btn btn-grid-edit btn-xs' id=editButton data-toggle='modal' data-target='#modal-edit' data-id='" + data.id + "'" +
                            " data-account_active='" + data.account_active + "'" +
                            " data-account_email='" + data.account_email + "'" +
                            " data-account_name='" + data.account_name + "'" +
                            " data-admin='" + data.admin + "'" +
                            " data-createdby='" + data.createdby + "'" +
                            " data-employee_id='" + data.employee_id + "'" +
                            " data-general_manager='" + data.general_manager + "'" +
                            " data-job_title='" + data.job_title + "'" +
                            " data-lastmodifieddate='" + data.lastmodifieddate + "'" +
                            " data-location_code='" + data.location_code + "'" +
                            " data-location='" + data.location + "'" +
                            " data-modifiedby='" + data.modifiedby + "'" +
                            " data-payroll_dept_number='" + data.payroll_dept_number + "'" +
                            " data-team_member='" + data.team_member + "'" +
                            " data-viewer='" + data.viewer + "'" +
                            "> Edit </button>";
                    }
                }
            },

Its ugly but I couldn't get it to work otherwise. I couldn't use row.id because it was pulling my column "ID" for the row, which could be any number really. And it wouldn't line up with the actual data's row. I feel I have a huge misunderstanding about how to make this work (I spent 9+ hours trying to populate a separate function, trying to pass the data itself, trying to extract the row clicked where the button resided, etc.)...but you did help me! Thank you.