数据表:在同一页面中使用多个数据表

时间:2017-05-06 11:28:21

标签: jquery html5 datatables

我正在开发一个项目,需要在同一页面上有多个数据表。正如网站上提到的,我尝试了两种使用以下提到的代码的方法:

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

这会在第一个表上显示数据表,但在第二个表上不显示。正如他们在网站上所说的那样以及在StackOverflow上回答的一些问题,无论我们使用多少个表,第一个问题都应该有效。

HTML代码如下所述:

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

所有积极的建议表示赞赏。

提前谢谢你......

1 个答案:

答案 0 :(得分:1)

您所要做的就是在HTML代码的表格之后添加您的javascript代码,例如:在主体的末尾添加JS代码,无论你有多少个表,只要它们具有唯一的ID就没有问题(要在表上执行操作,你可以将DataTable定义为
{{1}此外,您还可以将表格的HTML代码编辑为以下内容:

var exampleTable = $('#tableId').DataTable();