DataTable not inheriting defaults

SmithfieldBuilding

As far as I can tell my table, #tableAllBrowseProperties, is not inheriting any defaults I've set in $.fn.dataTable.defaults

Snippets:

$.extend($.fn.dataTable.defaults, {
                dom: '<"datatable-scroll"t><"datatable-footer"ip>',
                language: {
                    paginate: {
                        'first': 'First',
                        'last': 'Last',
                        'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;',
                        'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;',
                        'pagination': false,
                        'info': false,
                        'searching': false,
                        "lengthChange": false,
                        "columnDefs": [{
                            "targets": ["js-column-reports", "js-column-trade", "js-column-location"],
                            "searchable": false,
                            "orderable": false,
                }],
                        "pageLength": 5
                    }
                },
                //responsive: true


            });

(Some options here aren't relevant to this particular table)

var x = $('#tableAllBrowseProperties').DataTable({
                    colReorder: true,
                    dom: 'Bfrtip',
                    buttons: {
                        buttons: [
                            {
                                extend: 'colvisGroup',
                                text: 'Show my investments',
                                show: [9, 10, 11, 12, 13]
            },
                            {
                                extend: 'colvisGroup',
                                text: 'Hide my investments',
                                hide: [9, 10, 11, 12, 13]
            }
            ],
                        dom: {
                            button: {
                                tag: "button",
                                className: "btn bg-slate bg-slate mr-2"
                            },
                            buttonLiner: {
                                tag: null
                            }
                        }
                    },
                "searching": false
            });

                x.columns([9, 10, 11, 12, 13]).visible(false); x.on('column-visibility.dt', function (e) {
                    x.columns.adjust().draw();
                });

Link to page:

https://webdev.brandnetics.co.uk/cm/assetzexchange/Bootstrap%204/Template/layout_4/LTR/default/full/browse-properties-v2.html

Any help appreciated.

kthorngren

Looks like you have all the options under language.paginate. Some fo the options need to be moved outside of language.paginate, like '-option columnDefs,-option searching`, etc. More like this:

                language: {
                    paginate: {
                        'first': 'First',
                        'last': 'Last',
                        'next': $('html').attr('dir') == 'rtl' ? '←' : '→',
                        'previous': $('html').attr('dir') == 'rtl' ? '→' : '←',
                    },
                },
                'pagination': false,
                'info': false,
                'searching': false,
                "lengthChange": false,
                "columnDefs": [{
                        "targets": ["js-column-reports", "js-column-trade", "js-column-location"],
                        "searchable": false,
                        "orderable": false,
                }],
                "pageLength": 5

                //responsive: true
             });

I don't believe there is a pagination option. I think you are looking for paging. But using that option will remove the paging buttons defined in language.paginate.

Kevin

SmithfieldBuilding

Thanks Kevin, that worked.

I think I copied the defaults from the template I'm adapting and so wouldn't have spotted my error without your help.