DataTables Tabs

SalmanS · October 2018

Hi Allan,

Not sure if you could help.

I got three div elements .well class

<div class="container">

<div class='well'><p>Grid 1<./p></div>
<div class='well'><p>Grid 1<./p></div>
<div class='well'><p>Grid 1<./p></div>

</div>

Got Jquery function workingclick('.well') working fine and trapping alert. So far so good.

click('.well') alert is responding. Now i got three tabs underneath Tab1 TAb2 Tab3 Iwould like to open a respective datatable grid underneath when clicks the following:

<div class='well'><p>Grid 1<./p></div>
    <div class='well'><p>Grid 1<./p></div>
    <div class='well'><p>Grid 1<./p></div>

Please note all the grids 1,2,3 are using different tables, ie., grid 1 is using employee table, grid 2 is using customer table and grid 3 is using order table.

Any help is highly appreciated.

Many thanks for your help in advance.

SalmanS · October 2018

    <!DOCTYPE html>
    <html>
    <head>
        <title>Dynamic DataTables With Jquery Tabs</title>

        <style>
        .tab-content {
      padding:10px;
      border-left:1px solid #DDD;
      border-bottom:1px solid #DDD;
      border-right:1px solid #DDD;
    }

        </style>


        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

    </head>
    <body>
    <div class="container">
        <h3>
            TakaTaka </h3>

        <hr><br>

        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#example4-tab1" aria-controls="example4-tab1" role="tab" data-toggle="tab">Tab 1</a></li>
            <li role="presentation"><a href="#example4-tab2" aria-controls="example4-tab2" role="tab" data-toggle="tab">Tab 2</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade in active" id="example4-tab1">
                <table id="example4-tab1-dt" class="table table-striped table-bordered table-condensed" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th>Age</th>
                            <th>Start date</th>
                            <th>Salary</th>
                        </tr>
                    </thead>
                    <tbody>
                               <tr>
                            <td>Donna Snider</td>
                            <td>Customer Support</td>
                            <td>New York</td>
                            <td>27</td>
                            <td>2011/01/25</td>
                            <td>$112,000</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="example4-tab2">
                <table id="example4-tab2-dt" class="table table-striped table-bordered table-condensed" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th>Age</th>
                            <th>Start date</th>
                            <th>Salary</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Tiger Nixon</td>
                            <td>System Architect</td>
                            <td>Edinburgh</td>
                            <td>61</td>
                            <td>2011/04/25</td>
                            <td>$320,800</td>
                        </tr>

                        <tr>
                            <td>Shad Decker</td>
                            <td>Regional Director</td>
                            <td>Edinburgh</td>
                            <td>51</td>
                            <td>2008/11/13</td>
                            <td>$183,000</td>
                        </tr>
                        <tr>
                            <td>Michael Bruce</td>
                            <td>Javascript Developer</td>
                            <td>Singapore</td>
                            <td>29</td>
                            <td>2011/06/27</td>
                            <td>$183,000</td>
                        </tr>
                        <tr>
                            <td>Donna Snider</td>
                            <td>Customer Support</td>
                            <td>New York</td>
                            <td>27</td>
                            <td>2011/01/25</td>
                            <td>$112,000</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>


        <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>


                <script type="text/javascript">
            $(document).ready(function(){
       $('#example4-tab1-dt, #example4-tab2-dt').DataTable({
          scrollX: true,
          fixedColumns: {
             leftColumns: 1
          }
       });

       $('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
          $($.fn.dataTable.tables(true)).DataTable()
             .columns.adjust()
             .fixedColumns().relayout();
       });   
    });    </script>
    </body>
    </html>

I manage to get to this but i need to use jquery. plese can someone help.

colin · October 2018

Hi @SalmanS ,

This thread here discusses putting different tables into their own tabs - it'll be worth taking a look. There's a working example at the bottom of the page.

If that doesn't help, would you be able to create a running example of your code? It would help to debug it. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

SalmanS · October 2018

Many thanks colin for your answer, you are a champion. I was struggling so much to get this working over weeks.

The example is great.

Is there a way I can call data usingemp_tab.php file by adding url: emp_tab.php

===jquery script to pull data from server side using php=============

    <script>
    $(document).ready( function () {
        $('#tab1').DataTable({

            "ajax": {
                "url": "emp_tab.php",
                "type": "POST"
            },
            "columns": [
                { "data": "id" },
                { "data": "name" },
                { "data": "email" }
            ]
        });

     $('#tab2').DataTable({

            "ajax": {
                "url": "order_tab.php",
                "type": "POST"
            },
            "columns": [
                { "data": "id" },
                { "data": "productname" },
                { "data": "invoice_date" }
            ]
        });

  $('#tab3').DataTable({

            "ajax": {
                "url": "department_tab.php",
                "type": "POST"
            },
            "columns": [
                { "data": "id" },
                { "data": "dname" },
                { "data": "daddress" }
            ]
        });
    } );
    </script>

=============Code from live Example===================

HAHAHA	HAHAHA
yes1	yes1
yes2	yes2

OHOHOH	OHOHOH
oui	yes2
non	yes2

HIHIHI	HIHIHI
si	yes2
no	yes2

=============

          mTableA = $('#tableA').DataTable({
            "pageLength": 5,
            dom: 'ZBlfrtip',
            "lengthMenu": [
              [15, 30, 50, 75, 100, -1],
              [15, 30, 50, 75, 100, 'all']
            ]
          });

          mTableB = $('#tableB').DataTable({
            "pageLength": 5,
            dom: 'ZBlfrtip',
            "lengthMenu": [
              [15, 30, 50, 75, 100, -1],
              [15, 30, 50, 75, 100, 'all']
            ]
          });

          mTableC = $('#tableC').DataTable({
            "pageLength": 5,
            dom: 'ZBlfrtip',
            "lengthMenu": [
              [15, 30, 50, 75, 100, -1],
              [15, 30, 50, 75, 100, 'all']
            ]
          });


          $('[data-uk-tab]').on('change.uk.tab', function(e, active) {
            console.log("UK-TABLE", $('.uk-switcher').find('.uk-table').get(active.index()).id);
            console.log("PAGE DATATABLE ARE ", $.fn.dataTable.tables());
            console.log("THIS DATATABLE IS: ", $.fn.dataTable.tables(true));

            setTimeout(function() {
              console.log($('#tableB:visible').length);

              $.fn.dataTable.tables({
                visible: true,
                api: true
              }).columns.adjust();
            }, 0);
          });

I am just wondering how I could use php for server side processing and replace this code.

SalmanS · October 2018

I am just wondering how I could use php for server side processing and replace this code.

SalmanS · October 2018

I am still struggling.

here is my code:

Please help.

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Oxygen:400,700">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

    <script charset="utf-8" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script charset="utf-8" src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>




<div class="container">
       <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#example3-tab1" aria-controls="example3-tab1" role="tab" data-toggle="tab">Tab 1</a></li>
        <li role="presentation"><a href="#example3-tab2" aria-controls="example3-tab2" role="tab" data-toggle="tab">Tab 2</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane fade in active" id="example3-tab1">
            <table id="example3-tab1-dt" class="table table-striped table-bordered table-condensed" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>
            </table>
        </div>

     <div role="tabpanel" class="tab-pane fade" id="example3-tab2">
            <table id="example3-tab2-dt" class="table table-striped table-bordered table-condensed" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>

            </table>
        </div>


     <div role="tabpanel" class="tab-pane fade" id="example3-tab2">
            <table id="example3-tab3-dt" class="table table-striped table-bordered table-condensed" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>

            </table>
        </div>

    </div>
</div>



 <script>
  $(document).ready( function () {
      $('#tab1').DataTable({

          "ajax": {
              "url": "emp_tab.php",
              "type": "POST"
          },
          "columns": [
              { "data": "id" },
              { "data": "name" },
              { "data": "email" }
          ]
      });

   $('#tab2').DataTable({

          "ajax": {
              "url": "order_tab.php",
              "type": "POST"
          },
          "columns": [
              { "data": "id" },
              { "data": "productname" },
              { "data": "invoice_date" }
          ]
      });

$('#tab3').DataTable({

          "ajax": {
              "url": "department_tab.php",
              "type": "POST"
          },
          "columns": [
              { "data": "id" },
              { "data": "dname" },
              { "data": "daddress" }
          ]
      });
  } );
  </script>

