CODEWITHSUNDEEP
jqueryhtmldatatables
Amelio Vazquez-Reina
Amelio Vazquez-Reina

Reputation: 96304

Loading a table from a separate HTML

Say I have two files:

index.html
table.html

where table.html holds my table (e.g the following contents):

<table border="1" class="dataframe" id="my_table">
  <thead>
    <tr style="text-align: right;">
      <th>school</th>
      <th>county</th>
      <th>zipcode</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>XX</td>
      <td>YY</td>
      <td>ZZ</td>
    </tr>
    <tr>
      <td>XX</td>
      <td>YY</td>
      <td>ZZ</td>
    </tr>
  </tbody>
</table>

and index.html just has the datatables code, e.g.

<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
</head>
<body>

  <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
  <script>
  $(function(){
    $("#my_table").dataTable();
  })
  </script>
</body>
</html>

The above doesn't work, because the reference my_table is not found by index.html. How can I have it "embed" (or make it "aware of") table.html?

Upvotes: 0

Views: 328

Answers (3)

mwilson
mwilson

Reputation: 12900

Use an iframe to render the tablepage within your main page:

Main HTML

<!doctype html>
<html lang="en">
<head>

    <title></title>
</head>
<body>
    <iframe src="tablepage.html"></iframe>
</body>
</html>

Table Page HTML

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" />
</head>
<body>
<table border="1" class="dataframe" id="my_table">
  <thead>
    <tr style="text-align: right;">
      <th>school</th>
      <th>county</th>
      <th>zipcode</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>XX</td>
      <td>YY</td>
      <td>ZZ</td>
    </tr>
    <tr>
      <td>XX</td>
      <td>YY</td>
      <td>ZZ</td>
    </tr>
  </tbody>
</table>
    <script type="text/javascript" src="jQuery.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
    <script src="theJS.js"></script>
    </body>
</html>

JavaScript

$(document).ready(function () {
    $('#my_table').DataTable();

});

Upvotes: 1

Shehary
Shehary

Reputation: 9992

You can insert HTML page with load() function

 <script>
$(function(){
    $("#table").load("table.html"); 
});
 </script>

Index.html

<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">  
  <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
  <script>
      $(function(){
          $("#table").load("table.html"); 
      });
      $(function(){
          $("#my_table").dataTable();
      });
  </script>
</head>
<body>
    <div id="table"></div>
</body>
</html>

And table.html

<table border="1" class="dataframe" id="my_table">
  <thead>
    <tr style="text-align: right;">
      <th>school</th>
      <th>county</th>
      <th>zipcode</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>XX</td>
      <td>YY</td>
      <td>ZZ</td>
    </tr>
    <tr>
      <td>XX</td>
      <td>YY</td>
      <td>ZZ</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Anthony N.
Anthony N.

Reputation: 295

You can user jQuery.get() (see last example) to get the second file from server and then append the HTML code in your current page and then you'll be able to modify it.

Upvotes: 0

Related Questions