将jquery数据表数据转换为json

Posted 2023-05-07

【中文标题】将jquery数据表数据转换为json

【英文标题】：convert jquery datatable data as json

【发布时间】：2016-04-27 18:07:55

【问题描述】：

我正在使用 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"]

【问题讨论】：

您好 Praveen Kumar，感谢您的回复。不，我想将整行转换为 json。

convert a html table data into a JSON object in jQuery的可能重复

希望对您有所帮助***.com/questions/2240005/…

@Karthikeyan 检查我的答案。运行 sn-p。

【参考方案1】：

尝试使用DataTable rows函数

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

【参考方案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>

【讨论】：

@Karthikeyan 检查我的答案。

@Karthikeyan 运行片段。你会得到list。

您好 Parth Trivedi，感谢您的回复。它有效.. 你很摇滚。

@Karthikeyan 我可以得到我的学分吗？它是一种更通用的方式。只需调用tableToJSON 函数。 :)

@NiteshJoshi 这里是读取数据表所有数据的代码。 函数 convertTableToArrayObject() var transactions = []; var table = $('#transactionsList').DataTable(); var data = table.rows().data(); for (var i = 0; i

【参考方案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(员工)：

将数组对象转换为 json

【参考方案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

【讨论】：

但它只返回首页记录。我在那个表中有分页，所以它返回前 10 条记录。你能帮忙吗？

@Karthikeyan Lemme 看看数据表 API 上是否有内容。给我一些时间。嘿，顺便说一句，您是使用 AJAX 使用 DT 还是仅使用 DT 转换它？静态负载还是远程负载？

不是通过 Ajax Praveen。该表将通过迭代数据并呈现它来填充。

@Karthikeyan Appo 超级。在调用dataTable() 之前提供代码。 :) 我敢打赌它有效。 :D

@Karthikeyan Machi enna paathu en da paarangallu nu sonne？ :P