Colvis button with server side processing

Colvis button with server side processing

nik2296nik2296 Posts: 5Questions: 1Answers: 0

Hello,

I have used Colvis button to implement dynamic column hiding, and I'm using server side processing with search on each column.

Suppose I have 2 columns, Name and Surname. When not using colvis, the column search array sent to the backend is of size 2, with search value for Name occupying index 0, and search value for Surname occupying index 1.

But with Colvis enabled, if I hide the column Name, the column search array sent to the backend is still of size 2, but with Surname occupying index 0 now, and I have no way of knowing at the back end that index 0 now corresponds to column Surname, not Name.

Is there an option in Colvis to make this right? Basically, I want column search values array to retain search values in proper indices even when columns are hidden dynamically using Colvis.

I am not able to provide code because I'm working with sensitive code, and it would take a lot of time to recreate a sample of this. Any help is appreciated.

This question has an accepted answers - jump to answer

Answers

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

    Hi @nik2296,

    The indexes don't change when a column is hidden. You can verify that with this example here. Look at what's being sent to the server script on the Network tab.

    If that doesn't help, can you modify that example to demonstrate the problem, please.

    Cheers,

    Colin

  • nik2296nik2296 Posts: 5Questions: 1Answers: 0

    Hi @colin,

    I have modified the example and here is the link- http://live.datatables.net/jabedeti/3/edit. I have added column searches and disabled global search.

    If you examine the XHR requests fired when you input a value into LastName field, you will see that the search term is included in the variable columns[1][search][value]. But when FirstName is hidden, the same value is sent as columns[0][search][value], but there are still total 6 columns in the object sent, as there should be. This undesirable shifting of column search value terms when using Colvis is what I was talking about.

  • nik2296nik2296 Posts: 5Questions: 1Answers: 0

    Hi again @colin,

    I think I have figured out why the problem is being caused. This line - $(this).parent().index() - calculates index relative to current DOM, so when FirstName is removed, LastName has an index of 0 in the current DOM (and this statement has no way of knowing that the index should actually be 1) and that's why there is a mismatch between search terms array sent in Ajax request.

    Now, is there a way to get the original index of a column even when some columns are hidden using Colvis?

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    Hi @nik2296 ,

    The magic there is to add :visible to the index, see your updated example here.

    Cheers,

    Colin

  • nik2296nik2296 Posts: 5Questions: 1Answers: 0

    Thanks @colin! That works perfectly. Just to confirm, adding :visible makes DataTables use the original index of the column even if any columns before/after that particular column are hidden, correct? And does DataTables manage all this automatically or do I need to put in any custom cases for some situations?

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

    Hi @nik2296 ,

    See this page here - a long explanation there :)

    Cheers,

    Colin

  • nik2296nik2296 Posts: 5Questions: 1Answers: 0

    Hi @colin,

    Thank you, that helps. I have another problem, and I was hoping you could help since you are already familiar with the situation. Here is an updated example in which I have added a 'Clear all filters' button. This clears all input filters and re-sources ajax data, redrawing table from scratch.

    If I do the following:-

    1. Input a filter, suppose 'zor' in FirstName field.
    2. The table gets filtered.
    3. Hide the FirstName field.
    4. Table still remains filtered.
    5. Click 'Clear all filters'.
    6. Filters are cleared, and all the data is shown.
    7. Show the column FirstName.
    8. The filter string 'zor' is still present in the input field.

    The 8th step is what I have problem with. Maybe colvis is removing the column from the DOM tree altogether and not just setting 'display:none'. How can I make sure that input search string values for all columns (even the hidden ones, and even if they are not just a simple input, but select elements)?

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

    Hi @nik2296 ,

    Maybe colvis is removing the column from the DOM tree altogether and not just setting 'display:none'.

    Yep, that's exactly it. If you access the header through the API, you can manipulate it whether it's visible or not. See update example here.

    Cheers,

    Colin

This discussion has been closed.