將jquery數據表數據轉換爲json

我正在使用jquery數據表。我有一個表像之下，將jquery數據表數據轉換爲json

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

我轉換表到jQuery的數據表作爲$('#employees').DataTable()

我想我的jQuery的數據錶轉換爲JSON格式。請幫我將它轉換爲

[{"Id":"1", "Name":"Karthik","Email":"[email protected]","Phone":"1234"}]

來源

2016-01-21 Karthikeyan

只有第一行？ –

嗨Praveen庫馬爾，感謝您的答覆。不，我想將整個行轉換爲json。 – Karthikeyan

好男人。在上面。 –

第一件事情你需要得到列值：

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

前瞻：

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

來源

2016-01-21 13:14:02

嗨Praveen，它的工作原理...感謝您的幫助。 – Karthikeyan

@Karthikeyan不客氣的兄弟！ '：）' –

，但它只返回首頁記錄。我在該表中分頁，因此它返回前10個記錄。你能幫忙嗎？ – Karthikeyan

試試這個

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

來源

2016-01-21 13:17:20

@Karthikeyan檢查我的答案。 –

@Karthikeyan Run Snippet。你會得到'list'。 –

嗨Partd Trivedi，謝謝你的回覆。它的工作原理..你是搖滾樂。 – Karthikeyan

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

來源

2017-03-24 15:59:58

嘗試使用數據錶行起作用

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

來源

2017-06-09 13:53:43

將jquery數據表數據轉換爲json

回答

相關問題