获取数据表中选择框的值

时间:2019-04-04 13:32:11

标签: jquery datatables

我正在使用如下数据表:

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的控制器中填写数据,并且我的表可以很好地打印客户(海豚)和已分配用户的选择框。

现在,例如,当我单击一个按钮以更新数据库时,我尝试遍历每一行。到目前为止,我已经尝试过此方法,但是它不起作用,但出现错误消息,指出这不是正确的属性:

$("#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,其中包含所有值,但没有一个被选择。

1 个答案:

答案 0 :(得分:0)

如果您要访问表格单元格中的选定选项,则不应检出row().data(),而应找到相应的<td>并访问其中的选定<option>节点。 / p>

类似的东西

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

应该可以解决问题