Question

我尝试在数据表中显示数据 https://datatables.net/

我可以显示从MYSQL到Datatables的数据，但我希望数据表中的列显示全部

此图片，您可以看到有1列，必须单击按钮加，如果显示多列。

我已经搜索过，在数据表中启用滚动X. https://datatables.net/examples/basic_init/scroll_x.html

当我把代码＆＃34; scrollX＆＃34;：在我的代码中为true

并添加jquery https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js

这样的结果，您可以看到我在底部的输入搜索已被禁用。和我的模板数据表不起作用。我很困惑解决它:(

我想显示我的所有数据，使用scroll-x和模板数据表，搜索底部，仍然有用。

在线演示测试：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>

帮帮我，谢谢

在DataTables

0 个答案: