Issue adding select inputs into second row of header

curiou

I am having an issue inserting select inputs (using Bootstrap-Select) into the second row of my table's header.

Test case: http://live.datatables.net/miyenano/1/edit

Code that is not working (sorry for indentation):

initComplete: function() {
      this.api().columns().every(function() {
        var column = this;
        var select = $('<select class="selectpicker" multiple></select>')
          .appendTo($("#example thead tr:eq(1) th").eq(column.index()).empty())
          .on('changed.bs.select', function(e) {
            var val = $(this).val();
            var fVal = val.join("|");
            column
              .search(fVal, true, false)
              .draw();
        }); //select

        column.data().unique().sort().each(function(d, j) {
          select.append('<option value="' + d + '">' + d + '</option>');
        }); //column.data
      }); //this.api()

I am basing the above on the below two examples:
1. http://live.datatables.net/saqozowe/3/edit (by kthorngren)
2. https://jsfiddle.net/mattmorz/kunt518t/4/

colin

It's because of scrollX creating an additional layer. This example from this thread should get you going.

Colin

curiou

Hi Colin,

I tried the example out on my table, and I get the error "TypeError: column.data is not a function". It's strange that the first column header does empty (so the selector seems to be working initially) right before the error is thrown.

See example here: http://live.datatables.net/rawagawu/1/edit

Thanks

kthorngren

The example Colin linked to needs to be changed a bit to also support FixedColumns. See this example:
http://live.datatables.net/buziligu/1/edit

You will want to move your head class from the first header row to the second.

Kevin

curiou

Thanks Kevin, this fixed the placement of the select inputs into the second row of the table header (after the use of fixedColumns().relayout()) but when clicking the select inputs the following happens:

1) The select input dropdown in the fixed column is blocked by the column body when opened.
2) The select input dropdowns in the rest of the columns do not extend down into the body of the table; they instead expand upwards into the first row of the header.

It seems that either the z-index on the dropdowns needs adjustment or the select input dropdown is being blocked by another datatable layer?

Here's the updated example: http://live.datatables.net/tajahoka/1/edit

Thanks

kthorngren

If you remove the scrolling and fixedColumns from the Datatable then the Bootstrap-select library your are trying to use does work. See here:
http://live.datatables.net/xituletu/1/edit

Note there are errors in the browser's console when selecting an item. Using console.log($(this).val()) inside the change event shows the value is an array. The event handler will need to change to support array values. You can take a look at this select2 search example to see one way to handle the array:
http://live.datatables.net/cefepexe/1/edit

The select input dropdown in the fixed column is blocked by the column body when opened.

Would agree that its some sort of z-index issue. Check with the developer or Stack Overflow to see if you can find the proper elements to add the z-index to or if there is a more preferred way with their library.

The select input dropdowns in the rest of the columns do not extend down into the body of the table; they instead expand upwards into the first row of the header.

My guess is the problem that the cloned header for the scrolling features is wrapped in a div with the end of the div after the second header. I would say that bootstrap-select sees the closing div and pushes the content up. You will need to check with the bootstrap-select developer.

Maybe someone more familiar with bootstrap-select or CSS than I will give better answers

Kevin

curiou

Hi Kevin,

Thanks, appreciate the detailed response. I started making a little bit of progress (got the dropdowns to extend out properly via CSS) but I noticed that your example (http://live.datatables.net/buziligu/1/edit) only appends the <option> tags correctly if every column has a select input.

As can be seen from this example, all the select inputs have the options from a previous column due to all of the columns not having select inputs: http://live.datatables.net/wezalapi/1/edit

Is there any way to only target the columns that require a select input in the second row of the header (while using FixedColumns and ScrollX)?

On a side note, you may also notice that the select inputs after the two fixed columns can be seen overlapping/passing through the first fixed column when you start scrolling horizontally. In case this is not a bootstrap-select specific issue, I wanted to see if you might have some tips on how to hide the select inputs from view when scrolling?

Thanks