如何排序（默認排序），顯示50個條目並過濾每個列數據表？

Question

<script>
$(document).ready(function() {
    $('#sortable').DataTable( {
        initComplete: function () {
            this.api().columns([0,1,2,3]).every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
               // var select = $('<select><option value="">' + $(this.header()).html() + '</option></select>')
                    .appendTo( $(column.header()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
                column.data().unique().sort().each( function ( d, j ) {

                    //select.append( '<option value="'+d+'">'+d+'</option>' )
                      select.append( '<option>'+d+'</option>' )
                } );
            } );
        }
    } );
} );



$(document).ready(function() {
    $('#sortable').DataTable({
        "order": [[1, "asc"],[0, "asc"]],
        "columns": [
                null,
                null,
                null,
                {"orderable": false},
                {"orderable": false},
                {"orderable": false},
                ],
                "searching": true,
                "paging":   false,
                "ordering": true,
                "info":     false
        });
} );
</script>

如果注釋了另一個，則這2個單獨的塊可以很好地單獨工作，但是我不知道如何將它們組合為一個塊，因此可以實現默認的排序和下拉過濾器。

目的是在列[0,1,2,3]上設置下拉過濾器，進行默認排序，並顯示默認行數= 50。

//like so: 
<script>
$(document).ready(function() {
    $('#sortable').DataTable( {
sort by default;
set default rows shown to 50;
put filter on first 4 colmuns;
    })
})
</script>

在此先感謝您的幫助。

Answer 1

您的“兩個塊”是從同一張表進行的DataTables對象的兩次初始化，這就是為什么它們不能一起使用的原因。 好消息是，您可以將兩者合並為一個模塊，並且它們應該一起工作，因為您使用的所有選項都不會相互沖突（據我所知）。 它看起來應該像這樣：

<script>
$(document).ready(function() {
    $('#sortable').DataTable( {
        pageLength: 50, //This is the option which will give you 50 rows by default
        order: [[1, "asc"],[0, "asc"]],
        columns: [
                null,
                null,
                null,
                {"orderable": false},
                {"orderable": false},
                {"orderable": false},
                ],
        searching: true,
        paging:   false,
        ordering: true,
        info:     false,
        initComplete: function () {
            this.api().columns([0,1,2,3]).every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
               // var select = $('<select><option value="">' + $(this.header()).html() + '</option></select>')
                    .appendTo( $(column.header()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
                column.data().unique().sort().each( function ( d, j ) {

                    //select.append( '<option value="'+d+'">'+d+'</option>' )
                      select.append( '<option>'+d+'</option>' )
                } );
            } );
        }
    } );
} );
</script>

您會注意到，我所做的只是將第二個塊中選擇的選項放到第一個塊中，並添加pageLength選項以使行數從50開始。如果需要，您可以選擇在選項名稱前加上"" ，但這不是必需的，而只是一個偏好（例如"order" vs order ）。

每頁代碼中只能有一個DataTables初始化.DataTable()調用。