kthorngren · October 2018

To me its unclear what exactly is the issue. Maybe you can describe more about the issue and alert errors or errors in your browsers console you are getting.

However I do see one thing. You are defining three columns in your Datatables init code but have six defined in your table. You will get errors because of this.

Kevin

SalmanS · October 2018

Hi Kevin,

I just want three taps and onclick build the datagrid for the respective section.

My Bootstrap Tabs are working fine.

Here is my bootstrap code: I tried so many methods earlier to build grids within those tabs and none is working.

Here is my basic Bootstrap Tabs. please help how i can pull data from php or text file using DATATABLE

`<!-- Nav tabs -->
<div class="container">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="emp-tab" data-toggle="tab" href="#emp" role="tab" aria-controls="emp" aria-selected="true">Employee Datatable Grid</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="order-tab" data-toggle="tab" href="#order" role="tab" aria-controls="order" aria-selected="false">Order Datatable Grid</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="dept-tab" data-toggle="tab" href="#department" role="tab" aria-controls="department" aria-selected="false">Department Datatable Grid</a>
        </li>

    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane active" id="emp" role="tabpanel" aria-labelledby="emp-tab"> Employee Grid...</div>
        <div class="tab-pane" id="order" role="tabpanel" aria-labelledby="order-tab">Order Grid...</div>
        <div class="tab-pane" id="department" role="tabpanel" aria-labelledby="dept-tab">Department Grid</div>

    </div>
</div>
<!-- end of Tab Container -->`

SalmanS · October 2018

Hi Kevin,

I just want three taps and onclick build the datagrid for the respective section.

My Bootstrap Tabs are working fine.

Here is my bootstrap code: I tried so many methods earlier to build grids within those tabs and none is working.

Here is my basic Bootstrap Tabs. please help how i can pull data from php or text file using DATATABLE

<!-- Nav tabs -->
<div class="container">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="emp-tab" data-toggle="tab" href="#emp" role="tab" aria-controls="emp" aria-selected="true">Employee Datatable Grid</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="order-tab" data-toggle="tab" href="#order" role="tab" aria-controls="order" aria-selected="false">Order Datatable Grid</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="dept-tab" data-toggle="tab" href="#department" role="tab" aria-controls="department" aria-selected="false">Department Datatable Grid</a>
        </li>

    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane active" id="emp" role="tabpanel" aria-labelledby="emp-tab"> Employee Grid...</div>
        <div class="tab-pane" id="order" role="tabpanel" aria-labelledby="order-tab">Order Grid...</div>
        <div class="tab-pane" id="department" role="tabpanel" aria-labelledby="dept-tab">Department Grid</div>

    </div>
</div>
<!-- end of Tab Container -->

colin · October 2018

Hi @SalmanS ,

There's two immediate things that look wrong,

your tables in the HTML have IDs like this, example3-tab2-dt, but when you initialise the table, you're passing in IDs like this, tab3, so DataTables wouldn't be able to find that table. Those IDs need to match
As Kevin said, in the DataTables table initialisation, all three tables have three columns, but in the HTML they have six - again these need to match.

I'd say get those two things sorted and them either create a test page, or link to the page so we can take a look if there's still problems.

Cheers,

Colin

SalmanS · October 2018

Hi Colin,
Sorry my bad. many thanks for getting back to me. I changed the code and not sure if this is the best way, how I have to use DATATABLES or maybe there is better way? God knows.

Anyway, as stated earlier with my bootstrap tabs. Just want to achieve display data in three tabs by calling from ajax request with pagination.

Here is my boostrap tabs code and underneath is my original code with respective columns:

    !-- Nav tabs -->
    <div class="container">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="emp-tab" data-toggle="tab" href="#emp" role="tab" aria-controls="emp" aria-selected="true">Employee Datatable Grid</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="order-tab" data-toggle="tab" href="#order" role="tab" aria-controls="order" aria-selected="false">Order Datatable Grid</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="dept-tab" data-toggle="tab" href="#department" role="tab" aria-controls="department" aria-selected="false">Department Datatable Grid</a>
            </li>

        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <div class="tab-pane active" id="emp" role="tabpanel" aria-labelledby="emp-tab"> Employee Grid...</div>
            <div class="tab-pane" id="order" role="tabpanel" aria-labelledby="order-tab">Order Grid...</div>
            <div class="tab-pane" id="department" role="tabpanel" aria-labelledby="dept-tab">Department Grid</div>

        </div>
    </div>
    <!-- end of Tab Container -->

