Question

我有一个表函数（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>

此table_view.php是站点中所有数据的默认表。正如您在下面的照片中所看到的，从table_view.php中调用了多个表。

这里的问题是，我想使用DataTables.net来包含表格的分页。但是，只有第一个表已成功使用DataTables.net插件实现。

enter image description here

如何在所有表格上实现它？由于所有表都是从同一个函数文件（table_view.php）调用的，因此表id是相同的。

更新声明

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

Answer 1

拥有相同id的多个元素是一个非常糟糕的习惯:)你应该尽量避免它。虽然HTML是宽容的，但是当您尝试访问javascript中的元素时会看到所有类型的问题。

如果无法避免，可以在调用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');
});

这会将表格ID重命名为main-table_1，main-table_2，依此类推。类datatable-identifier只是初始化dataTable时使用的虚拟类，将代码更改为：

jQuery(document).ready( function () {
   jQuery(".datatable-identifier").dataTable();
});

DataTables javascript无法应用于重复表

1 个答案: