将jQuery DataTable数据转换为JSON

Question

我正在使用jQuery数据表格。我有一个如下的表格：

<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>[e-mail]</td>
           <td>1234</td>
       </tr>
       <tr>
           <td>1</td>
           <td>Karthik</td>
           <td>[e-mail]</td>
           <td>1234</td>
       </tr>
     </tbody>
</table>

我将表格转换为jQuery数据表，代码如下：$('#employees').DataTable()

我想将我的jQuery数据表转换为JSON格式。请帮助我将其转换为：

[{"Id":"1", "Name":"Karthik","Email":"[e-mail]","Phone":"1234"}]

- Karthikeyan

---

嗨，Praveen Kumar，感谢您的回复。不，我想将整行转换为JSON格式。 - Karthikeyan

可能是在jQuery中将HTML表格数据转换为JSON对象的重复问题。 - P. Frank

希望这对你有所帮助：https://dev59.com/MXE95IYBdhLWcg3wmvGh?answertab=active#tab-top - Parth Trivedi

@Karthikeyan，请检查我的答案。运行片段。 - Parth Trivedi

Answer 1

尝试使用 DataTable 的行函数

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

- Andi AR

Answer 2

尝试这个。

$(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>[e-mail]</td>
           <td>1234</td>
       </tr>
       <tr>
           <td>2</td>
           <td>Karthik</td>
           <td>[e-mail]</td>
           <td>4567</td>
       </tr>
     </tbody>
</table>

- Parth Trivedi

---

@Karthikeyan，请检查我的答案。 - Parth Trivedi

@Karthikeyan 运行代码片段。你将得到一个“列表”。 - Parth Trivedi

嗨，Parth Trivedi，谢谢你的回复。它有效了。你真棒。 - Karthikeyan

@Karthikeyan，你应该更改问题标题。我的答案是它可以适用于所有的html表格，而不仅仅是数据表。这对其他人在未来可能会更有帮助。 - Parth Trivedi

@NiteshJoshi 这是读取数据表中所有数据的代码。 **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

Answer 3

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;
}

• 函数 convertTableToArrayObject：循环遍历数据表中的每一行，并将其添加到数组对象中
• JSON.stringify(employees)：将数组对象转换为json格式

- Mohamad Chami

Answer 4

首先，您需要获取列值：

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

这将让您获得以下内容：

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

使用这个方法，我们可以循环每一行并获取其中的值：

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

所以最终，您将拥有：

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>[e-mail]</td>
      <td>1234</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Praveen</td>
      <td>[e-mail]</td>
      <td>5678</td>
    </tr>
  </tbody>
</table>

预览：

输出：http://jsbin.com/kuhuzivadi/edit?html,js,console,output

- Praveen Kumar Purushothaman

---

但它只返回第一页的记录。我在那个表里有分页，所以它只返回了前10条记录。请问你能帮我解决这个问题吗？ - Karthikeyan

@Karthikeyan 看看 datatables API 上有没有什么东西。给我一些时间。顺便问一下，你是使用 AJAX 还是只是将它转换为 DT？静态加载还是远程加载？ - Praveen Kumar Purushothaman

该表将通过迭代数据并呈现它来填充。 - Karthikeyan

@Karthikeyan Appo太棒了。在调用dataTable()之前给出代码。:)我敢打赌它会工作。 :D - Praveen Kumar Purushothaman

@Karthikeyan：我说了什么让你们这样看着我？ :P - Praveen Kumar Purushothaman