Datatable in ajax jquery tabs
0
I would like to combine datatables with dynamically loaded jquery tabs and don't know how to do it.
Here is my code:
index.jsp:
$(document).ready(function()
$( "#tabs" ).tabs(
beforeLoad: function( event, ui )
ui.jqXHR.fail(function()
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible. "+
"If this wouldn't be a demo." );
);
);
$('#example').DataTable();
);
<div id="tabs">
<ul>
<li><a href="ajax/tab.jsp?a=1">Tab 1</a></li>
<li><a href="ajax/tab.jsp?a=2">Tab 2</a></li>
<li><a href="ajax/tab.jsp?a=3">Tab 3</a></li>
<li><a href="ajax/tab.jsp?a=4">Tab 4</a></li>
</ul>
</div>
tab.jsp:
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
</tr>
</tbody>
</table>
jquery ajax datatables
edited Nov 15 '18 at 6:15
Foo
1
asked Nov 14 '18 at 17:20
J. NealJ. Neal
298
add a comment |
0
I would like to combine datatables with dynamically loaded jquery tabs and don't know how to do it.
Here is my code:
index.jsp:
$(document).ready(function()
$( "#tabs" ).tabs(
beforeLoad: function( event, ui )
ui.jqXHR.fail(function()
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible. "+
"If this wouldn't be a demo." );
);
);
$('#example').DataTable();
);
<div id="tabs">
<ul>
<li><a href="ajax/tab.jsp?a=1">Tab 1</a></li>
<li><a href="ajax/tab.jsp?a=2">Tab 2</a></li>
<li><a href="ajax/tab.jsp?a=3">Tab 3</a></li>
<li><a href="ajax/tab.jsp?a=4">Tab 4</a></li>
</ul>
</div>
tab.jsp:
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
</tr>
</tbody>
</table>
jquery ajax datatables
edited Nov 15 '18 at 6:15
Foo
1
asked Nov 14 '18 at 17:20
J. NealJ. Neal
298
add a comment |
0
0
0
I would like to combine datatables with dynamically loaded jquery tabs and don't know how to do it.
Here is my code:
index.jsp:
$(document).ready(function()
$( "#tabs" ).tabs(
beforeLoad: function( event, ui )
ui.jqXHR.fail(function()
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible. "+
"If this wouldn't be a demo." );
);
);
$('#example').DataTable();
);
<div id="tabs">
<ul>
<li><a href="ajax/tab.jsp?a=1">Tab 1</a></li>
<li><a href="ajax/tab.jsp?a=2">Tab 2</a></li>
<li><a href="ajax/tab.jsp?a=3">Tab 3</a></li>
<li><a href="ajax/tab.jsp?a=4">Tab 4</a></li>
</ul>
</div>
tab.jsp:
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
</tr>
</tbody>
</table>
jquery ajax datatables
edited Nov 15 '18 at 6:15
Foo
1
asked Nov 14 '18 at 17:20
J. NealJ. Neal
298
I would like to combine datatables with dynamically loaded jquery tabs and don't know how to do it.
Here is my code:
index.jsp:
$(document).ready(function()
$( "#tabs" ).tabs(
beforeLoad: function( event, ui )
ui.jqXHR.fail(function()
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible. "+
"If this wouldn't be a demo." );
);
);
$('#example').DataTable();
);
<div id="tabs">
<ul>
<li><a href="ajax/tab.jsp?a=1">Tab 1</a></li>
<li><a href="ajax/tab.jsp?a=2">Tab 2</a></li>
<li><a href="ajax/tab.jsp?a=3">Tab 3</a></li>
<li><a href="ajax/tab.jsp?a=4">Tab 4</a></li>
</ul>
</div>
tab.jsp:
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
</tr>
</tbody>
</table>
jquery ajax datatables
jquery ajax datatables
edited Nov 15 '18 at 6:15
Foo
1
asked Nov 14 '18 at 17:20
J. NealJ. Neal
298
edited Nov 15 '18 at 6:15
Foo
1
asked Nov 14 '18 at 17:20
J. NealJ. Neal
298
edited Nov 15 '18 at 6:15
Foo
1
edited Nov 15 '18 at 6:15
Foo
1
edited Nov 15 '18 at 6:15
Foo
1
1
asked Nov 14 '18 at 17:20
J. NealJ. Neal
298
asked Nov 14 '18 at 17:20
J. NealJ. Neal
298
asked Nov 14 '18 at 17:20
J. NealJ. Neal
298
298
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
When we click Tab it will load ajax/tab.jsp?a=1 in a dynamic div.
So this happens each time you click a Tab.
But your Datatable code is written just once which will get executed before the jsp file is loaded
So your datatable doest show up.
To resolve this
- You need to call
$('#example').DataTable();each time a Tab is clicked - And make sure you call if after your jsp content is loaded.
You can use tabsbeforeload event of Tabs.
Note:
I have added timeout just to delay things so that jsp is loaded.
If yous jsp takes more time to load try increasing timeout value.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script>
$(function ()
$("#tabs").tabs(
beforeLoad: function (event, ui)
// load first time
setTimeout(function ()
$('#example').DataTable();
, 30);
ui.jqXHR.fail(function ()
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo.");
);
);
// before tabload
$("#tabs").on("tabsbeforeload", function (event, ui)
console.log("dd");
$("#example").remove(); // to avoide duplicate id as Datatable will not load for other Tabs
setTimeout(function ()
$('#example').DataTable();
, 30);
);
);
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="ajax/tab.jsp?a=1">Tab 1</a></li>
<li><a href="ajax/tab.jsp?a=2">Tab 2</a></li>
<li><a href="ajax/tab.jsp?a=3">Tab 3</a></li>
<li><a href="ajax/tab.jsp?a=4">Tab 4</a></li>
</ul>
</div>
</body>
</html>
edited Nov 15 '18 at 6:38
Julian Stark
1,2661426
answered Nov 15 '18 at 5:10
MyTwoCentsMyTwoCents
3,0242928
Thank you very much, I wil try it and let you know if it works for me :)
– J. Neal
Nov 16 '18 at 12:58
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53305613%2fdatatable-in-ajax-jquery-tabs%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
When we click Tab it will load ajax/tab.jsp?a=1 in a dynamic div.
So this happens each time you click a Tab.
But your Datatable code is written just once which will get executed before the jsp file is loaded
So your datatable doest show up.
To resolve this
- You need to call
$('#example').DataTable();each time a Tab is clicked - And make sure you call if after your jsp content is loaded.
You can use tabsbeforeload event of Tabs.
Note:
I have added timeout just to delay things so that jsp is loaded.
If yous jsp takes more time to load try increasing timeout value.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script>
$(function ()
$("#tabs").tabs(
beforeLoad: function (event, ui)
// load first time
setTimeout(function ()
$('#example').DataTable();
, 30);
ui.jqXHR.fail(function ()
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo.");
);
);
// before tabload
$("#tabs").on("tabsbeforeload", function (event, ui)
console.log("dd");
$("#example").remove(); // to avoide duplicate id as Datatable will not load for other Tabs
setTimeout(function ()
$('#example').DataTable();
, 30);
);
);
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="ajax/tab.jsp?a=1">Tab 1</a></li>
<li><a href="ajax/tab.jsp?a=2">Tab 2</a></li>
<li><a href="ajax/tab.jsp?a=3">Tab 3</a></li>
<li><a href="ajax/tab.jsp?a=4">Tab 4</a></li>
</ul>
</div>
</body>
</html>
edited Nov 15 '18 at 6:38
Julian Stark
1,2661426
answered Nov 15 '18 at 5:10
MyTwoCentsMyTwoCents
3,0242928
Thank you very much, I wil try it and let you know if it works for me :)
– J. Neal
Nov 16 '18 at 12:58
add a comment |
0
When we click Tab it will load ajax/tab.jsp?a=1 in a dynamic div.
So this happens each time you click a Tab.
But your Datatable code is written just once which will get executed before the jsp file is loaded
So your datatable doest show up.
To resolve this
- You need to call
$('#example').DataTable();each time a Tab is clicked - And make sure you call if after your jsp content is loaded.
You can use tabsbeforeload event of Tabs.
Note:
I have added timeout just to delay things so that jsp is loaded.
If yous jsp takes more time to load try increasing timeout value.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script>
$(function ()
$("#tabs").tabs(
beforeLoad: function (event, ui)
// load first time
setTimeout(function ()
$('#example').DataTable();
, 30);
ui.jqXHR.fail(function ()
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo.");
);
);
// before tabload
$("#tabs").on("tabsbeforeload", function (event, ui)
console.log("dd");
$("#example").remove(); // to avoide duplicate id as Datatable will not load for other Tabs
setTimeout(function ()
$('#example').DataTable();
, 30);
);
);
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="ajax/tab.jsp?a=1">Tab 1</a></li>
<li><a href="ajax/tab.jsp?a=2">Tab 2</a></li>
<li><a href="ajax/tab.jsp?a=3">Tab 3</a></li>
<li><a href="ajax/tab.jsp?a=4">Tab 4</a></li>
</ul>
</div>
</body>
</html>
edited Nov 15 '18 at 6:38
Julian Stark
1,2661426
answered Nov 15 '18 at 5:10
MyTwoCentsMyTwoCents
3,0242928
Thank you very much, I wil try it and let you know if it works for me :)
– J. Neal
Nov 16 '18 at 12:58
add a comment |
0
0
0
When we click Tab it will load ajax/tab.jsp?a=1 in a dynamic div.
So this happens each time you click a Tab.
But your Datatable code is written just once which will get executed before the jsp file is loaded
So your datatable doest show up.
To resolve this
- You need to call
$('#example').DataTable();each time a Tab is clicked - And make sure you call if after your jsp content is loaded.
You can use tabsbeforeload event of Tabs.
Note:
I have added timeout just to delay things so that jsp is loaded.
If yous jsp takes more time to load try increasing timeout value.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script>
$(function ()
$("#tabs").tabs(
beforeLoad: function (event, ui)
// load first time
setTimeout(function ()
$('#example').DataTable();
, 30);
ui.jqXHR.fail(function ()
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo.");
);
);
// before tabload
$("#tabs").on("tabsbeforeload", function (event, ui)
console.log("dd");
$("#example").remove(); // to avoide duplicate id as Datatable will not load for other Tabs
setTimeout(function ()
$('#example').DataTable();
, 30);
);
);
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="ajax/tab.jsp?a=1">Tab 1</a></li>
<li><a href="ajax/tab.jsp?a=2">Tab 2</a></li>
<li><a href="ajax/tab.jsp?a=3">Tab 3</a></li>
<li><a href="ajax/tab.jsp?a=4">Tab 4</a></li>
</ul>
</div>
</body>
</html>
edited Nov 15 '18 at 6:38
Julian Stark
1,2661426
answered Nov 15 '18 at 5:10
MyTwoCentsMyTwoCents
3,0242928
When we click Tab it will load ajax/tab.jsp?a=1 in a dynamic div.
So this happens each time you click a Tab.
But your Datatable code is written just once which will get executed before the jsp file is loaded
So your datatable doest show up.
To resolve this
- You need to call
$('#example').DataTable();each time a Tab is clicked - And make sure you call if after your jsp content is loaded.
You can use tabsbeforeload event of Tabs.
Note:
I have added timeout just to delay things so that jsp is loaded.
If yous jsp takes more time to load try increasing timeout value.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script>
$(function ()
$("#tabs").tabs(
beforeLoad: function (event, ui)
// load first time
setTimeout(function ()
$('#example').DataTable();
, 30);
ui.jqXHR.fail(function ()
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo.");
);
);
// before tabload
$("#tabs").on("tabsbeforeload", function (event, ui)
console.log("dd");
$("#example").remove(); // to avoide duplicate id as Datatable will not load for other Tabs
setTimeout(function ()
$('#example').DataTable();
, 30);
);
);
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="ajax/tab.jsp?a=1">Tab 1</a></li>
<li><a href="ajax/tab.jsp?a=2">Tab 2</a></li>
<li><a href="ajax/tab.jsp?a=3">Tab 3</a></li>
<li><a href="ajax/tab.jsp?a=4">Tab 4</a></li>
</ul>
</div>
</body>
</html>
edited Nov 15 '18 at 6:38
Julian Stark
1,2661426
answered Nov 15 '18 at 5:10
MyTwoCentsMyTwoCents
3,0242928
edited Nov 15 '18 at 6:38
Julian Stark
1,2661426
edited Nov 15 '18 at 6:38
Julian Stark
1,2661426
edited Nov 15 '18 at 6:38
Julian Stark
1,2661426
1,2661426
answered Nov 15 '18 at 5:10
MyTwoCentsMyTwoCents
3,0242928
answered Nov 15 '18 at 5:10
MyTwoCentsMyTwoCents
3,0242928
answered Nov 15 '18 at 5:10
MyTwoCentsMyTwoCents
3,0242928
3,0242928
Thank you very much, I wil try it and let you know if it works for me :)
– J. Neal
Nov 16 '18 at 12:58
add a comment |
Thank you very much, I wil try it and let you know if it works for me :)
– J. Neal
Nov 16 '18 at 12:58
Thank you very much, I wil try it and let you know if it works for me :)
– J. Neal
Nov 16 '18 at 12:58
Thank you very much, I wil try it and let you know if it works for me :)
– J. Neal
Nov 16 '18 at 12:58
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53305613%2fdatatable-in-ajax-jquery-tabs%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
