jQuery Datables: Update Button class and text on the same row when it is selected

Question

Sorry noob with Datatables but I need to ask this question. I created a laravel datatable using this api function:

$products = \DB::table('products')
            ->orderBy('id')
            ->select('product_id', 'product_title', 'product_image', 'meta_value', 'meta_id')
            ->get();

    return DataTables::of($products)
        ->addColumn('checkbox', function($product) {
            return '<div style="padding-left: 8px"><input id="checkbox-bulk" type="checkbox" name="ids[]" value="'. $product->product_id .'" /></div>';
        })
        ->addColumn('action', function($product) {
            $text = 'Hide';
            $class='Polaris-Button';
            if($product->meta_value && $product->meta_value == 1) {
                $text = 'Show';
                $class .= ' Polaris-Button--primary';
            }
            return '<button id="btn-edit-product" type="button" data-id="'. $product->product_id .'" class="'. $class .'"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">'. $text .'</span></span></button>';
        })
        ->addColumn('image', function($product) {
            return '<img src="' . $product->product_image . '" alt="noImage" width="55px" height="55px">';
        })
        ->rawColumns([
            'action',
            'image',
            'checkbox',
        ])
        ->make(true);

It has a checkbox which has the id that I need and other columns, here is my datatable:

let datatable = $('#products').DataTable({
                serverSide: true,
                processing: true,
                responsive: true,
                ajax:  {
                    url: '{{ route('product.api') }}',
                    dataSrc: 'data'
                },
                columns: [
                    { data: 'checkbox', name: 'checkbox', 'orderable': false, 'searchable': false },
                    { data: 'product_id', name: 'product_id' },
                    { data: 'product_title', name: 'product_title' },
                    { data: 'image', name: 'image', orderable: false, searchable: false },
                    { data: 'action', name: 'action', orderable: false, searchable: false },
                ]
            });

I added a button outside the table to get the ids from the checkbox and process it by bulk, using these

$( datatable.$('input[type="checkbox"]:checked').each(function () {
                    ids.push($(this).val());
                }));

However, after the bulk update I need to change the text and class of the action buttons which was selected and affected by the bulk update, and I tried this

                $(datatable.$('input[type="checkbox"]:checked').each(function () {
                            let btn = $('#btn-edit-product');
                            btn.toggleClass("Polaris-Button--primary");
                        }));

However, it only gets the 1st row that was selected not the all the rows and I can't update the button class properly. How do I need to do this that if I select the button after bulk update I need to change all those buttons classes for each row. Thank you.

It looks like you are iterating on all the checkboxes which are checked - but you are getting the button by ID? If I am not wrong - it will probably loop each checked checkbox and get the first ID every time. You could try using button classes instead, and get the button by the class? — arkhz
– arkhz, Commented May 22, 2020 at 14:26
@arkhz would this get the button for the row so I can change the class for that button associated with the row? $(datatable.$('input[type="checkbox"]:checked').each(function () { let btn = $('.Polaris-Button'); btn.toggleClass("Polaris-Button--primary"); })); — Drew
– Drew, Commented May 23, 2020 at 4:22
You could possibly use find/closest using $(this). Something like: let btn = $(this).find('.Polaris-Button'); btn.toggleClass("Polaris-Button--primary") — arkhz
– arkhz, Commented May 23, 2020 at 16:41

Kajan Thadsanamoorthy · Accepted Answer · 2020-05-22 15:13:14Z

1

You have same ID in all places. Append a dynamic value in the id. Or else you can add onChange event in the checkbox. it will detect the exact element

answered May 22, 2020 at 15:13

Kajan Thadsanamoorthy

8167 silver badges7 bronze badges

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

2 Comments

Drew Over a year ago

would this get me the button element for the row ?

Kajan Thadsanamoorthy Over a year ago

Yes of course. Now you have ID like 'btn-edit-product'. Change it to 'btn-edit-product-'.$product->product_id . So the button will get a unique ID. You have product id in your checkbox. When you iterate the checked boxes, you can get the product ID. append it with 'btn-edit-product-'+productID. Now you can get the specific element

Collectives™ on Stack Overflow

jQuery Datables: Update Button class and text on the same row when it is selected

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related