DataTables get array data of cells of selected rows Only

Question

Using the select plugin, I'm trying to get the data from the selected rows using rows().data() but the data it pulls is much more than the array of cell data, I want to submit that data in a Ajax POST request, but I'm getting a 413 error saying "request entity too large".

https://datatables.net/reference/api/rows().data()

var dataTable = $('#products').DataTable( {
  "processing": true,
  "ajax": "/products",
  "columns": [
    {
      "className": 'select-checkbox',
      "defaultContent": '<span style="display:none;">0</span>',
      "orderDataType": "dom-text",
      type: 'string'
    },
    {
      "data": "sku",
      "className": 'sku-value',
      "defaultContent": ""
    },
    {
      "data": "name",
      "className": 'name-value',
      "defaultContent": ""
    },
    {
      "data": "our_price",
      "className": 'our-price-value price',
      "defaultContent": 0
    },
    {
      "data": "sale_price",
      "className": 'sale-price-value price',
      "defaultContent": 0
    },
    {
      "data": "rrp_price",
      "className": 'rrp-price-value price',
      "defaultContent": 0
    },
    {
      "data": "similar_price",
      "className": 'similar-price-value price',
      "defaultContent": 0
    },
    {
      "data": "stores.one.store",
      "className": 'store-one store',
      "defaultContent": ""
    },
    {
      "data": "stores.two.store",
      "className": 'store-two store',
      "defaultContent": ""
    },
    {
      "data": "stores.three.store",
      "className": 'store-three store',
      "defaultContent": ""
    },
    {
      "data": "end_date",
      "className": 'end-date-value date',
      "defaultContent": ""
    },
    {
      "data": "updated_at",
      "className": 'updated-at-value date',
      "defaultContent": ""
     }
  ],
  "select": {
    "style":    'multi',
    "selector": 'td:first-child'
  },
});

var rowData = dataTable.rows( { selected: true } ).data();

But from 3 rows selected with 5 cells with some very small values, Chrome dev tools freezes up trying to load it all, as somehow that value also contains all 2200 rows in the table as well. :/

My code is taken from here: https://datatables.net/extensions/select/examples/api/get.html

In the object that rowData is there's a array mixed in with a heap of other functions, the array has all the data I need, but I cant separate it form all the other stuff.

The data inside rowData:

I just want those first 3 lines, the array.

To pass to:

$.post('/generate', rowData, function() {
    console.log('done');
});

Answer 1

API method rows().data() returns Array-like object which is also DataTables API instance.

Use toArray() API method to convert API instance to native Javascript array object.

var rowData = dataTable.rows( { selected: true } ).data().toArray();