Select2 wih Pagination and DataTables local data array


#1

I’m using DataTables to display around 4k rows with 15 columns. I’m using Select2 to filter/search through the data.

The issue is that Select2 takes more than 15 seconds to load the DataTable.

I’m trying to implement pagination/infinite scroll for the select2 fields but so far I’m failing.

I’m following this example here: http://embed.plnkr.co/db8SXs/preview

I suspect the issue is that I’m not passing the data correctly to the “query” for pagination but I don’t see any examples with DataTables so here’s my attempt: (I commented out the portion I believe is the issue)


#2

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.