CODEWITHSUNDEEP
javascripthtmlcss
Developer87
Developer87

Reputation: 2708

Create an HTML table with dynamically changing content

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

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

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?

Upvotes: 0

Views: 2299

Answers (2)

falconimogollon
falconimogollon

Reputation: 111

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>
';
}
?>

Upvotes: 0

Govind Sharma
Govind Sharma

Reputation: 69

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.

Upvotes: 0

Related Questions