DataTables Tabs

DataTables Tabs

SalmanSSalmanS Posts: 102Questions: 12Answers: 0

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.

This question has an accepted answers - jump to answer

Answers

  • SalmanSSalmanS Posts: 102Questions: 12Answers: 0
        <!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.

  • colincolin Posts: 15,095Questions: 1Answers: 2,581

    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

  • SalmanSSalmanS Posts: 102Questions: 12Answers: 0

    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.
    
  • SalmanSSalmanS Posts: 102Questions: 12Answers: 0

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

  • SalmanSSalmanS Posts: 102Questions: 12Answers: 0

    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>
    
  • kthorngrenkthorngren Posts: 19,947Questions: 26Answers: 4,701

    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

  • SalmanSSalmanS Posts: 102Questions: 12Answers: 0
    edited 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 -->`
    
  • SalmanSSalmanS Posts: 102Questions: 12Answers: 0
    edited 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 -->
    
  • colincolin Posts: 15,095Questions: 1Answers: 2,581

    Hi @SalmanS ,

    There's two immediate things that look wrong,

    1. 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
    2. 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

  • SalmanSSalmanS Posts: 102Questions: 12Answers: 0
    edited 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>
    
  • SalmanSSalmanS Posts: 102Questions: 12Answers: 0

    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>
    
  • kthorngrenkthorngren Posts: 19,947Questions: 26Answers: 4,701

    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

  • colincolin Posts: 15,095Questions: 1Answers: 2,581

    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

  • SalmanSSalmanS Posts: 102Questions: 12Answers: 0

    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.

  • SalmanSSalmanS Posts: 102Questions: 12Answers: 0

    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.

  • kthorngrenkthorngren Posts: 19,947Questions: 26Answers: 4,701

    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

  • SalmanSSalmanS Posts: 102Questions: 12Answers: 0

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

  • SalmanSSalmanS Posts: 102Questions: 12Answers: 0

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

  • SalmanSSalmanS Posts: 102Questions: 12Answers: 0
    edited 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.

  • kthorngrenkthorngren Posts: 19,947Questions: 26Answers: 4,701

    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

  • SalmanSSalmanS Posts: 102Questions: 12Answers: 0
    edited 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'
    
          });
    
          });
    
         } );
    
  • kthorngrenkthorngren Posts: 19,947Questions: 26Answers: 4,701

    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

  • SalmanSSalmanS Posts: 102Questions: 12Answers: 0

    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

  • kthorngrenkthorngren Posts: 19,947Questions: 26Answers: 4,701
    Answer ✓

    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

  • SalmanSSalmanS Posts: 102Questions: 12Answers: 0

    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.

This discussion has been closed.