How can I move a column dropdown filter to the top of the table?

kprohaszka

I have been able to get the dropdown filter working but it is at the end of the table. I would like to move it to the top, either across from the search bar or right below it, but when I tried changing column.footer() to column.header(), it broke the table. I am working with both velocity and javascript code, and the table information is pulling from a regularly updated XML feed. Apologies in advance, I do not know if the velocity code will format correctly.

`#set($block = $_.locateBlock("_cascade/blocks/feeds/employees-live")) #*locates the live employee feed block to pull in emp directory dynamically*#

set($block = $block.feedAsXMLElement) #* sets block as type XML to read XML feed*

-directory-nodes-of-the-XML-list*">-directory-nodes-of-the-XML-list*" href="#set($directoryList-=-$block.getChild("root").getChildren("directory"))-#*create-directoryList-variable,-sets-it-to-the-block-and-digs-in-to-find-the-root->-directory-nodes-of-the-XML-list*">set($directoryList = $block.getChild("root").getChildren("directory")) #create directoryList variable, sets it to the block and digs in to find the root > directory nodes of the XML list

if(!$_PropertyTool.isEmpty($block)) #*as long as the block is not empty*

#foreach($item in $directoryList) #set($lastname = $item.getChild("last").text) #set($firstname = $item.getChild("first").text) #set($phone = $item.getChild("phone").text) #set($email = $item.getChild("email").text) #set($department = $item.getChild("department").text) #set($title = $item.getChild("title").text) #set($location = $item.getChild("location").text) #set($ee_image = $item.getChild("photo").value) #end

	First Name	Last Name	Title	Email	Phone	Department	Location
	$_EscapeTool.xml($firstname)	$_EscapeTool.xml($lastname)	$_EscapeTool.xml($title)	$_EscapeTool.xml($email)	$phone	$_EscapeTool.xml($department)	$_EscapeTool.xml($location)

end ##end if $block statement

console.log("document is loaded 1");
var table = new DataTable('#directory-table', {
    initComplete: function () {
                this.api()
                    .columns([6])
                    .every(function () {
                        let column = this;

                        // Create select element
                        let select = document.createElement('select');
                        select.add(new Option(''));
                        column.footer().replaceChildren(select);

                        // Apply listener for user change in value
                        select.addEventListener('change', function () {
                            column
                                .search(select.value, { exact: true })
                                .draw();
                        });

                        // Add list of options
                        column
                            .data()
                            .unique()
                            .sort()
                            .each(function (d, j) {
                                select.add(new Option(d));
                            });
                    });
            },
    layout: {
        top: 'alphabetSearch'
    },
    //sort alphabet bar by last name column
    alphabet: {
        column: 2
    },
    //add responsiveness to table
    responsive: true,
    //change default order to last name
    order: [[2, 'asc']],
    //turn off sorting by photo column
    columnDefs: [{ orderable: false, targets: 0 }]
}); //end new datatable function
    `

I am having a secondary issue with the dropdown as well; it is generating two null/blank selection options, and I'm not sure why. Any suggestions on how to fix this would be helpful!

kthorngren

There are a few ways this can be done. Here is one example:
https://live.datatables.net/saqozowe/2131/edit

Kevin

kprohaszka

Thanks Kevin, that's pretty close to what I had in mind. However when I try that code in my case, after updating the ID, it seems to break datatables and defaults to no table formatting at all. Do you have any suggestions for how to implement that with what I currently have?

kthorngren

it seems to break datatables and defaults to no table formatting at all.

That usually suggests a Javascript error. Look at the browser's console.

Do you have any suggestions for how to implement that with what I currently have?

Its hard to debug code snippets without seeing the issue in a running test case. Please build a simple test case with what you have so we work with it to help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Feel free to update my test case example.

Kevin

kprohaszka

Hi Kevin,

I updated your example to try to add back in the alphabet search bar, but it doesn't work. I'm still pretty new to trying to use the various datatables features, but I had it working separately before adding in the code you provided. Do you see where I went wrong? https://live.datatables.net/saqozowe/2320/edit

kthorngren

I can't use layout and dom at the same time as they both are used to layout the Datatables elements. The dom is legacy from Datatables 1.x. Use layout, for example:
https://live.datatables.net/saqozowe/2321/edit

Kevin

kprohaszka

Thanks Kevin, that's what I was looking for!