Answers

• colin Posts: 15,240Questions: 1Answers: 2,599

  November 2019

  Hi @heath22 ,

  There's no reason why it shouldn't work - it's just a select2 control within the table's element. You would need to ensure the select2 component is configured correctly for the pagination, but that's outside the scope of this forum. That would be something for StackOverflow or the select2 forum.

  Cheers,

  Colin
• heath22 Posts: 17Questions: 5Answers: 0

  November 2019 edited November 2019

  Colin, I crawled the entire web today and couldn't find a working solution.

  The closest discussion was here but it looks like it's all deprecated since select2 < v4.
• kthorngren Posts: 21,337Questions: 26Answers: 4,954

  November 2019

  As Colin mentioned the type of input you use to obtain the search term is not known or controlled by Datatables. Didn't read through the SO thread you linked but not sure the pagination feature is deprecated as it is documented here:
  https://select2.org/data-sources/ajax#pagination

  It seems the example you linked to might work but there are a couple issues I see with your text case. First you are still populating the select with this:

                  column.data().unique().sort().each( function ( d, j ) {
                      select.append( '<option value="'+d+'">'+d+'</option>' );
                  } );
  

  You will want to remove this code.

  Next is it looks like the example is using the data option for the select list but you don't have that. You will probably need to do something similar to the mockData() function and build an array of data as documented here:
  https://select2.org/data-sources/arrays

  The code I suggested you remove you will want to use to create the data array for the data option.

  It looks like q.callback will return a new slice of the data array as needed.

  Hope this gets you started.

  Kevin
• kthorngren Posts: 21,337Questions: 26Answers: 4,954

  November 2019 Answer ✓

  Found this to be an interesting question and had time to work on it. Here is the working example:
  http://live.datatables.net/cefepexe/1/edit

  Kevin
• colin Posts: 15,240Questions: 1Answers: 2,599

  November 2019

  Very nice, Kevin!
• heath22 Posts: 17Questions: 5Answers: 0

  November 2019

  Wow. Guys, I'm absolutely amazed by your support.
  Kevin, Thank you.
  I donated to the site for both of your support.

  Just an FYI, it looks like there is a bug with the DataTables jquery UI and select2.
  The select2 doesn't take the proper title/placeholder name.
  Here's a fork of your answer with jquery UI:
  http://live.datatables.net/fiqonohe/1/edit

  I'll try to find a solution.
• colin Posts: 15,240Questions: 1Answers: 2,599

  November 2019 Answer ✓

  Hi @heath22 ,

  Thank you, we appreciate it. Your fiddle just needed a tweak to get the correct placeholder - it needed some extraction: http://live.datatables.net/riviciba/1/edit

  Cheers,

  Colin
• heath22 Posts: 17Questions: 5Answers: 0

  November 2019 edited November 2019

  Thanks Colin. That was my bad.

  Last thing, I'm noticing that the search in the select2 is broken.
  For example type: Jenna

  I believe I need to map the entire column values in the search when typing not just the ones currently loaded as explained here:
  http://stackoverflow.com/a/33174942/152640

  Trying to work on this now.
• kthorngren Posts: 21,337Questions: 26Answers: 4,954

  November 2019 Answer ✓

  When typing in the name the console is showing this error:
  runner:64 Uncaught ReferenceError: _ is not defined

  The example code has this comment: HEADS UP; for the _.filter function i use underscore (actually lo-dash) here and is using lodash.js. I copied the ldash.js include from the example and it seems to work:
  http://live.datatables.net/cifoqoka/1/edit

  Kevin
• sanjaysingh Posts: 3Questions: 1Answers: 0

  November 2020

  I find this select2 example - https://bbbootstrap.com/snippets/select2-option-cdn-31353331