Select2 slows down dramatically after about 500 items. So you definitely need to use a remote data source.
One issue I see with your commented out code is that you’ve specified both the data property and the query property (which, by the way, is deprecated; you should use the ajax property instead). You need to choose one or the other (in your case, ajax).
I would suggest that you first work out your Select2 code/logic in a stand-alone program (or JSBin, etc.). Get your AJAX query processing and pagination/infinite scrolling logic working the way you want. Then it should be relatively straightforward to integrate it into your DataTable.
Note that Select2 and DataTables are both very complex UI widgets that were not designed with each other in mind. Integrating them in anything more than a basic way is difficult (I speak from experience here). I recommend you take it one step at a time, starting with using a Select2 in a single column of the DataTable to filter the data by that column. Then add the next column, and so on.
You will probably want to use DataTables’ own AJAX capability to actually load data into the DataTable, and use the Select2’s to specify the filter criteria for subsequent data queries by the DataTable. You should be able to hook up the DataTable and your Select2’s to the same remote data source (although you’ll have to write your back end to handle the query formats from both types of widgets). Coordinating the filtering from the Select2s, plus column sorting (assuming you’re enabling that) and DataTables’ own “free text” search/filter capability (assuming you’re enabling that), will be very complex.
Good luck to you.
