对不起,有数据表的菜鸟,但是我需要问这个问题。我使用此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");
}));
但是,它仅获得选择的第一行,而不是所有行,因此我无法正确更新按钮类。我需要做的是,如果在批量更新后选择按钮,则需要为每一行更改所有这些按钮类。谢谢。
您在所有地方都有相同的ID。在ID中附加一个动态值。否则,您可以在复选框中添加onChange事件。它将检测确切的元素