convert jquery datatable data as json

问题

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"}]

回答1:

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

回答2:

Try using DataTable rows function

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

回答3:

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>

回答4:

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

来源：https://stackoverflow.com/questions/34924719/convert-jquery-datatable-data-as-json

标签

jquery

json

datatables