Rendering DataTable content seamlessly from a different webpage using JavaScript without sacrificing control

Is it possible to dynamically call HTML content from Page2.html into Page1.html by utilizing DataTables (https://datatables.net/)?

Page1.html

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css">

  <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>

</head>
<body>

<input type="button" onClick="loadData()" value="Load">
<div id="contenuPage2"></div>


</body>
<script>



function loadData(){

    $('#contenuPage2').load('Page2.html #example');
}

//data
var dataSet = [
    ['Trident','Internet Explorer 4.0','Win 95+','4','X'],
    ['Trident','Internet Explorer 5.0','Win 95+','5','C'],
    ['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
    ['Trident','Internet Explorer 6','Win 98+','6','A'],
    ['Trident','Internet Explorer 7','Win XP SP2+','7','A'],
    ['Trident','AOL browser (AOL desktop)','Win XP','6','A'],
];


$(document).ready(function() {

    $('#example').dataTable( {
        "data": dataSet,
        "columns": [
            { "title": "Engine" },
            { "title": "Browser" },
            { "title": "Platform" },
            { "title": "Version", "class": "center" },
            { "title": "Grade", "class": "center" }
        ]
    } );   
} );



</script>

Page2.html

<table id="example" class="display" cellspacing="0" width="100%"></table>

It seems that the above method does not work as intended (clicking on load button).

The desired outcome should resemble the following:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css">

  <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>

</head>
<body>


<table id="example" class="display" cellspacing="0" width="100%"></table>

</body>


<script>

//Data for the DataTable
var dataSet = [
    ['Trident','Internet Explorer 4.0','Win 95+','4','X'],
    ['Trident','Internet Explorer 5.0','Win 95+','5','C'],
    ['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
    ['Trident','Internet Explorer 6','Win 98+','6','A'],
    ['Trident','Internet Explorer 7','Win XP SP2+','7','A'],
    ['Trident','AOL browser (AOL desktop)','Win XP','6','A'],
];


$(document).ready(function() {

    $('#example').dataTable( {
        "data": dataSet,
        "columns": [
            { "title": "Engine" },
            { "title": "Browser" },
            { "title": "Platform" },
            { "title": "Version", "class": "center" },
            { "title": "Grade", "class": "center" }
        ]
    } );   
} );
</script>
</html>

How can I correctly load the DataTable from Page2.html in Page1.html?

Your assistance is greatly appreciated.

(Apologies for any language errors)

javascriptajaxdynamicdatatable

Answer №1

It seems like the issue you're facing is related to calling the dataTable function before the table has been inserted into the DOM (Document Object Model). When $('#example') does not return any DOM elements, which happens on page load, dataTable doesn't have anything to work with.

To resolve this problem, consider using an AJAX request with a callback function and invoking dataTable within it:

$.get('Page2.html', function(resp) {

var dataSet = [
    ['Trident','Internet Explorer 4.0','Win 95+','4','X'],
    ['Trident','Internet Explorer 5.0','Win 95+','5','C'],
    ['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
    ['Trident','Internet Explorer 6','Win 98+','6','A'],
    ['Trident','Internet Explorer 7','Win XP SP2+','7','A'],
    ['Trident','AOL browser (AOL desktop)','Win XP','6','A'],
];
var example = $(resp).find('#example');
$('#contenuPage2').html(example);

$('#example').dataTable( {
  "data": dataSet,
  "columns": [
      { "title": "Engine" },
      { "title": "Browser" },
      { "title": "Platform" },
      { "title": "Version", "class": "center" },
      { "title": "Grade", "class": "center" }
  ]
});  
);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Notify of a specific value in an array that is retrieved through an AJAX request

I'm currently facing an issue with trying to display the value obtained from an ajax call. The code snippet below is functional in such a way that it will successfully alert the value of 'row' when grid.onClick is triggered. However, I am st ...

ajaxgoogle-mapsjquerygoogle-maps-api-3

Having trouble with your jQuery image slider?

As a newcomer to jQuery, I have been experimenting with it to gain some experience. I recently tried to integrate a jQuery image slider from slidesjs.com into my local website but unfortunately, it is not functioning as expected. Additionally, I would lik ...

javascriptjqueryhtmlcss

Issue with Ionic 2's infinite scroll not triggering method on second scroll attempt

I utilized the ion-tab element to showcase a page (inboxitem) which encompasses ion-list and makes use of ion-infinite-scroll. The following code snippet resides in inboxitem.html <ion-content class="inbox can-swipe-list"> <ion-list> ...

javascriptangulartypescriptionic2

What are the steps to turn off the rule .MuiInputBase-inputType-121 in Material UI TextField for email input field because of a display problem?

Here is a snippet of JSX code: import TextField from '@material-ui/core/TextField/TextField'; <Col xs={6}> <TextField pattern=".{3,}" name="fullName" ...

javascripthtmlcssmaterial-uimui

Revamping the settings page by featuring a single "save changes" button

Is it possible to create a settings.php page where users can update their personal information, such as username, password, and email, all within the same page? I know how to perform these tasks individually, but I'm unsure about integrating different ...

javascriptphpmysql

Removing   from a text node using JavaScript DOM

I am currently working with xhtml in javascript. To retrieve the text content of a div node, I am concatenating the nodeValue from all child nodes where nodeType is Node.TEXT_NODE. However, sometimes the resulting string includes a non-breaking space enti ...

javascriptregexhtml-entities

Issue: friends.js file contains an unexpected token "<" error after implementing express.static and modifying HTML content upon button click

On localhost:9000, I'm attempting to load home.html initially. However, when I try it with my current code, I encounter the error: friends.js:1 Uncaught SyntaxError: Unexpected token <. I'm unsure about the meaning of this error. Additionally, ...

javascriptnode.jsexpress

Exploring the ins and outs of building JavaScript objects using constructors

When creating a new object with var obj = new Object(value); and assigning property values with obj.value = newValue, I encountered an issue where only one of these actions would work at a time. Is there a way to make both work within the same object decla ...

javascriptoopjavascript-objects

Tips for verifying elements using the Loop technique in a JSON array

I am new to JavaScript and I have been trying to run the following code with an expected result like this: [["00:04:12","05:54:46"],["06:06:42","12:45:22"],["12:51:11","15:56:11"]] However, my script is not working as expected. Can someone please help ...

javascriptjson

What is the best way to retrieve data from localStorage while using getServerSideProps?

I'm currently developing a next.js application and have successfully integrated JWT authentication. Each time a user requests data from the database, a middleware function is triggered to validate the req.body.token. If the token is valid, the server ...

javascriptreactjsnext.jslocal-storage

Methods for incorporating external javascript.php files into CodeIgniter 2.1.3

Let's kick off this topic by discussing the following: I've discovered that it is possible to use PHP with external Javascript, as shown here. This leads me to believe that there could be a way to echo JavaScript within a file named javascript. ...

phpjavascriptjquerycodeigniter

I am interested in utilizing angular 4 ng2-ui/map with places-auto-complete functionality that is restricted to a specific country

Check out my code snippet below: <input class="form-control" placeholder="Pickup Location" places-auto-complete (place_changed)="pickupChanged($event)" formControlName="pickup_location" [types]="['geocode']" /> I am trying to figure out ...

javascriptangulardictionaryngui

How come ng-class doesn't apply to a specific class name?

I recently wrote the following code: <style> .dotted { border:dotted; } </style> .... <p ng-style="mystyle" ng-class="dotted">{{ answer }}</p> My intention was to have the paragraph element enclosed within a ...

javascriptcssangularjsng-classangularjs-ng-class

A guide to incorporating border radius to images within a composite image with sharp.js in Node.js

In my Node.js project, I am using the sharp library to combine a collection of images into a single image. Although I have successfully created the composite image, I now need to add a border radius to each of the images in the grid. Here is the code snip ...

javascriptnode.jstypescriptsharp

404 Error: Enhancing RESTFul Service through Ajax

Upon making a RESTful service call using ajax : var request = $.ajax({type: "GET", type : "GET", url : "/services/equipment/searchEquipments?pId="+id, cache : false }); The java method within the service is defined as : @GET @P ...

ajaxrest

What are the specific actions performed on the server and on the client in ReactJS when rendering a component?

I've recently delved into the world of ReactJS, following tutorials and reading the documentation, but I'm still struggling to grasp a fundamental concept about how React actually operates. When a page is served, what exactly occurs behind the s ...

javascriptreactjs

`Optimizing Performance using jQuery Functions and AJAX`

As someone exploring ajax for the first time, I'm eager to learn how to write jQuery code that ensures my simple functions like slideshows and overlays still work smoothly when a page is loaded via ajax. Currently, I am implementing the following met ...

javascriptjqueryajax

The default theme has not been specified in Tailwind CSS

During my recent project, I utilized React, Next.js in combination with Tailwind CSS. In this project, I delved into styling customization by implementing react-slick for a specialized slider. To achieve the desired aesthetic, I made modifications to the r ...

javascriptcssreactjstailwind-cssreact-slick

Can you iterate through each element that matches those in a different array?

As a beginner in Javascript, I may stumble upon some obvious errors, so please bear with me. My goal is to iterate through two arrays and perform a loop for each element that exists in both arrays. Currently, this is my code: if(obtainedCards.some( sp =& ...

javascriptarraysforeach

Guide on exporting a reducer from a Node module built on React Redux

I am currently working on a project that requires importing a component from an external node module. Both the project and the component utilize React and Redux, and I intend for them to share the same store. Below is a snippet of the reducer code for the ...

javascriptreactjsnpmreact-redux