Gentellela template - Multiple datatables in one page - php

Question

I am using gentellela template which is having a data table id to datatable.
Now im doing modal popup of table and include it into one page which is having a button to call all those modals.
My problem is when 2 modals have table id to datatable. the other datatable seems broken. All i want is to have those datatable working properly.
this is my first modal.
<div class="modal fade" id="USERSVIEW" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" >
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>View Users</h2>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
<div class="clearfix"></div>
</div>
<div class="x_content">
<table id="datatable" class="table table-striped table-bordered dt-responsive nowrap dataTable" cellspacing="0" width="100%">
<thead>
<tr>
<th style="text-align: center;"> Branch Code </th>
<th style="text-align: center;"> Branch Name </th>
<th style="text-align: center;"> Branch Address </th>
<th style="text-align: center;"> Branch Admin Name </th>
<th style="text-align: center;"> Status </th>
</tr>
</thead>
<tbody>
<?php include 'includes/dashboarduserfetch.php';?>
</tbody>
</table>
<div class="ln_solid"></div>
<button class="btn btn-danger" class="close" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And this is my second modal.
<div class="modal fade" id="TASKSVIEW" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" >
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>View Tasks</h2>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
<div class="clearfix"></div>
</div>
<div class="x_content">
<table id="datatable" class="table table-striped table-bordered dt-responsive nowrap dataTable" cellspacing="0" width="100%">
<thead>
<tr>
<th style="text-align: center;"> Branch Code </th>
<th style="text-align: center;"> Task Code </th>
<th style="text-align: center;"> Task Name </th>
<th style="text-align: center;"> Task Description </th>
<th style="text-align: center;"> Expiry Date </th>
<th style="text-align: center;"> Status </th>
</tr>
</thead>
<tbody>
<?php include 'includes/dashboardtaskfetch.php';?>
</tbody>
</table>
<div class="ln_solid"></div>
<button class="btn btn-danger" class="close" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
i want to call the same modal in other page which is having these buttons to call modal.
<button class="btn btn-primary" data-toggle="modal" data-target="#USERSVIEW" style="width:90%; margin-left:5%; margin-top:-3%;">View Users Created</button>
<button class="btn btn-primary" data-toggle="modal" data-target="#TASKSVIEW" style="width:90%; margin-left:5%; margin-top:-3%;">View Tasks Created</button>

Answer 1

Id attribute should be unique for each element so just change the id to datatable1 and datatable2
1st : For table 1 id should be datatable1 .
Html :
<table id="datatable1" class="table table-striped table-bordered dt-responsive nowrap dataTable" cellspacing="0" width="100%">
Script:
$('#datatable1').dataTable({ .... });
2nd : For table 2 id should be datatable2 .
Html :
<table id="datatable2" class="table table-striped table-bordered dt-responsive nowrap dataTable" cellspacing="0" width="100%">
Script:
$('#datatable2').dataTable({ .... });

Answer 2

The id attribute should be unique in your example will match the first id in the page
Use class if all table has the same dataTable options
Change the id="datatable" to class="datatable" or add datatable to class attribute
And call
$('.datatable').dataTable();
If you have different options change for each table just change id for each. id="datatable1" , id="datatable1"
And call like
$('#datatable1').dataTable({});
$('#datatable2').dataTable({});