获取DataTables中选择框的值

Question

我使用的数据表如下：

HTML

<table id="projects_table" class="table table-striped table-hover table-bordered" width="100%">
          <thead>
            <tr>
              <th>Samba lead domain</th>
              <th>Customer (samba)</th>
              <th>Customer (Dolphin)</th>
              <th>Project name</th>
              <th>Assigned User</th>
              <th>Samba ID</th>
              <th>Opportunity owner</th>
              <th>Created date</th>
              <th>Close date</th>
              <th>Samba stage</th>
              <th>Win ratio (%)</th>
              <th>Order Intake (€)</th>
            </tr>
          </thead>
          <tbody>
          @foreach($messages_only_errors as $key => $project)
            <tr>
              <td>{!! $project['opportunity_domain'] !!}</td>
              <td>{!! $project['account_name'] !!}</td>
              <td>
                <select class="customers select2" style="width: 100%;" data-placeholder="Select a customer name">
                  @foreach($customers_list as $key => $value)
                  <option value="{{ $key }}" @if ($value == $project['account_name']) selected @endif>
                    {{ $value }}
                  </option>
                  @endforeach
                </select>
              </td>
              <td><div contenteditable>{!! $project['opportunity_name'] !!}</div></td>
              <td style="width: 200px;">
                <select class="users select2" style="width: 100%;" data-placeholder="Select a user name">
                  @foreach($users_select as $key => $value)
                  <option value="{{ $key }}">
                    {{ $value }}
                  </option>
                  @endforeach
                </select>
              </td>
              <td>{!! $project['public_opportunity_id'] !!}</td>
              <td>{!! $project['opportunity_owner'] !!}</td>
              <td>{!! $project['created_date'] !!}</td>
              <td>{!! $project['close_date'] !!}</td>
              <td>{!! $project['stage'] !!}</td>
              <td>{!! $project['probability'] !!}</td>
              <td>{!! $project['amount_tcv'] !!}</td>
            </tr>
          @endforeach
          </tbody>
        </table>

脚本

$(document).ready(function() {

        $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
        });

        projects_table = $('#projects_table').DataTable({
          scrollX: true,
          responsive: false,
          columns: [
              { name: 'samba_lead_domain', data: 'samba_lead_domain' , searchable: true , visible: true },
              { name: 'customer_samba', data: 'customer_samba' , searchable: true , visible: true },
              { name: 'customer_dolphin', data: 'customer_dolphin' , searchable: false , visible: true },
              { name: 'project_name', data: 'project_name' , searchable: true , visible: true },
              { name: 'assigned_user', data: 'assigned_user' , searchable: false , visible: true },
              { name: 'samba_id', data: 'samba_id' , searchable: true , visible: true },
              { name: 'opportunity_owner', data: 'opportunity_owner' , searchable: true , visible: true },
              { name: 'created_date', data: 'created_date' , searchable: true , visible: true },
              { name: 'close_date', data: 'close_date' , searchable: true , visible: true },
              { name: 'samba_stage', data: 'samba_stage' , searchable: true , visible: true },
              { name: 'win_ratio', data: 'win_ratio' , searchable: true , visible: true },
              { name: 'order_intake', data: 'order_intake' , searchable: true , visible: true }
              ],
          order: [[1, 'asc']],
          lengthMenu: [
              [ 10, 25, 50, -1 ],
              [ '10', '25', '50', 'all' ]
          ],
          drawCallback: function() {
            $(".customers").select2({
              allowClear: true
            });
            $(".users").select2({
              allowClear: true
            });
            $("#year").select2({
              allowClear: false
            });
            $('.users').val(null).trigger('change');
          }
        });

        projects_table.draw();

我从Laravel的一个控制器中获取我的数据，并且我的表格可以打印出精选的客户（Dolphin）和指定用户的选择框。

现在，当我点击一个按钮来更新数据库时，我尝试遍历每一行。到目前为止我已经尝试了这个但是它没有用，我得到一个错误，说这不是正确的属性：

$("#create_project_button").click(function() {
          projects_table.rows().every(function(){
            console.log(this.data().assigned_user.find('select').val());
          });
});

如果我只使用代码：

console.log(this.data().assigned_user);

然后我从每个选择中获取HTML，其中包含所有值，但不是所选的。

Answer 1

如果你试图访问表格单元格中的选定选项，你不应该查看row().data()，而是找到相应的<td>并访问里面选定的<option>节点。

就像是：

$("#create_project_button").click(function () {
    projects_table.rows().every(function () {
        console.log($(this.node()).find('td:eq(4) option:selected').val());
    });
});

应该做的伎俩