Fill DataTables buttons with data from columns

Question

I use DataTables to create my table, but I have two buttons in my last column whose data attributes should be filled with data from the other columns of that row. Is this even possible?

I had this already when I was trying with another method. My goal is now to get where is now $(value....) to be set correctly:

$('#table_id').DataTable({
                ajax: {
                    url: '/admin/users3/qryUsers',
                    dataSrc: ''
                },
                columns: [
                    {data: 'id'},
                    {data: 'name'},
                    {data: 'email'},
                    {data: 'active'},
                    {data: 'admin'},
                    {
                        data: null,
                        defaultContent: '<form action="/admin/users3/${value.id}" method="post" class="deleteForm">\n' +
                            '@method('delete')\n' +
                            '            @csrf\n' +
                            '            <div class="btn-group btn-group-sm">\n' +
                            '                <button type="button" class="btn btn-outline-success btn-edit"\n' +
                            '                        data-toggle="tooltip"\n' +
                            '                        data-user="${value.name}"\n' +
                            '            data-id="${value.id}"\n' +
                            '            data-email="${value.email}"\n' +
                            '            data-active="${value.active}"\n' +
                            '            data-admin="${value.admin}"\n' +
                            '            title="Edit ${value.name}">\n' +
                            '        <i class="fas fa-edit"></i>\n' +
                            '    </button>\n' +
                            '    <button type="button" class="btn btn-outline-danger btn-delete"\n' +
                            '            data-toggle="tooltip"\n' +
                            '            data-user="${value.name}"\n' +
                            '            data-id="${value.id}"\n' +
                            '            title="Delete ${value.name}">\n' +
                            '        <i class="fas fa-trash-alt"></i>\n' +
                            '    </button>\n' +
                            '</div>\n' +
                            '</form>'
                    }
                ]
            });

I don't know if it's possible to do when initializing the datatable, or if it has to be done with jquery afterwards, if so, help on that is also welcome!

Can you use alternative solution like bootstrap-table.com I can help you with BootstrapTable — djay1988
– djay1988, Commented Dec 29, 2019 at 13:31
Use render instead of defaultcontent (look for the render( data, type, row, meta) example in the linked page) — davidkonrad
– davidkonrad, Commented Dec 29, 2019 at 14:01

djay1988 · Accepted Answer · 2019-12-29 14:34:14Z

You can use columnDefs to render custom elements to DataTable

$('#table').DataTable( {
    ajax: {
                url: '/admin/users3/qryUsers',
                dataSrc: ''
            },
            columns: [
                {data: 'id'},
                {data: 'name'},
                {data: 'email'},
                {data: 'active'},
                {data: 'admin'},
        ],
        columnDefs: [
            {
                // The `data` parameter refers to the data for the cell (defined by the
                // `data` option, which defaults to the column being worked with, in
                // this case `data: 0`.
                "render": function ( data, type, row ) {
                    return [
                        '<button class="btn btn-outline-success btn-edit">Edit</button>',
                        '<button class="btn btn-outline-danger btn-delete">Delete</button>'
                    ].join('');

                },
                "targets": 3
            }
        ]
    });
    $('#table').on('click', '.btn-edit', function (e) {
        e.preventDefault();    
        var table = $('#table').DataTable();
        var data = table.row($(this).closest('tr')).data();
        console.log(data);
        // Submit data to server via AJAX
    });

Collectives™ on Stack Overflow

Fill DataTables buttons with data from columns

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related