如何从DataTables中获取选中行的完整数据

你当前使用的复选框扩展API仅能返回选中行的ID值，要获取完整行数据可直接调用DataTable原生的选中行筛选接口，修改逻辑如下：

核心修改点 #

在表单提交事件中，替换原有仅获取行ID的逻辑，新增选中行完整数据获取逻辑：

// 获取所有选中行的完整数据
var selectedRowsData = table.rows({selected: true}).data();
// 遍历即可拿到每一行的全部字段
$.each(selectedRowsData, function(index, rowData){
    // rowData就是单条选中行的完整数据，示例数据源里字段对应为：
    // rowData[0] 为ID，rowData[1]为姓名，rowData[2]为职位，rowData[3]为办公地点，以此类推
    console.log('第'+(index+1)+'条选中行数据：', rowData);
    // 你可以按需把需要的字段加入表单提交
});

修改后的完整代码 #

$(document).ready(function() {
   var table = $('#example').DataTable({
      'ajax': 'https://gyrocode.github.io/files/jquery-datatables/arrays_id.json',
      'columnDefs': [
         {
            'targets': 0,
            'checkboxes': {
               'selectRow': true
            }
         }
      ],
      'select': {
         'style': 'multi'
      },
      'order': [[1, 'asc']]
   });
   
   // 处理表单提交事件
   $('#frm-example').on('submit', function(e){
      var form = this;
      
      // 原有获取选中ID的逻辑保留，按需使用
      var rows_selected = table.column(0).checkboxes.selected();
      // 新增：获取所有选中行完整数据
      var selectedRowsData = table.rows({selected: true}).data();

      // 遍历选中行ID，原有逻辑
      $.each(rows_selected, function(index, rowId){
         $(form).append(
             $('<input>')
                .attr('type', 'hidden')
                .attr('name', 'id[]')
                .val(rowId)
         );
      });

      // 遍历完整行数据，可按需提交其他字段
      $.each(selectedRowsData, function(index, rowData){
          // 示例：提交姓名字段
          $(form).append(
             $('<input>')
                .attr('type', 'hidden')
                .attr('name', 'name[]')
                .val(rowData[1])
         );
      });

      // 仅用于演示，生产环境可删除以下代码
      $('#example-console-rows').text(rows_selected.join(","));
      // 输出完整选中行数据到控制台
      console.log('选中行完整数据：', selectedRowsData.toArray());
      
      $('#example-console-form').text($(form).serialize());
       
      // 移除新增的表单元素
      $('input[name="id[]"],input[name="name[]"]', form).remove();
       
      // 阻止默认表单提交
      e.preventDefault();
   });   
});

补充说明 #

• table.rows({selected: true})是DataTable原生提供的选中行筛选方法，不受分页、搜索过滤的影响，能拿到所有页面中被选中的行数据
• 返回的selectedRowsData是DataTable的专用类数组对象，调用.toArray()可以转为普通JS数组方便后续处理
• 如果你的数据源是对象格式而非数组格式，直接用rowData.字段名即可取对应值，不需要用下标访问

内容的提问来源于stack exchange，提问作者David Lee