CODEWITHSUNDEEP
jqueryhtmldatatables
V15HM4Y
V15HM4Y

Reputation: 1805

Datatables: Using multiple datatables in the same page

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

Upvotes: 0

Views: 1435

Answers (1)

MrMisery
MrMisery

Reputation: 416

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>

Upvotes: 1

Related Questions