JSFiddle - React, Tailwind, and code Playground

by Mike D

HTML

<div id="tableSpace_length">
<label>Show 
<select name="tableSpace_length" aria-controls="tableSpace" class="">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
entries</label>
</div>

JavaScript

//Useful for making datatables lengthMenu more accessible / WCAG compliant
//HTML is typical of what datatables renders, which reads badly

//take the select element and place it after the label element
$('#tableSpace_length').find('select').each(function () {
  $(this).parent().after(this);
  $(this).attr('id', 'datatable_lengthSelect');
});

//change the HTML of the label to be more compliant
$('#tableSpace_length').children('label').html("Select number of records per page: ")
$('#tableSpace_length').children('label').attr('for','datatable_lengthSelect')