-2

Length Menu options below- shown as buttons

Hi there, I recently just started venturing into front-end development as part of my leisure activities and came across datatable. I was wondering how do I display the length menu's options as buttons as shown in the image ? As far as I am concerned the styling for the datatable doesn't have settings that can be configured into something like this.

I had spent quite awhile researching this and tried to implement the method suggested by the community (How can I display select options as buttons?) into the livedatatable demo using the length_menu class (http://live.datatables.net/hideqepi/1/edit) but still no luck, only the colour of the options changes and still remains in the select menu...., any ideas how they did it ?

CaesarHo
  • 16
  • 5

1 Answers1

0

Simply put, you implement the code given in one of the answers you linked to.

#results_per_page{
  height: 44px;
  border: none;
  overflow: hidden;
}
#results_per_page::-moz-focus-inner {
  border: 0;
}
#results_per_page:focus {
  outline: none;
}
#results_per_page option{
  width: 60px;
  font-size: 1.2em;
  padding: 10px 0;
  text-align: center;
  margin-right: 20px;
  display: inline-block;
  cursor: pointer;
  border:rgb(204, 204, 0) solid 1px;
  border-radius: 5px;
  color: rgb(204, 204, 0);
}
<select name="results_per_page" id="results_per_page" multiple>
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="50">50</option>
</select>
enhzflep
  • 12,927
  • 2
  • 32
  • 51
  • Yes, like I said I tried before but it doesn't work, only the the options changes color and the options are still in the select menu, I'm not sure what I did wrong tbh. – CaesarHo Dec 30 '21 at 16:24
  • http://live.datatables.net/hideqepi/33/edit here's the example. – CaesarHo Dec 30 '21 at 16:27