convert jquery datatable data as json

Question

I am using jquery data table. I have a table like below,

<table id="employees">
  <thead>
     <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
      </tr>
    </thead>
   <tbody>
      <tr>
           <td>1</td>
           <td>Karthik</td>
           <td>Kk@gmail.com</td>
           <td>1234</td>
       </tr>
       <tr>
           <td>1</td>
           <td>Karthik</td>
           <td>Kk@gmail.com</td>
           <td>1234</td>
       </tr>
     </tbody>
</table>

I am converting the table into jquery datatable as $('#employees').DataTable()

I want to convert my jquery datatable as json format. Please help me to convert this as

[{"Id":"1", "Name":"Karthik","Email":"kk@gmail.com","Phone":"1234"}]

Hi Praveen Kumar, Thanks for the reply. No I want to convert the entire rows as json. — Karthikeyan, Jan 21 '16 at 13:09
Possible duplicate of [convert a HTML table data into a JSON object in jQuery](http://stackoverflow.com/questions/2240005/convert-a-html-table-data-into-a-json-object-in-jquery) — P. Frank, Jan 21 '16 at 13:13
May this helpful to you http://stackoverflow.com/questions/2240005/convert-a-html-table-data-into-a-json-object-in-jquery?answertab=active#tab-top — Parth Trivedi, Jan 21 '16 at 13:13

score 11 · Answer 1 · answered Jun 09 '17 at 13:53

11

Try using DataTable rows function

 $('#YourDataTableID').DataTable().rows( { search: 'applied' } ).data().toArray();

answered Jun 09 '17 at 13:53

Andi AR

2,678
2
23
28

Parth Trivedi · Answer 2 · 2016-01-21T13:45:24.267

10

Try this

$(document).ready(function(){

   // Let's put this in the object like you want and convert to JSON (Note: jQuery will also do  this for you on the Ajax request)
   alert(JSON.stringify(tableToJSON($("#employees"))));
});


function tableToJSON(tblObj){  
   var data = [];
   var $headers = $(tblObj).find("th");
   var $rows = $(tblObj).find("tbody tr").each(function(index) {
   $cells = $(this).find("td");
   data[index] = {};
   $cells.each(function(cellIndex) {
     data[index][$($headers[cellIndex]).html()] = $(this).html();
   });    
});
  return data;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="employees">
  <thead>
     <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
      </tr>
    </thead>
   <tbody>
      <tr>
           <td>1</td>
           <td>Karthik</td>
           <td>Kk@gmail.com</td>
           <td>1234</td>
       </tr>
       <tr>
           <td>2</td>
           <td>Karthik</td>
           <td>Kk@gmail.com</td>
           <td>4567</td>
       </tr>
     </tbody>
</table>

edited Jan 21 '16 at 13:45

answered Jan 21 '16 at 13:17

Parth Trivedi

3,802
1
20
40

@Karthikeyan check my answer. – Parth Trivedi Jan 21 '16 at 13:27
@Karthikeyan Run Snippet. You will get `list`. – Parth Trivedi Jan 21 '16 at 13:35
Hi Parth Trivedi, Thanks for your reply. It works.. You are rock. – Karthikeyan Jan 21 '16 at 14:40
@Karthikeyan can i get my credits? Its a more generic way. Only have to call `tableToJSON` function. :) – Parth Trivedi Jan 22 '16 at 02:35
@Karthikeyan you should change question title. My answer is it can be apply to all `html` table not only datatale. It can be more helpful in future for others. – Parth Trivedi Jan 22 '16 at 02:44
this is working only if we have static data in the table. i got some input elements and the code is copying the enitre html input tag as part of json – zee Jun 27 '20 at 09:19
It works only for 1st page (10 records). I'm using datatable pagination. How to do for all the pages? – Waseem Sep 28 '21 at 07:35
@Waseem. I have the same issue and still trying to figure out the solution. Have you got any solution for the pagination problem? – Nitesh Joshi Jan 06 '22 at 17:54
@NiteshJoshi, yes I got the solution. – Waseem Jan 12 '22 at 09:30
@Waseem, can you please point me to the solution? I am still stuck with it. – Nitesh Joshi Jan 19 '22 at 16:01
1

@NiteshJoshi here is the code for reading all data of the data table. **function convertTableToArrayObject() { var transactions = []; var table = $('#transactionsList').DataTable(); var data = table.rows().data(); for (var i = 0; i < data.length; i++) { transactions.push(data[i]); } return transactions; }** – Waseem Jan 20 '22 at 05:52
@Waseem, I tried using the code, it yes definitely gets all the values but its getting the whole html element and not just values. – Nitesh Joshi Jan 20 '22 at 21:15
@NiteshJoshi yes it is. What do you want from the data table? I mean do you need whole data or some specific column values of the data table? – Waseem Jan 21 '22 at 05:19
@Waseem this is the code I am using: function tabletoJSON(tblObj) {var data = [];var count = 0;var $headers = $(tblObj).find("th"); var $rows = $(tblObj).find("tbody tr").each(function (index) { $cells = $(this).find("td"); data[index] = {}; $cells.each(function (cellIndex) {if (cellIndex == count) { data[index][$($headers[cellIndex]).html()] = $('input', this).attr('value'); } else {data[index][$($headers[cellIndex]).html()] = $(this).text();}});});return data;} This gives me exactly header name and value for each cell. – Nitesh Joshi Jan 21 '22 at 19:41
@Waseem I need all the data from all the columns and the headers as well. Also my table has input boxes so that the user can update the values within the table itself and then send out the updated data to backend, and then I convert that to json and then feed it to my mssql script. – Nitesh Joshi Jan 21 '22 at 19:43

score 4 · Answer 3 · answered Mar 24 '17 at 15:59

var employees = convertTableToArrayObject();
alert(JSON.stringify(employees));

function convertTableToArrayObject() {

    var employeeObjects = [];
    var table = $('#employees').DataTable();
    var data = table.rows().data();

    for (var i = 0; i < data.length; i++) {
        employeeObjects.push(data[i]);
    }

    return employeeObjects;
}

function convertTableToArrayObject: loop on each row of data table, and add to array objects
JSON.stringify(employees): convert the array objects to json

score 3 · Accepted Answer · answered Jan 21 '16 at 13:14

3

First thing you need to get the column values:

var heads = [];
$("thead").find("th").each(function () {
  heads.push($(this).text().trim());
});

This will give you:

["Id", "Name", "Email", "Phone"]

Using this we can loop in each row and get the values:

var rows = [];
$("tbody tr").each(function () {
  cur = {};
  $(this).find("td").each(function(i, v) {
    cur[heads[i]] = $(this).text().trim();
  });
  rows.push(cur);
  cur = {};
});

So finally you would have:

var heads = [];
$("thead").find("th").each(function () {
  heads.push($(this).text().trim());
});
var rows = [];
$("tbody tr").each(function () {
  cur = {};
  $(this).find("td").each(function(i, v) {
    cur[heads[i]] = $(this).text().trim();
  });
  rows.push(cur);
  cur = {};
});

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<table id="employees">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Karthik</td>
      <td>Kk@gmail.com</td>
      <td>1234</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Praveen</td>
      <td>pp@gmail.com</td>
      <td>5678</td>
    </tr>
  </tbody>
</table>

Preview:

Output: http://jsbin.com/kuhuzivadi/edit?html,js,console,output

answered Jan 21 '16 at 13:14

Praveen Kumar Purushothaman

164,888
24
203
252

but it returns first page records only. I have pagination in that table, so it returns first 10 records. Can you please help on this. – Karthikeyan Jan 21 '16 at 14:45
@Karthikeyan Lemme see if there's something on the datatables API. Give me some time. Hey, btw, are you using DT using AJAX or just converting it using DT? Static load or remote load? – Praveen Kumar Purushothaman Jan 21 '16 at 14:47
not thru Ajax Praveen. The table will be populated by iterating the data and rendering it. – Karthikeyan Jan 21 '16 at 14:51
@Karthikeyan Appo super. Give the code before you call `dataTable()` on it. `:)` I bet it works. `:D` – Praveen Kumar Purushothaman Jan 21 '16 at 14:55
@Karthikeyan *Machi enna paathu en da paarangallu nu sonne?* `:P` – Praveen Kumar Purushothaman Jan 22 '16 at 06:53
@PraveenKumarPurushothaman I am using the same thing and facing the same problem. Can you please tell me what you did to resolve it? I am not sure what you guys communicated. – Nitesh Joshi Jan 06 '22 at 17:50
@NiteshJoshi Happy to look through any [mre] if you have got. Please tell me. – Praveen Kumar Purushothaman Jan 06 '22 at 20:44

convert jquery datatable data as json

4 Answers4

Linked