ORIGINAL CODE with respective columns:

link rel="stylesheet" href="//fonts.googleapis.com/css?family=Oxygen:400,700">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

    <script charset="utf-8" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script charset="utf-8" src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>




<div class="container">
       <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#example3-tab1" aria-controls="example3-tab1" role="tab" data-toggle="tab">Tab 1</a></li>
        <li role="presentation"><a href="#example3-tab2" aria-controls="example3-tab2" role="tab" data-toggle="tab">Tab 2</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane fade in active" id="example3-tab1">
            <table id="example3-tab1-dt" class="table table-striped table-bordered table-condensed" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Email</th>
                    </tr>
                </thead>
            </table>
        </div>

     <div role="tabpanel" class="tab-pane fade" id="example3-tab2">
            <table id="example3-tab2-dt" class="table table-striped table-bordered table-condensed" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Product Name</th>
                        <th>Invoice Date</th>
                    </tr>
                </thead>

            </table>
        </div>


     <div role="tabpanel" class="tab-pane fade" id="example3-tab3">
            <table id="example3-tab3-dt" class="table table-striped table-bordered table-condensed" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>ID /th>
                        <th>Department</th>
                        <th>Address</th>

                    </tr>
                </thead>

            </table>
        </div>

    </div>
</div>



 <script>
  $(document).ready( function () {
      $('#example3-tab1-dt').DataTable({

          "ajax": {
              "url": "emp_tab.php",
              "type": "POST"
          },
          "columns": [
              { "data": "id" },
              { "data": "name" },
              { "data": "email" }
          ]
      });

   $('#example3-tab2-dt').DataTable({

          "ajax": {
              "url": "order_tab.php",
              "type": "POST"
          },
          "columns": [
              { "data": "id" },
              { "data": "productname" },
              { "data": "invoice_date" }
          ]
      });

$('#example3-tab3-dt').DataTable({

          "ajax": {
              "url": "department_tab.php",
              "type": "POST"
          },
          "columns": [
              { "data": "id" },
              { "data": "dname" },
              { "data": "daddress" }
          ]
      });
  } );
  </script>

SalmanS · October 2018

I found another example at jquery. but i am sure we can achieve all this using DATATABLES. How do i pull data in the respective tabs.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>tabs demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>

<div id="tabs">
  <ul>
    <li><a href="#fragment-1"><span>One</span></a></li>
    <li><a href="#fragment-2"><span>Two</span></a></li>
    <li><a href="#fragment-3"><span>Three</span></a></li>
  </ul>
  <div id="fragment-1">
    <p>First tab is active by default:</p>
    <pre><code>$( "#tabs" ).tabs(); </code></pre>
  </div>
  <div id="fragment-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</div>

<script>
$( "#tabs" ).tabs();
</script>

</body>
</html>

kthorngren · October 2018

I haven't dug through your code. If you want help with your code then please provide a test case so we can help you debug.

Here is an example with Bootstrap tabs. The first tab uses table data from the DOM, the second uses ajax with objects and the third uses ajax with arrays.

http://live.datatables.net/xojiqite/1/edit

Kevin

colin · October 2018

As Kevin said, it would really help if you could demonstrate this problem. We're circling around here, and seeing it running would help to resolve those silly issues - for example the wrong IDs and the wrong column widths.

In my first post, there's a link to another thread which contains several fiddles to pages with tabs - this really helped people to get a feel for what was required. If you could look at that page, create a similar fiddle for your environment (we don't need real data, that can be mocked), then we can get to the bottom of this much quicker.

Cheers,

Colin

SalmanS · October 2018

Million and billion thanks to kevin for providing the sample code. I was earlier. Kevin God bless you man for you help.

You help is great, unlike others who start critcizing and makes you cry. we come on this platform for help because we dont know.

@colin i dont know how to create fiddle, but Kevin's sample is great. Love you kevin for your help.

I owe you.

SalmanS · October 2018

