Filtering from header dropdown menu (with GET parameter)

ProjectEphra

Hello again everyone.

I have a little problem with a piece of code. After having essentially declared my latest project as finished I started working on something different. After a month, my supervisor wanted to take my project out of the sandbox into "production". Then she notified me that the dropdown filter menu isn't working. It shows "no entries" when a filter is selected.

I had borrowed the code for the dropdown menu from somewhere on this forum and modified it slightly for my needs. After that I added the ability to preselect an entry from the dropdown menu if a GET paramter is passed. (I was supposed to create another website that links to the one in question with a GET paramter, according to which the table must be filtered. And it has to be a selection from the dropdown menu due to the nature of the data. Otherwise I would have just put the GET parameter in the search field)

This is the code in question:

$(document).ready(function () {
    var currentURL = window.location.href;
    var servername = null;
    if (currentURL.includes("?")) {
        servername = currentURL.split("?")[1].split("=")[1];
    }
    $("#table").DataTable({
        initComplete: function () {
            this.api()
                .columns([0, 1])
                .every(function () {
                    var column = this;
                    var select = null;
                    if (column[0][0] == 0) {
                        select = $(
                            '<select id="servermenu"><option value="">Alle Server</option></select>'
                        );
                    } else if (column[0][0] == 1) {
                        select = $(
                            '<select><option value="">Alle Software</option></select>'
                        );
                    }
                    select
                        .appendTo($(column.header()).empty())
                        .on("change", function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );
                            column
                                .search(val ? "^" + val + "$" : "", true, false)
                                .draw();
                        });

                    column
                        .data()
                        .unique()
                        .sort()
                        .each(function (d, j) {
                            select.append(
                                '<option value="' + d + '">' + d + "</option>"
                            );
                        });
                });
            if (servername != null) {
                var select = document.getElementById("servermenu");
                select.value = servername;
                column = this.api()
                    .column(0)
                    .search(
                        servername ? "^" + servername + "$" : "",
                        true,
                        false
                    )
                    .draw();
            }
        },

What's driving me really crazy is that this exact code used to work 100% correctly, and after having written and tested it I didn't change a single character of code in the entire project, let alone this file. I have been trying to debug for 1,5 days now. Any help, tips, or pointers are appreciated.

Thanks a lot.

kthorngren

Nothing obvious stands out as an issue. Please post a link to your page or a test case showing the issue so we can help debug. Without seeing the table and the code in action it will be difficult to debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

I suggest using console.log statements or debugger breakpoints to see what is happening with your code. Doing this you might be able to track down the problem.

Kevin

ProjectEphra

Just wanted to post an update about the issue and close it. It turns out that my code had no problems whatsoever. But for whatever reason, the backend had messed up with the database, and for whatever reason, added a windows EOL character after every single entry (CRLF or \r\n). Without notifying anyone, thinking that it wouldn't cause any issues.
This was particulary difficult to debug since EOL characters are invisible and can only be seen if raw text is displayed. I noticed this after outputting the raw json response.

So yeah this might be useful to know for future googlers. EOL characters can break this particular implementation of dropdown menu filters.

I should have thought of asking internally before taking it to the internet. But it never even occurred to me, that the database had been modified in such a way.
Sorry about the inconvience.

@kthorngren I have marked your reply as an answer. Thank you so much.