Question

如何增加id，以便在生成的所有表中都有数据表？我真的不了解如何循环datatables函数。它甚至可能吗？我不知道插件是如何工作的，因为我从未在循环中遇到过数据表

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
    <script src="http://localhost/IM_Project/facefiles/jquery-1.2.2.pack.js" type="text/javascript"></script>
    <link href="http://localhost/IM_Project/facefiles/facebox.css" media="screen" rel="stylesheet" type="text/css" />
    <script src="http://localhost/IM_Project/facefiles/facebox.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('a[rel*=facebox]').facebox()
        })
    </script>


    <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
   <script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css">
<br>
<br>
<br>
<br>

<div class="panel panel-default">
  <div class="panel-heading">
  <h1 class="panel-title"><center><span class="glyphicon glyphicon-list"></span>         Your Students</h1></center>
  </div>

<div style="padding-top:50px;" class="container" id="in-body">
      <div class="row">

        <div class="panel-body">


  <?php $example='0';
  foreach($instruct_course as $data1){
      if($data1->IdNum==$this->session->userdata('Idnum')&&$data1->flag=='1'){    $example++;?>       

          <div class="panel panel-info">
            <div class="panel-heading">
              <h3 class="panel-title"> <?php echo ($data1->course_id); ?> &nbsp;
    <?php  if ($data1->course_id!=NULL) {
          foreach($course as $data2){
      if ($data2->courseID==$data1->course_id&&$data2->flag=='1') {
            echo ($data2->CourseName);

            }      

              }
      } ?> </h3>
            </div>
            <div class="panel-body">
              <div class="row" style="padding: 0 20px 0 20px;">

                <table class="table table-hover" id='<?php   echo ($example);  ?>'>
                  <thead>
                    <tr>
                      <th style="width: 35%;">Username</th>
                      <th>Email</th>
                      <th>Family name</th>
                      <th>Details</th>

                    </tr>
                  </thead>
                  <tbody>
 <?php 
  foreach($user_course as $data3){
      if($data3->flag=='1'){
 foreach($user as $data4){            
 if ($data4->flag!='2'&&($data3->Email)==($data4->Email)&&($data1->course_id)==($data3->course_id)) {
                    ?>


                    <tr>
                      <td><?php  echo ($data4->username); ?></td>
                      <td><?php  echo ($data4->Email); ?></td>
                      <td><?php echo ($data4->Fname); ?></td>
                      <td><button type="button" class="btn btn-info btn-sm" data-backdrop="false" data-show="true" data-toggle="modal" data-target="#myModal">Demo Modal</button></td>
                    </tr>




                    <?php }
                  }
                }
                    }?>
                  </tbody>
                </table>



              <div class=" col-md-9 col-lg-9 "> 



                </div>
              </div>
            </div>

<script type="text/javascript">
$(document).ready(function() {
    $('# (echo ($example);)').DataTable();
} );

</script>

          </div>
<?php } 


}

?>




<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


        </div>
      </div>
    </div>
  </div>

Answer 1

您可以使用类，然后使用该类初始化DataTables。您已经分配了班级table：

<table class="table table-hover"></table>

因此，您的初始化将是：

$(document).ready(function() {
    $('.table').DataTable();
});

任何具有类table的表都将使用DataTables进行渲染。

数据表增量

1 个答案: