Add a select input besides editor buttons

klingler

Good morning

Is there a way to add a custom select input element to the right side of the existing editor buttons on top of the table?
Would like to add a select input so a user can choose which year the displayed table should show.

Works with the buttons: [] options but always renders it as a button around as class dt-button is added.

Best would be if I could use the returned "options" in my JSON to populate the select input ;-)

thanks in advance
richard

klingler

Ah found an example here....but when I use this to insert the select element:

dom: 'B<"toolbar">frtip',

so that the select element comes right after the buttons...the filter input is pushed down and not aligned to the buttons anymore.

klingler

Well....have to play with different CSS settings...but at least populating the selct options from the returned JSON works (o;

I use "years" in the JSON for each order year and then use the initComplete to populate the options fields in the empty select input element:

        initComplete: function() {
            var x = document.getElementById("year");
            var json = table.ajax.json();
            json.years.forEach(function(year){
              console.log(year);
              var option = document.createElement("option");
              option.value = year;
              option.text = year;
              x.add(option);
            });
        },
dom: 'B<"toolbar">frtip',


$('div.toolbar').html('<select onchange="javascript:change_year();" name="year" id="year"></select>');

colin

Yep, that looks good, thank for posting back,

Colin

klingler

Well I'm satisfied with this...except that the search field is moved down....

This is the CSS for the select element:

.toolbar select {
  outline: none;
  margin-left: 15px;
  width: 100px;
  padding: 5px 35px 4px 30px;
  font-size: 14px;
  border: 1px solid #CCC;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 3px;
  background: linear-gradient(to bottom, rgba(230, 230, 230, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
  font-family: 'wedernoch', sans-serif;
}

colin

Styling is always a stinker to debug without seeing it - please can you create a test case or link to your page. 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

klingler

Morning Colin

Got it now (o;

Class toolbar just needs:

.toolbar {
  float: left;
}

Looks much better now ;-)