Create an HTML table with dynamically changing content

Question

Excuse me if the similar question has been already asked..

I'd like to create an HTML table with the following features:

If myFunction returns no result then it just shows the headers
from time to time myFunction returns some data, that need to be displayed in this table
Table must be resizable, i.e. when we drag a window borders it consequently resizes its borders, without row/column reodering

Here is my current table:

<div id="result">
  <table id="myTable" class="display" style="width:100%">
    <tr>
      <th>Header1</th>
      <th>Header2</th>
      <th>Header3</th>
    </tr>
  </table>
</div>

JavaScript:

function myFunction() {
  $.ajax({
    type: "GET",
    url: 'some',
    dataType: 'json',
    data: parameters,
    success: function (response) {
      myTable.empty().show(); // to clear
      // html table content calculation...
      myTable.append(new html);
    }
  });
}

Every time I run myFunction I get table without headers, because of emptying of the variable.. but otherwise I don't understand how to update content dynamically without page reloading.. could you please assist?

Wrap the header in a <thead> and append an empty <tbody> after it. Then empty() the tbody instead of the entire table in myFunction — Hugo Delsing
– Hugo Delsing, Commented Oct 14, 2018 at 17:50
A solution to this problem would be using web sockets. The server can keep sending in data using this. — dRoyson
– dRoyson, Commented Oct 14, 2018 at 17:53
Another not so good but easy approach would be to put your ajax call inside a setInterval. — dRoyson
– dRoyson, Commented Oct 14, 2018 at 17:55

Govind Sharma · Accepted Answer · 2018-10-14 18:00:46Z

0

It is better if you go by Datatable. Here you can use server-side processing that is the best way to create the dynamical table.

answered Oct 14, 2018 at 18:00

Govind Sharma

694 bronze badges

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

Comments

falconimogollon · Accepted Answer · 2018-10-15 14:28:07Z

Put this code into a HTML or PHP extension, and run an Apache server

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- NEED THE bootstrap.min.css AND jquery.resizableColumns.css TO RESIZE THE TABLE AUTO-->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="//dobtco.github.io/jquery-resizable-columns/dist/jquery.resizableColumns.css">
<!-- NEED THE jquery.min.js TO USE AJAX-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
<!-- GOT THE CODE OF RESIZE THE TABLE FROM https://codepen.io/validide/pen/aOKLNo/   HERE-->
https://codepen.io/validide/pen/aOKLNo/
table{
  table-layout: fixed;
  td, th{
    overflow: hidden;
    white-space: nowrap;
    -moz-text-overflow: ellipsis;        
       -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
           text-overflow: ellipsis;
  }
}
</style>
<script>
$(function() {
  $("table").resizableColumns({
    store: window.store
  });
});
</script>
</head>
<body>
<script type="text/javascript">
function updatecons() {
			$.ajax({
				url: "refresh.php", //THE PAGE THAT HAVE THE CODE AND BRING BACK AN OUTPUT
				success: function(response) {
					$('.container').html(response).fadeIn();//SET THE INFO GOTTEN INTO THE CLASS CONTAINER OF THE DIV
				}
			});

}
setInterval(updatecons, 1000);//It will RUN the function "updatecons" every second
		
</script>
<!-- THIS DIV WILL BE MODIFIED BY THE FUNCTION updatecons-->
<div class="container"></div>

</body>
</html>

This code save as refresh.PHP because it will be calling the first page. This page have the logic code, and it will be called by the first page

<?php

if(FALSE){//CHANGE THE "FALSE" TO "TRUE" AND IT WILL SHOW A FULL TABLE DONE, OR CHANGE INTO A STATEMENT THAT CAN OR COULD BE TRUE, AND IT WILL SHOW UP
//CHANGE THE TABLE CONTENT IN THE WAY YOU NEED IT
echo'
<table class="table table-bordered" data-resizable-columns-id="demo-table-v2">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Nickname</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Dude Meister</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Barney von Matterhorn</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td colspan="2">Larry the Bird</td>
        <td>What</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
';	
}else{
echo'
<table class="table table-bordered" data-resizable-columns-id="demo-table-v2">
    <thead>
      <tr>
        <th>HEADER 1</th>
        <th>HEADER 2</th>
        <th>HEADER 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>NONE 1</td>
        <td>NONE 2</td>
        <td>NONE 3</td>

      </tr>
    </tbody>
  </table>
';
}
?>

Collectives™ on Stack Overflow

Create an HTML table with dynamically changing content

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related