Kevin if you dont mind, i would like to clarify the following:

<input type="text" class="global_filter" id="global_filter">
      <div class="clearfix"></div>

Input is text and set the id=global_filter. It looks like a majic and the tabs are responding for the respective tab and data displayed. How does this happened.

I understood the javascript function very well -

$('input.global_filter').on( 'keyup click', function () {
        filterGlobal();
      } );

But i am unable to figure out, when we click the<li><a href="#2" data-toggle="tab">Table 2</a> tabs, its calling the above function how?

Any thoughts or explanation is highly appreciated.
Bless you.

kthorngren · October 2018

The above code was to show someone else how to run a search that searched all tables. Clicking the tab is not running that code. Its the text input you see above the tabs.

Removed that search input to make it less confusing.
http://live.datatables.net/bemofozu/1/edit

Kevin

SalmanS · October 2018

Kevin, you are the king. a scripting guru.
so elegant, so simple, i cannot thank you enough for your help.

if i understood it clearly my small brain, its building all the grids when document is ready. is there a way we can call build/fill each tab grid, when the tab is clicked?.

SalmanS · October 2018

I want to make it scrolly records 200 at a time.

SalmanS · October 2018

I googled for over 1 week and i saw hundreds of scripts but non matched kevin's simple technique. Tabs and DATATABLE grids.

All the other scripts on google were talking about redraw, column size and so lenghty and confused posts.

Kevin's code is so simple.

kthorngren · October 2018

its building all the grids when document is ready. is there a way we can call build/fill each tab grid, when the tab is clicked?.

You will use the Bootstrap shown.bs.tab event. Take a look here for the docs:
https://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp

In the event function you can init the Datatable in the tab.

I want to make it scrolly records 200 at a time.

According to the scrollY docs you give it a number or a CSS unit. It doesn't have an option for specific number of rows. You will need to adjust the number to show the number of rows you want.

Kevin

SalmanS · October 2018

Sorry kevin i being a daft.

This is my modified code:

when the document is ready i am calling the ``.click event? am i doing o.k.

    $(document).ready( function () {

//Draw first grid or active grid.

      var table = $('#example').DataTable(); 

// onclick div id=2 draw first  grid.

    $("2").click(function(){

      var table1 = $('#example1').DataTable({
            "ajax": "/ajax/objects.txt",
            "columns": [
                { "data": "name" },
                { "data": "position" },
                { "data": "office" },
                { "data": "extn" },
                { "data": "start_date" },
                { "data": "salary" }
            ]

      });
    });

// onclick div id=3 draw second grid.

    $("3").click(function(){
      var table2 = $('#example2').DataTable({
            ajax: '/ajax/arrays.txt'

      });

      });

     } );

kthorngren · October 2018

You can update my examples and post the link to them if you have questions. That would be a good way to help.

I meant for you to looks at the Tab Events section of this doc and see the example for shown.bs.tab:
https://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp

You have this but my example doesn't have anything with the id of 3. Also if you wanted to use the an id selector you would use "#3".

$("3").click(function(){

Here is an updated example using the tab event:
http://live.datatables.net/zuyozuxu/1/edit

Notice I added destroy: true, to the tables in tabs 2 and 3. This is so the tables can be reloaded without errors. See the destroy doc for more info.

I put a console.log statement in so you can see what the value of $(event.target).text() from the w3schools example. If you monitor the Network Tab of your browser's developer tools you can see the tab 2 and tab 3 tables aren't loaded until you go to the tab.

Kevin

SalmanS · October 2018

Many thanks kevin, I dont know how to update your links or create a new on on liv.datatables.net.

Are we allowed to modify the code or create a new one.

http://live.datatables.net/zuyozuxu/1/edit

kthorngren · October 2018

You can use the clone option to create a copy:

You can create a new one using the steps here:

https://datatables.net/manual/tech-notes/9

Kevin

SalmanS · October 2018

This is the best support you could every get in this world.
longlive datatables
Thank you all. Specially my favorate The King Kevin. The Lion of Datatables. The scripting guru. there is not enough words i got to describe the champion Kevin.

DataTables Tabs

DataTables Tabs

Answers

Howdy, Stranger!

Categories

DataTables

DataTables Tabs

DataTables Tabs

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables