DataTables javascript could not be applied to repeating tables

StackOverflow https://stackoverflow.com/questions/21720015

سؤال

I have a table function (table_view.php)

<!DOCTYPE html>
<html>
    <head>
 <link rel="stylesheet" type="text/css" href="test_coding_rosa/table_design2.css">


    </head>

<body>


<?php
$row_id="";
if($_GET['page']==1 || isset($_GET['page'])==false){
    $row_id=1;
}elseif (isset($_GET['page']) && $_GET['page']>1) {
    $row_id=($_GET['page']-1)."1";
}

$doc = JFactory::getDocument();

$doc->addScript('http://code.jquery.com/jquery-1.11.0.min.js');
$doc->addScript('http://datatables.net/download/build/nightly/jquery.dataTables.js');

$doc->addScriptDeclaration('
    jQuery(document).ready( function () {
        jQuery("#main-table").DataTable();
    });
');


?>
<h1><?php echo $this->title ?></h1>

<table id="main-table" border="<?php echo $this->tableBorder ?>" class="display" <?php if(!empty($this->tableWidth)) echo 'width="'.$this->tableWidth.'"';?> >
<thead>
  <?php 
  if(!$this->hideHeaderTable)
  {

      if($_GET['t']!='maklumat_ringkas'){
      echo "<tr><th width='10px'>Bil</th>";
      }


      foreach($this->tableData[0] as $key=>$tableHeader)
      {
          ?>
        <th width="<?php echo $this->tableData[1][$key] ?>" scope="col"><?php echo $this->tableData[0][$key] ?></th>
        <?php
      }
      ?>
      </tr>
      </thead>
  <?php
  }


  $lenData = count($this->tableData);

  for ($j=3;$j < $lenData; ++$j)
  {
      ?>
      <tbody>
      <tr class="centertable" <?php if($j % 2==1) echo 'bgcolor="#EFF4FB"'?>><?php if($_GET['t']!='maklumat_ringkas'){echo "<td>".$row_id++."</td>";}?>
          <?php 
          foreach($this->tableData[0] as $key=>$tableHeader)
          {
              ?>
            <td width="<?php echo $this->tableData[1][$key] ?>" <?php echo $this->tableData[2][$key] ?>><?php echo stripslashes($this->tableData[$j][$key]) ?></td>
            <?php
          }
          ?>
      </tr>
      </tbody>
      <?php
  }

  ?>

</table>
</body>
</html>

This table_view.php is the default table for all data in the site. As you can see in the photo below, there are multiple tables being called from table_view.php.

The problem here is, I wanted to use DataTables.net to include the pagination of the tables. However, only the first table has been successfully implemented with DataTables.net plugin.

enter image description here

How can I implement it on all of the tables? Since all the tables are being called from the same function file (table_view.php), the table id is the same.

UPDATED declaration

$doc = JFactory::getDocument();

$doc->addScriptDeclaration(" 
    jQuery('[id='main-table']').each(function(i,e) {
    var id=jQuery(this).attr('id');
    jQuery(this).attr('id', id+'_'+i);
    jQuery(this).addClass('datatable-identifier');
}); ");

$doc->addScript('http://code.jquery.com/jquery-1.11.0.min.js');
$doc->addScript('http://datatables.net/download/build/nightly/jquery.dataTables.js');



$doc->addScriptDeclaration('
    jQuery(document).ready( function () {
    jQuery(".datatable-identifier").dataTable();
} );
هل كانت مفيدة؟

المحلول

Having multiple elements with the same id is a very bad habit :) You should really try to avoid it. Though HTML is forgiving, it results as you see in all kind of problems when trying to access elements in javascript.

If it is impossible to avoid, you could run the following function before calling dataTable() :

jQuery('[id="main-table"]').each(function(i,e) {
    var id=jQuery(this).attr('id');
    jQuery(this).attr('id', id+'_'+i);
    jQuery(this).addClass('datatable-identifier');
});

This will rename the table id's to main-table_1, main-table_2 and so on. The class datatable-identifier is just a dummy class used when initializing the dataTables, change your code to :

jQuery(document).ready( function () {
   jQuery(".datatable-identifier").dataTable();
});
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top