Merging of two snippes works only without language option?!

MyNickname

hi everyone

merging two snippets works only without language option - why?

two code snippets.

first:

<script type="text/javascript" class="init">
$(document).ready(function() {
    $('#datatable').DataTable( {
        "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
    "pagingType": "full_numbers",
    "scrollX": true,
        "pageLength": 50,
        "language": {
            "url": "assets/hp/datatables/i18n/English.json"
        }
    } );
} );
</script>

second:

<script type="text/javascript" class="init">
$(document).ready(function() {
    $('#datatable').DataTable( {
        
        initComplete: function () {

            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).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>' )
                } );
            } );
        }
    } );
} );
</script>

both works fine, if used separately

but how can i "merge" them into one?

First try without language works:

<script type="text/javascript" class="init">
$(document).ready(function() {
    $('#datatable').DataTable( {
    "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
        "pagingType": "full_numbers",
        "scrollX": true,
    "pageLength": 50,

        initComplete: function () {

            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).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>' )
                } );
            } );
        }
    } );
} );
</script>

Second try with language does not work:

<script type="text/javascript" class="init">
$(document).ready(function() {
    $('#datatable').DataTable( {
    "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
        "pagingType": "full_numbers",
        "scrollX": true,
    "pageLength": 50,
    "language": {
        "url": "assets/hp/datatables/i18n/English.json"
    }

        initComplete: function () {

            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).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>' )
                } );
            } );
        }
    } );
} );
</script>

what do I wrong?

tnx for your help

MyNickname

it seems that i have to do a comma after "}":

        "url": "assets/hp/datatables/i18n/English.json"
    },

lucky guess - but why?

MyNickname

PS: really really create interaction control!

allan

it seems that i have to do a comma after "}" [...]

Correct. Because if you don't it isn't valid Javascript! Have a look in your browser's console and you should see it throwing a parsing error at that point.

See also this part of the manual.

Allan

MyNickname

yes i slept over and now i understand :-D tnx