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.
