Select2 with Pagination to improve loading time

Select2 with Pagination to improve loading time

heath22heath22 Posts: 17Questions: 5Answers: 0
edited November 2019 in Free community support

I'm using select2 for around 15 columns on 3k rows.
It takes around 22 seconds to load the table versus 7 seconds without select2.

I'm trying to implement pagination as shown in this example:
http://embed.plnkr.co/db8SXs/preview

but I'm failing so far.
Does DataTables support select2 pagination?

Here's a case example with the pagination attempt commented out:
http://live.datatables.net/jesehuga/1/edit

Thank you

This question has accepted answers - jump to:

Answers

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    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

  • heath22heath22 Posts: 17Questions: 5Answers: 0
    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.

  • kthorngrenkthorngren Posts: 20,147Questions: 26Answers: 4,736

    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

  • kthorngrenkthorngren Posts: 20,147Questions: 26Answers: 4,736
    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

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    Very nice, Kevin!

  • heath22heath22 Posts: 17Questions: 5Answers: 0

    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.

  • colincolin Posts: 15,118Questions: 1Answers: 2,583
    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

  • heath22heath22 Posts: 17Questions: 5Answers: 0
    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.

  • kthorngrenkthorngren Posts: 20,147Questions: 26Answers: 4,736
    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

  • sanjaysinghsanjaysingh Posts: 3Questions: 1Answers: 0
This discussion has been closed.