jQuery Datables:“ Update Button”类和选定时位于同一行的文本

问题描述 投票:0回答:1

对不起,有数据表的菜鸟,但是我需要问这个问题。我使用此api函数创建了一个laravel数据表:

$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);

它有一个复选框,其中包含我需要的ID和其他列,这是我的数据表:

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 },
                ]
            });

我在表外添加了一个按钮,以从复选框中获取ID并使用这些按钮进行批量处理

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

但是,在批量更新之后,我需要更改被批量更新选择并影响的操作按钮的文本和类别,所以我尝试了此操作

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

但是,它仅获得选择的第一行,而不是所有行,因此我无法正确更新按钮类。我需要做的是,如果在批量更新后选择按钮,则需要为每一行更改所有这些按钮类。谢谢。

javascript jquery laravel datatables
1个回答
0
投票

您在所有地方都有相同的ID。在ID中附加一个动态值。否则,您可以在复选框中添加onChange事件。它将检测确切的元素

© www.soinside.com 2019 - 2024. All rights reserved.