Need help with multi select checkbox filter

Noodles12

I need help with multiselect checkbox filter on datatables along with making it responsive. I searched the datatables documentation but did not find anything related to it. I am not a big fan of Search Pane and would like to use checkboxes in the dropdown instead. I have this code but need help with the following: Thanks.

1) I would like to add the text "Select" on top of all fields for the dropdown filter
2) How can I make the table responsive with scrollbar.

Please see the code below:

http://live.datatables.net/xedexixi/1/edit

colin

1. Do you mean change the title of the column? If so, you can use columns.title,
2. You can use the Responsive extension, but there'll be no scrollbar. For the scrollbar, use scrollX, please see example here.

Colin

Noodles12

I didn't mean to change the title of the column. I want to add a blank space in the dropdown filter or maybe add "Select" text as first entry in the dropdown menu for filter.

colin

That's more of an issue with the Select control, rather than a DataTables issue, so it would be worth asking on StackOverflow,

Colin

Noodles12

No problem. I was able to fix the issue.

Another thing, I noticed that for my project, some of my columns have "links" in the value. How do I retrieve the values as text in the dropdown. See the **Name **column on how it retrieves the data.

http://live.datatables.net/qixayegi/1/edit

I saw the comment about it here but I am not sure how do I apply in my case.

kthorngren

You can use jQuery .text() to extract the text if the cell is a link. Something like this:
http://live.datatables.net/qixayegi/3/edit

Kevin

Noodles12

Thankyou, it works when all the values in the column are only link, but doesn't work if the value contains link and text. See value "AAAA(test)" and "bbb BBBB test2" under Name column.

http://live.datatables.net/qixayegi/5/edit

kthorngren

The search is using the regex expression:

            column
              .search(vals.length > 0 ? '^(' + vals + ')$' : '', true, false)
              .draw();

The ^ and $ tell regex that the search value, BBBB for example, begins with a B snd ends with a B. So bbb BBBB test2 won't be found. Depending on you requirements you can use Orthogonal data to set the filter operation to use the same HREF text value. Meaning AAAA will find AAAA(test). You will also need a mechanism to keep from adding duplicates to the select options. See this updated example:
http://live.datatables.net/suqehada/1/edit

I removed the bbb from this cell:

<td>bbb <a href="https://www.yahoo.com/">BBBB</a> test2</td>

Because jQuery throws this error:

Uncaught Error: Syntax error, unrecognized expression: bbb <a href="https://www.yahoo.com/">BBBB</a> test2

If you have data like this then you will need to do additional work to remove the leading text.

The above makes assumptions about what you want. If you want a specific option for AAAA and another for AAAA(test) then you will need to do more string manipulation in the loop that builds the options to extract want you want and replicate the same in the columns.render function.

Kevin

Noodles12

This helps a lot. Thankyou very much!