javascript - Is it possible to overwrite all error messages in DataTables with a custom one? - Stack Overflow

admin管理员组

文章数量:1125034

I am using DataTables in my project, and I want to override all default feedback messages, such as those shown when no records are found or while loading data, with a single custom message (e.g., "An error occurred, please try again.").

I understand that options like language allow me to override specific messages such as zeroRecords, infoEmpty, or loadingRecords. However, I would like to avoid manually configuring each individual message. Is there a way to universally apply a single custom message across all these scenarios, without having to define them one by one?

    $(document).ready(function() {
        let table = new DataTable('#orders-table', {
            dom: 'rtp',
            paging: true,
            searching: true,
            ordering: true,
            pageLength: 10,
            processing: true,
            serverSide: true,
            autoWidth: false,
            scrollX: false,
            scrollCollapse: true,
            order: [[0, 'desc']],
            ajax: {
                url: "{{ $url }}",
                data: function(d) {
                    d.van = $('#van').val();
                    d.tot = $('#tot').val();
                    d.resellerKlant = $('#resellerKlant').val();
                    d.cursus = $('#cursus').val();
                    @if(auth()->user()->isBeheerder())
                        d.reseller = $('#reseller').val();
                    @endif
                },

            },
            columns: [
                {
                    data: 'id',
                    title: 'Ordernummer',
                    render: function(data, type, row) {
                        var formattedNumber = data.toString();
                        if (formattedNumber.length < 6) {
                            formattedNumber = ('000000' + formattedNumber).slice(-6);
                        }
                        return '#' + formattedNumber;
                    }
                },
                    @if(auth()->user()->isBeheerder())
                {
                    data: 'reseller_naam',
                    title: 'Reseller',
                },
                    @endif
                {
                    // data: 'cursus_naam',
                    title: 'Cursussoort',
                    render: function(data, type, row) {
                        return data;
                    }
                },
                {
                    data: 'cursist',
                    title: 'Cursist',
                    render: DataTable.render.text(),
                    width: '250px'
                },
                {
                    data: 'resellerklant',
                    title: 'Organisatie',
                    render: DataTable.render.text()
                },
                {
                    data: 'created_at',
                    title: 'Aanschaf',
                    render: function(data) {
                        return new Date(data).toLocaleDateString();
                    }
                },
                {
                    data: 'created_at',
                    title: 'Geldig tot',
                    render: function(data) {
                        let date = new Date(data);
                        date.setFullYear(date.getFullYear() + 1);
                        return date.toLocaleDateString();
                    }
                },
                {
                    data: 'prijs',
                    title: 'Inkoopprijs',
                    render: function(data, type, row) {
                        return new Intl.NumberFormat('nl-NL', { style: 'currency',          currency: 'EUR' }).format(data);
                    }
                },
            ],
            language: {
                search: "",
                "zeroRecords": "Geen orders gevonden",
                "infoEmpty": "Geen orders gevonden",
                "emptyTable": "Geen orders gevonden"
            }
        });

        $('#zoekenNaarCursisten').on('input', function() {
            var value = $(this).val();
            table.search(value).draw();
        });
        $('#van, #tot, #resellerKlant, #cursus').on('change', function() {
            table.ajax.reload();
        });

        @if(auth()->user()->isBeheerder())
        $('#reseller').on('change', function() {
            table.ajax.reload();
        });
        @endif

        new TomSelect("#resellerKlant", {
            plugins: ['remove_button'],
            create: false,
            sortField: {
                field: "text",
                direction: "asc"
            },
            render: {
                no_results: function(data, escape) {
                    return '<div class="no-results">Geen resultaat voor "' + escape(data.input) + '"</div>';
                }
            }
        });

        @if(auth()->user()->isBeheerder())
        new TomSelect("#reseller", {
            plugins: ['remove_button'],
            create: false,
            sortField: {
                field: "text",
                direction: "asc"
            },
            render: {
                no_results: function(data, escape) {
                    return '<div class="no-results">Geen resultaat voor "' + escape(data.input) + '"</div>';
                }
            }
        });

        $.ajax({
            url: "{{ $url }}",
            method: 'GET',
            data: { action: 'get_cursussen' },
            success: function(response) {
                if(response.cursussen) {
                    var cursusSelect = $('#cursus');
                    cursusSelect.find('option:not(:first)').remove();
                    $.each(response.cursussen, function(index, cursus) {
                        cursusSelect.append(
                            $('<option></option>').val(cursus.id).text(cursus.text)
                        );
                    });
                    new TomSelect("#cursus", {
                        plugins: ['remove_button'],
                        create: false,
                        sortField: {
                            field: "text",
                            direction: "asc"
                        },
                        render: {
                            no_results: function(data, escape) {
                                return '<div class="no-results">Geen resultaat voor "' + escape(data.input) + '"</div>';
                            }
                        }
                    });
                }
            },
            error: function(xhr, status, error) {
                console.error('Error fetching cursussoort:', error);
            }
        });
        @else
        var cursussen = @json($cursussen);
        var cursusSelect = $('#cursus');
        $.each(cursussen, function(index, cursus) {
            cursusSelect.append(
                $('<option></option>').val(cursus.id).text(cursus.naam)
            );
            if(cursus.heeft_herhalingstraining){
                cursusSelect.append(
                    $('<option></option>').val('h_' + cursus.id).text(cursus.naam_herhaling)
                );
            }
        });
        new TomSelect("#cursus", {
            plugins: ['remove_button'],
            create: false,
            sortField: {
                field: "text",
                direction: "asc"
            },
            render: {
                no_results: function(data, escape) {
                    return '<div class="no-results">Geen resultaat voor "' + escape(data.input) + '"</div>';
                }
            }
        });
        @endif
    });
</script>

@endsection

I hoped that this single configuration would apply the message universally across all error cases.

本文标签： javascriptIs it possible to overwrite all error messages in DataTables with a custom oneStack Overflow