CODEWITHSUNDEEP
javascriptjqueryhtmlspring-data
Aravind Cheekkallur
Aravind Cheekkallur

Reputation: 3205

How to handle Table data form submission in Spring Framework?

I am searching for some good solution for this problem?

I just want to submit all the table data into the controller. Rows are creating dynamically and also it does't have any element. Here am little confuse for handle entire table data processing. 

<form action="controller.htm"   method="post">
<table>
<tr>
<td>one</td>
<td><two/td>
<td>three</td>
<td>four</td>
<td>five</td>
</tr>
<td>data11</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
<td>data 7</td>
</tr>
</table>
</form>
  1. How to post the tables values into the controller?
  2. How to get values inside the controller?

Upvotes: 3

Views: 7446

Answers (2)

L_7337
L_7337

Reputation: 2748

I know this is an older issue, but I had a similar situation and came up did this a little differently. I hope this helps someone else.

I had javascript parse the <table> for <tr> elements, then create a JSON string that I stored in a hidden <input> field.

This was adapted from another Stack Overflow post: post data from table row like json format

The basic code is below.

Full @ JSFiddle: http://jsfiddle.net/leisenstein/vy3ux/

// object to hold your data
function dataRow(value1,value2,value3) {
    this.dxCode = value1;
    this.dxDate = value2;
    this.dxType = value3;
}

// create array to hold your data
var dataArray = new Array(); 

// Start from 2 if you need to skip a header row
for(var i = 2; i <= $("table tr").length; i++){
        // create object and push to array
        dataArray.push(    
            new dataRow(
                $("table tr:nth-child(" + i + ") td").eq(0).html(),
                $("table tr:nth-child(" + i + ") td").eq(1).html(),
                $("table tr:nth-child(" + i + ") td").eq(2).html())
        );
}


var sJson = JSON.stringify(dataArray);

Upvotes: 1

Aravind Cheekkallur
Aravind Cheekkallur

Reputation: 3205

Hardly i find out the way to handle table data.To post large collection of data into controller using form might not be a good approach even if we don't have any input type html element.

Step 1: Read all table data by iterating through each cell using Java script.
step 2: Add cell element into array by specifying the column counter.
step 3 After completing the each row,add the array into jsonobject.
step 4: Once the iteration complete stringfy the json object and using Ajax pass the Json string to the controller.

<script type="text/javascript">
function GetCellValues(dataTable) 
{
    var jsonObj = [];
    var jsonString;
    var table = document.getElementById(dataTable);
    for (var r = 0, n = table.rows.length; r < n; r++) {
        var item = {};
        for (var c = 0, m = table.rows[r].cells.length; c < m; c++){        
            if(c == 1){
                item ["data1"] =table.rows[r].cells[c].innerHTML;}
            else if(c==2){
                item ["data2"] =table.rows[r].cells[c].innerHTML;}
            else if(c==3){
                item ["data3"] =table.rows[r].cells[c].innerHTML;}
            else if(c==4){
                 item ["data4"] = table.rows[r].cells[c].innerHTML;} 
            else if(c==5){
                item ["data5"] =table.rows[r].cells[c].innerHTML;}

        }
        jsonObj.push(item);
    }
    jsonString = JSON.stringify(jsonObj);
   alert("Save your data "+ jsonString);

    $.ajax({
        type: "POST",
        url : "tableData.htm?jsonData="+jsonString,
        success: function(data){
            $("#").html(data);      
        },
        error:function(data){
            console.log("failure"+data);
            alert("failure"+data);
        }
    });  
}
</script>

Upvotes: 4

Related Questions