如何使2个数据表在页面中彼此相邻显示 [英] How to make 2 DataTables to show next to each other in a page
本文介绍了如何使2个数据表在页面中彼此相邻显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有两个Datatables，但现在首先显示第一个表，之后显示第一个数据表。我需要彼此靠近。我试图像这样更改位置： div＃example2_wrapper.dataTables_wrapper {，但没有结果。
margin-right：10px;
margin-top：20px;
}
我的代码是：
I have two Datatables, but now first, it is shown the first table, down after it, it is shown another dataTable. I need to be next to each other. I tried to change position like that: div#example2_wrapper.dataTables_wrapper {
margin-right: 10px;
margin-top: 20px;
} but it doesn't have result.
My code is:
<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>
推荐答案
尝试一下：
<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个数据表在页面中彼此相邻显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
