Question

我有两个数据表，但现在首先显示第一个表，在它之后，它显示另一个dataTable。我需要彼此相邻。我试图改变这样的立场：div#example2_wrapper.dataTables_wrapper { margin-right: 10px; margin-top: 20px; }但它没有结果。我的代码是：

<html>
<head>
<link href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.js"></script>

<script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.js">
<script src="../../media/js/dataTables.editor.min.js"></script>

<script>
$(document).ready(function() {
    $('#example').dataTable( {
        "pagingType": "full_numbers",
         "bSort": false,
         "sDom": 'T<"clear">lfrtip',
       
          "tableTools": {
    "sSwfPath": "http://cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf",
    "aButtons": [
		"csv",
		
		{
		"sExtends": "pdf",
		"sButtonText": "Print PDF",
		"mColumns": "visible"
		},
		"xls"

		] 
	},
   "language": {
    "paginate": {
      "previous": "Предишна",
      "next": "Следваща",
      "last": "Последна",
      "first": "Първа"

    }
  }


    } );
} );
$(document).ready(function() {
    $('table.display').dataTable();
} );
</script>
<script>
$(document).ready(function() {
    
    $('#example tfoot th').each( function () {
        var title = $('#example thead th').eq( $(this).index() ).text();
        $(this).html( '<input type="text" placeholder="Търси '+title+'" />' );
    } );
 
    
    var table = $('#example').DataTable();
 
    table.columns().eq( 0 ).each( function ( colIdx ) {
        $( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
            table
                .column( colIdx )
                .search( this.value )
                .draw();
        } );
    } );
} );
</script>

</head>
<body>
<div class='col-md-6' >
<?php  
$teacher_id = $this->uri->segment(3);
$school_id = $this->uri->segment(4);
echo form_open('admin/edit_students/'.$teacher_id .'/' .$school_id);  ?>

<table id="example">
   <thead>
    <tr>
        <th>Ученик</th>    
        <th>Клас</th>
    </tr>
  </thead>  
  <thead class="filters"> 
    <tr>
      <td>Ученик</td>    
      <td>Клас</td>    
    </tr>
  </thead>  
  <tfoot>
        <tr>
          <th>Ученик</th>    
          <th>Клас</th>
        </tr>
  </tfoot> 
  <tbody>
<?php
foreach($select_teachers_students as $select) 
{
 
?>
  
    <tr>

    <td class='col-md-1'>
    <input type="checkbox" name="student[]"   value="<?php echo $select->user_id; ?>"  />
    <?php echo $select->username; ?>
</td><td class='col-md-1'>

     <?php echo $select->class;  
      echo $select->division; ?>
    </td>
    </tr>
      <?php
      }     
?>

</table>
<input type="submit" name="change" value="Промени ученици" class="btn btn-success" />
</form>


<table id="example2" class="display">
   <thead>
    <tr>
        <th>Ученик</th>    
        <th>Клас</th>
    </tr>
  </thead>  
  <thead class="filters"> 
    <tr>
      <td>Ученик</td>    
      <td>Клас</td>    
    </tr>
  </thead>  
  <tfoot>
        <tr>
          <th>Ученик</th>    
          <th>Клас</th>
        </tr>
  </tfoot> 
  <tbody>
<?php
//some data fot the second table
</tbody>
</table>
</div>

</body>
</html>

Answer 1

试试这个：

<div style="width: 100%;">

  <div style="width: 50%; float: left;">
  INSERT TABLE1 HERE
  </div>

  <div style="width: 50%; float: left;">
  INSERT TABLE2 HERE
  </div>

</div>

如何使2个DataTable在页面中彼此相邻显示

1 个答案: