我正在尝试数据表中的数据显示https://datatables.net/ https://datatables.net/
i can show data from MYSQL to Datatables,
but i want column in datatables show all
这个图片，你可以看到有1列，必须点击按钮加号，如果显示很多列。
我已经搜索，在数据表中启用滚动 Xhttps://datatables.net/examples/basic_init/scroll_x.html https://datatables.net/examples/basic_init/scroll_x.html
当我输入代码时 “scrollX”：在我的代码中为 true
并添加jqueryhttps://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js
像这样的结果，你可以看到我在底部的输入搜索已被禁用。我的模板数据表不起作用。我很困惑如何修复它:(
我想显示我的所有数据，使用滚动 x 和模板数据表，搜索底部，仍然有效。
在线演示测试：http://gajelos.tk/test/index.php http://gajelos.tk/test/index.php
这是我的代码
<HTML>
<HEAD>
<!-- JQUERY -->
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- BOOTSTRAP -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="assets/media/css/dataTables.bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/media/css/dataTables.responsive.css">
<script type="text/javascript" language="javascript" src="assets/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="assets/media/js/dataTables.responsive.js"></script>
<script type="text/javascript" language="javascript" src="assets/media/js/dataTables.bootstrap.js"></script>
<script type="text/javascript" language="javascript" src="assets/media/js/common.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js "></script>
</HEAD>
<BODY>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<button onClick="showModals()" class="btn btn-primary">Tambah Data</button>
<br>
<hr>
<br>
<table id="example" cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
<thead>
<tr>
<th>Action</th>
<th>SIM</th>
<th>Nama</th>
<th>Berlaku (SIM)</th>
<th>Jenis</th>
<th>Plat Nomor</th>
<th>Berlaku (Kendaraan)</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<th>Action</th>
<th>SIM</th>
<th>Nama</th>
<th>Berlaku (SIM)</th>
<th>Jenis</th>
<th>Plat Nomor</th>
<th>Berlaku (Kendaraan)</th>
</tfoot>
</table>
</div>
</div>
</div>
<script type="text/javascript" language="javascript" >
var dTable;
// #Example adalah id pada table
$(document).ready(function() {
dTable = $('#example').DataTable( {
"bProcessing": true,
"bServerSide": true,
"bJQueryUI": false,
"responsive": true,
"sAjaxSource": "serverSide.php", // Load Data
"scrollX": true,
"sServerMethod": "POST",
"columnDefs": [
{ "orderable": false, "targets": 0, "searchable": false },
{ "orderable": true, "targets": 1, "searchable": true },
{ "orderable": true, "targets": 2, "searchable": true },
{ "orderable": true, "targets": 3, "searchable": true },
{ "orderable": true, "targets": 4, "searchable": true },
{ "orderable": true, "targets": 5, "searchable": true },
{ "orderable": true, "targets": 6, "searchable": true }
]
} );
$('#example').removeClass( 'display' ).addClass('table table-striped table-bordered');
//$('#example tfoot tr th').each( function () {
var i = 0;
$('.table').find( 'tfoot tr th' ).each( function () {
//Agar kolom Action Tidak Ada Tombol Pencarian
if( $(this).text() != "Action" ){
var width = $(".sorting_1").width();
var title = $('.table thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" class="form-control" style="width:'+width+'" />' );
}
i++;
} );
// Untuk Pencarian, di kolom paling bawah
dTable.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
that
.search( this.value )
.draw();
} );
} );
} );
</script>
</BODY>
</HTML>
帮助我，谢谢
None