Laravel：数据表复选框

Posted 2023-03-14

【中文标题】Laravel：数据表复选框

【英文标题】：Laravel: DataTable checkboxes

【发布时间】：2019-11-29 16:52:24

【问题描述】：

我在我的服务器端获取我的数据并放置了复选框。示例我有 15 个数据。当我检查数据 1 和数据 13 时，我提交了它。我只得到数据 13.

查看

<form id="approved-selected-form">

<table id="get-rfp-for-approval-table" class="table table-striped table-bordered table-sm">
    <thead class="thead-global">
        <tr>
            <th></th>
            <th>#</th>
            <th>RFP#</th>
            <th>Payee</th>
            <th>Doc Ref</th>
            <th>Date Needed</th>
            <th>Requesting Department</th>
            <th>Amount</th>
            <th>Status</th>
            <th>Created By</th>
            <th>Approval Status</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
<button type="submit" class="btn btn-success btn-sm">Approved</button>
</form>

使用 js 获取我的数据

$(document).ready(function()

        setTimeout(
          function() 
          
            // getRFPforApproval();
            //search each column datatable
            $('#get-rfp-for-approval-table thead th').each(function(e) 
                var title = $(this).text();
                $(this).html( '<input type="text" placeholder="'+title+'" class="form-control" style="font-size: 9px;"/><br><p style="font-size: 11px; font-weight:bolder">'+title+'</p>' );
            );
            $('#get-rfp-for-approval-table').DataTable().columns().every(function() 
                var that = this;
                $( 'input', this.header() ).on('keyup change', function () 
                    if ( that.search() !== this.value ) 
                    that
                        .search( this.value )
                        .draw();
                    
                );
            );
          , 2000);
       var table3 = $('#get-rfp-for-approval-table').DataTable(
           ajax: 
               url: '/requests/request-for-payment/getRFPforApproval',
               dataSrc: ''
           ,
           columns: [ 
                data: 'checkbox' ,
                data: '#' ,
                data: 'number' ,
                data: 'vendor' ,
                data: 'document_reference' ,
                data: 'date_needed' ,
                data: 'requesting_department' ,
                data: 'amount' ,
                data: 'status' ,
                data: 'created_by' ,
                data: 'approval_status' ,
                data: 'action' ,
           ],
           columnDefs: [
               
                   targets: 0,
                   checkboxes3: 
                       selectRow: true
                   
               
           ],
           select: 
               style: 'multi'
           ,
           order: [[1,'desc']]
       );

我选择了一些复选框后的表单

if ( $('#approved-selected-form').length > 0 ) 
                $('#approved-selected-form').submit(function(e)
                    var form = this;  
                    console.log(table3.column(0).checkboxes3.selected());
                    return false;
                    var rows_selected = table3.column(0).checkboxes.selected();
                    // Iterate over all selected checkboxes
                    $.each(rows_selected, function(index, rowId)
                       // Create a hidden element 
                       $(form).append(
                           $('<input>')
                              .attr('type', 'hidden')
                              .attr('name', 'checkbox[]')
                              .val(rowId)
                       );
                    );
                    swal(
                        title: "Are you sure?",
                        text: "Transaction will be approved.",
                        icon: "warning",
                        buttons: true,
                        dangerMode: true,
                    )
                    .then((willSave) => 
                        if (willSave) 
                            $.ajaxSetup(
                                headers: 
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                
                            )
                            $.ajax(
                                url: '/requests/request-for-payment/approvedTransaction',
                                type: "POST",
                                data: formData,
                                beforeSend: function() 
                                    var span = document.createElement("span");
                                    span.innerHTML = '<span class="loading-animation">LOADING...</span>';
                                    swal(
                                        content: span,
                                        icon: "warning",
                                        buttons: false,
                                        closeOnClickOutside: false
                                    );
                                    $('.request-for-payment-finish').attr('disabled', 'disabled');
                                ,
                                success: function(response) 
                                    if (response != '') 
                                        $('#get-request-for-payment-table').DataTable().destroy();
                                        getRequestForPaymentTable();

                                        $('#add-request-for-payment-form').trigger("reset");
                                        swal("Transaction has been saved!", 
                                            icon: "success",
                                        );
                                        setTimeout(
                                            function() 
                                            
                                                window.location.href = "/requests/request-for-payment?id="+response+"#view-request-for-payment-modal";
                                            , 1500);
                                    
                                ,
                                complete: function() 
                                     $('.request-for-payment-finish').removeAttr('disabled');
                                
                            );
                         else 
                            swal("Save Aborted");
                        
                    );

                    e.preventDefault();
                    return false;
                )
            

我遇到错误：Uncaught TypeError: Cannot read property 'selected of undefined into this line。 “table3.column(0).checkboxes3.selected()”。

问题：我认为当我检查不在同一页面上的其他数据时（示例数据 1 在第 1 页，数据 13 在第 2 页）。我无法获得第二个数据。即使不在同一页面中，如何获取所有数据？

更新：

我设法通过添加这些来修复错误

<link type="text/css" href="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.11/css/dataTables.checkboxes.css" rel="stylesheet" />
<script type="text/javascript" src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.11/js/dataTables.checkboxes.min.js"></script>

【参考方案1】：

jQuery DataTables Checkboxes 插件中只有checkboxes 选项可用，请参阅Options 页面。

使用以下初始化选项：

columnDefs: [
    
        targets: 0,
        checkboxes: 
            selectRow: true
        
    
],

使用以下代码获取数据：

var rows_selected = table3.column(0).checkboxes.selected();

【讨论】：

实际上我的第一个代码就是这样。但它给了我同样的错误，

你能告诉我我需要将哪些 css/js 导入我的网站吗？到目前为止，我有 ff: cdn.datatables.net/select/1.3.0/css/select.dataTables.min.css"> 和

@Angel，您正在使用checkboxes3 属性和checkboxes3.selected()，这是无效的API 方法。