Datatables: Using multiple datatables in the same page

Question

I am working on a project and need to have multiple datatables on the same page. As mentioned on the website, I tried two methods of using following mentioned code:

$('table.display').DataTable();
$('#example').DataTable();

This displays datatables on first table, but not on the second one. As said on their website and also in some questions answered on StackOverflow, the first one should work no matter how many tables we use.

The HTML code is as mentioned below:

                    <table id="renewallist" class="display" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th>Insured's Name</th>
                                <th>Department</th>
                                <th>Policy No.</th>
                                <th>From</th>
                                <th>To</th>
                                <th>S.I.</th>
                                <th>Premium</th>
                                <th>Description</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th>Insured's Name</th>
                                <th>Department</th>
                                <th>Policy No.</th>
                                <th>From</th>
                                <th>To</th>
                                <th>S.I.</th>
                                <th>Premium</th>
                                <th>Description</th>
                                <th></th>
                            </tr>
                        </tfoot>
                        <tbody>
                            <?php foreach ($allpol as $key => $value) { ?>
                                <tr>
                                    <td><?php echo $value->firmname; ?></td>
                                    <td><?php echo $value->deptname; ?></td>
                                    <td class="brkwrd"><?php echo $value->polno; ?></td>
                                    <td class="w75"><?php echo date("d-m-y", strtotime($value->startdate)); ?></td>
                                    <td class="w75"><?php echo date("d-m-y", strtotime($value->enddate)); ?></td>
                                    <td>Rs. <?php echo $value->si; ?></td>
                                    <td>Rs. <?php echo $value->premium; ?></td>
                                    <td class="brkwrd"><?php echo $value->description; ?></td>
                                    <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target=".pol" onclick='getpolinfo(<?php echo $value->polid; ?>)'>View Info</button></td>
                                </tr>
                            <?php } ?>
                        </tbody>
                    </table>

All positive suggestions are appreciated.

Thank You in advance...

It works fine using $('table.display').DataTable(), see this example. Most likely you're not initializing your tables correctly or table becomes available after you perform initialization. — Gyrocode.com
– Gyrocode.com, Commented May 6, 2017 at 12:21
I used your mentioned initialisation, but it didn't work. Is there any piece of code that I should provide to help you find my mistake? — V15HM4Y
– V15HM4Y, Commented May 6, 2017 at 12:25
Use this jsFiddle as a starting point and use your code to replicate the problem. — Gyrocode.com
– Gyrocode.com, Commented May 6, 2017 at 12:34
could you please add code for the second table as you just provided initialization and thats not enough — Shahzad
– Shahzad, Commented May 7, 2017 at 5:22

MrMisery · Accepted Answer · 2017-05-06 14:12:41Z

All you have to do is to add your javascript code after the tables on the HTML code , e.g. adding the JS code at the end of the body and no matter how many tables you will have there will be no problem as long as they have unique IDs (to perform operations on table you can define DataTable as
var exampleTable = $('#tableId').DataTable();), in addition edit your table's HTML code to the following:

 <table id="renewallist" class="display" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>Insured's Name</th>
                            <th>Department</th>
                            <th>Policy No.</th>
                            <th>From</th>
                            <th>To</th>
                            <th>S.I.</th>
                            <th>Premium</th>
                            <th>Description</th>
                            <th></th>
                        </tr>
                    </thead>

                    <tbody>
                        <?php foreach ($allpol as $key => $value) { ?>
                            <tr>
                                <td><?php echo $value->firmname; ?></td>
                                <td><?php echo $value->deptname; ?></td>
                                <td class="brkwrd"><?php echo $value->polno; ?></td>
                                <td class="w75"><?php echo date("d-m-y", strtotime($value->startdate)); ?></td>
                                <td class="w75"><?php echo date("d-m-y", strtotime($value->enddate)); ?></td>
                                <td>Rs. <?php echo $value->si; ?></td>
                                <td>Rs. <?php echo $value->premium; ?></td>
                                <td class="brkwrd"><?php echo $value->description; ?></td>
                                <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target=".pol" onclick='getpolinfo(<?php echo $value->polid; ?>)'>View Info</button></td>
                            </tr>
                        <?php } ?>
                    </tbody>
              <tfoot>
                        <tr>
                            <th>Insured's Name</th>
                            <th>Department</th>
                            <th>Policy No.</th>
                            <th>From</th>
                            <th>To</th>
                            <th>S.I.</th>
                            <th>Premium</th>
                            <th>Description</th>
                            <th></th>
                        </tr>
                    </tfoot>
                </table>

Collectives™ on Stack Overflow

Datatables: Using multiple datatables in the same page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related