Add ajax call to select2 PHP jquery

I am looking for someone familiar with select2.

https://select2.org/


I currently load a table with php and display the results, then I use a header with select2 to allow to be able to filter multiple columns on the table.

What I would like to do is use ajax to limit the results being loaded into select2 as the loading time of the page for large datasets of over 1500 items is extremely slow, going into over one minute loading time, without select2 the loading time is almost instant.

So I am looking for someone to impliment select2ajax so only a limited number of records for each row is loaded.


Is this someting you can achieve and how much would it cost to impliment on this page:

---------------------
This is the site I have the code on:

https://sandybeachit.co.uk/hosting/zalinker/2021.12.20-1/users.php


select2 ajax example and code:
https://www.nicesnippets.com/blog/jquery-select2-ajax-autocomplete-example-with-demo-in-php
https://select2.org/advanced/default-adapters/ajax
https://select2.org/data-sources/ajax
---------------------

In addition when I have this line of code:

scrollY: '50vh',

in this section of code:

var table = $('#dataTable').DataTable({
dom: 'Blfrtip',
lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
"pageLength": 50,
scrollY: '50vh',
scrollCollapse: true,
select: {
style: 'single'
},

I get the error shown in the screenshot highlighted in red, so when you slide the scrollbar right the headers do not move across, this needs to be fixed also so it moves.