How to get table in html format using react?

Question

I have the following semantic-ui-react Table on jsx page

<Table id='myTable' celled selectable sortable headerRow={['Id', 'Name']} renderBodyRow={this.renderBody} tableData={list}  />

I need to put this table to html string in calling method

getHtmlTable() {
    var html = document.getElementById('myTable');
    $.ajax({
        type: "POST",
        url: "http://localhost:50000/api/table/",
        data: html,
        beforeSend: function() {
        },
        success:function() {
        }
    });
}

And get it in the post method:

[HttpPost("html")]
public void GetData(string html)
{        
}

How can i get the table in html format? I found a .html() funciton in jQuery, but can't understand how to use it. I tried so:

<div className="htmlData">
    <Table id='myTable' celled selectable sortable headerRow={['Id', 'Name']} renderBodyRow={this.renderBody} tableData={list}  />
</div>

getHtmlTable() {
    var html = $('htmlData').html();
    $.ajax({
        type: "POST",
        url: "http://localhost:50000/api/table/",
        data: html,
        beforeSend: function() {
        },
        success:function() {
        }
    });
}

But it doesn't work. Can anybody help?

Jonathan Dion · Accepted Answer · 2017-04-20 10:53:52Z

2

Make sure your code is wrapped inside componentDidMount. componentDidMount is invoked immediately after a component is mounted.

componentDidMount

componentDidMount(){
  var html = document.getElementById('myTable').outerHTML
  this.getHtmlTable(html)
}
getHtmlTable(html) {
    $.ajax({
        type: "POST",
        url: "http://localhost:50000/api/table/",
        data: html,
        beforeSend: function() {
        },
        success:function() {
        }
    });
}

edited Apr 20, 2017 at 10:53

answered Apr 20, 2017 at 10:48

Jonathan Dion

1,67011 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrii Litvinov · Accepted Answer · 2017-04-20 13:29:45Z

1

You should have proper selector to make it work:

var html = $('.htmlData').html();

Alternatively with plain JS you can use element's outerHtml property:

var html = document.querySelector("#myTable").outerHtml;

edited Apr 20, 2017 at 13:29

answered Apr 20, 2017 at 10:37

Andrii Litvinov

13.4k4 gold badges56 silver badges62 bronze badges

2 Comments

Bashnia007 Over a year ago

That helps to get html string in js, so when i call alert(html) the alert window with correct html string is shown. But it doesn't sent to GetData method - the income value is null

Andrii Litvinov Over a year ago

@Bashnia007, what does HttpPost("html") do? Try remove parameter, maybe it is some king of restriction?

Collectives™ on Stack Overflow

How to get table in html format using react?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related