How do I sort(default sort), show 50 entries and filter each column datatable?

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>

These 2 separate blocks work well individually if the other is commented out, but I don't know how I can combine them to be one block so I can achieve default sorting and drop-down filters.

The aim is to have drop-down filters on columns [0,1,2,3], default sorting and have defaults number of rows shown = 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>

Thanks in advance for your help.

Answer 1

Your "two blocks" are two initializations of a DataTables object made from the same table, which is why they don't work together. The good news is that you can just combine the two into a single block and they should work together, since none of the options you're using conflict with each other (as far as I can tell). It should look like this:

<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>

You'll note that all I did was put the options selected in the second block into the first block and add the pageLength option to start the number of rows at 50. You can optionally surround the names of the options with "" if you want, but it's unneccessary, just a preference thing (eg "order" vs order ).

You should only ever have one DataTables initialization .DataTable() call in your code per page.