scrollX removes second (cloned) header

scrollX removes second (cloned) header

josibujosibu Posts: 6Questions: 2Answers: 0

Hello

I've a datatable with a bunch of columns. I added search option for each column right below the header inside the <thead>:

$('#CellPhonesTable thead tr').clone().appendTo('#CellPhonesTable thead');

        $('#CellPhonesTable thead tr:eq(1) th:lt(16)').each(function (i) {
            $(this).removeClass("sorting sorting_desc");
            if (selectColumns.includes(i)) {
                $(this).html('<select style="width:100%" class="form-control"><option value=""></option></select><br />');
                $('select', this).on('change', function () {
                    if (table.column(i).search() !== this.value) {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
                        table
                            .column(i)
                            .search(val ? '^' + val + '$' : '', true, false)
                            .draw();
                    }
                });
            } else {
                $(this).html('<input type="text" class="form-control form-control-sm" style="width:100%"/>');

                $('input', this).on('keyup change', function () {
                    if (table.column(i).search() !== this.value) {
                        table
                            .column(i)
                            .search(this.value)
                            .draw();
                    }
                });
            }
        });

When the page loads, the header gets cloned and the inputs are there but just when the loading is complete, the whole second header line gets removed.
This is as long as I use scrollX - as soon as I remove the scrolX everything is find.

Can someone please explain why this behaves that way and whether there is a workaround for this?

Thanks

This question has an accepted answers - jump to answer

Answers

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

    Hi @josibu ,

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • josibujosibu Posts: 6Questions: 2Answers: 0

    Hi
    See if this makes it clearer for you to understand.
    As mentioned above, if I remove the line scrollX : true then the second header is not wiped away.

    Thanks

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

    That fiddle doesn't run for me, it's giving console errors - it looks like you haven't included the libraries. Please can you update it so that it reproduces the issue.

  • josibujosibu Posts: 6Questions: 2Answers: 0

    I've now updated it a little bit but I don't know how to provide data through ajax from there but IMO anyone who would want to try to understand will understand it from there on.

    Hoping for help now at least.

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736
    edited November 2019 Answer ✓

    The purpose of a test case is to replicate the issue. If it doesn't then the people trying to help need to spend time debugging your test case. With the number of posts on this forum doing this becomes difficult and time consuming. However we are willing to help get it running like providing alternatives to using ajax data.

    Your example looks the same whether scrollX is enabled or not. This is due to not having a all the CSS files needed. Also you can use data to add simulated data to the test case, eliminating the need for ajax data. I updated your test case with these and now the problem can be seen.
    https://jsfiddle.net/tuhsw437/

    This thread discusses a similar problem. Look for the word "strange" in the thread and start from there to understand the problem. Specifically you will want to look at this example:
    http://live.datatables.net/buziligu/1/edit

    It is for select inputs but the same issue applies for text inputs.

    HTH,
    Kevin

  • josibujosibu Posts: 6Questions: 2Answers: 0

    Hi

    Thanks, this helped me!

This discussion has been closed.