Datatable in ajax jquery tabs

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>

edited Nov 15 '18 at 6:15

Foo

asked Nov 14 '18 at 17:20

J. Neal

298

add a comment |

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>

edited Nov 15 '18 at 6:15

Foo

asked Nov 14 '18 at 17:20

J. Neal

298

add a comment |

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>

edited Nov 15 '18 at 6:15

Foo

asked Nov 14 '18 at 17:20

J. 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

edited Nov 15 '18 at 6:15

Foo

asked Nov 14 '18 at 17:20

J. Neal

298

edited Nov 15 '18 at 6:15

Foo

asked Nov 14 '18 at 17:20

J. Neal

298

edited Nov 15 '18 at 6:15

Foo

edited Nov 15 '18 at 6:15

Foo

edited Nov 15 '18 at 6:15

Foo

asked Nov 14 '18 at 17:20

J. Neal

298

asked Nov 14 '18 at 17:20

J. Neal

298

asked Nov 14 '18 at 17:20

J. Neal

298

add a comment |

1 Answer
1

active

oldest

votes

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,3031526

answered Nov 15 '18 at 5:10

MyTwoCents

3,0742930

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

Post as a guest

Name

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

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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,3031526

answered Nov 15 '18 at 5:10

MyTwoCents

3,0742930

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 |

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,3031526

answered Nov 15 '18 at 5:10

MyTwoCents

3,0742930

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 |

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,3031526

answered Nov 15 '18 at 5:10

MyTwoCents

3,0742930

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,3031526

answered Nov 15 '18 at 5:10

MyTwoCents

3,0742930

edited Nov 15 '18 at 6:38

Julian Stark

1,3031526

edited Nov 15 '18 at 6:38

Julian Stark

1,3031526

edited Nov 15 '18 at 6:38

Julian Stark

1,3031526

answered Nov 15 '18 at 5:10

MyTwoCents

3,0742930

answered Nov 15 '18 at 5:10

MyTwoCents

3,0742930

answered Nov 15 '18 at 5:10

MyTwoCents

3,0742930

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

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

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky