Gentellela template - Multiple datatables in one page

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

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({});

Answer 2

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({ .... });