How can I use a select2 selectbox with dataTables?

  1. You are using a CSS 3.2 version along with a 4.0.3 version of the libray! Since version 4 is a complete rewrite any UI will fail. Find matching versions here.

  2. You need to instantiate select2 after dataTables is initialised. You can do that in the drawCallback callback.

  3. Do not use id's to reference the select2's. I guess you will have a lot of select2's on multiple pages, so give them a dummy class like dt-select2 so you can initialise all visible select2's in one call. But by all mean preserve the id's for reference in event handlers.

Example :

$('#example').DataTable({
  ...
  drawCallback: function() {
     $('.dt-select2').select2();
  }
})  

demo -> http://jsfiddle.net/u91javfy/