DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Styling length menu

Styling length menu

halloeihalloei Posts: 23Questions: 6Answers: 0
in Free community support

The html for the length menu looks like this:

<label>
  Show 
  <select name="my-table_length" aria-controls="my-table" class="form-control input-sm">
    <option value="10">10</option>
    <option value="25">25</option>
    <option value="50">50</option>
    <option value="100">100</option>
  </select> 
  entries
</label>

As I'm using Bootstrap, I'd like to hide "Show" and "entries", when the page width is below 769px. If they were wrapped in <span>s, I could add classes like hidden-xs.

Is there a way to style these text contents?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 64,623Questions: 1Answers: 10,684 Site admin

    You would need to use language.lengthMenu to customise the text and insert the HTML (with the classes) you require.

    Allan

  • halloeihalloei Posts: 23Questions: 6Answers: 0

    Thank you.
    But as I'm building a multilingual site, I'm importing the specific i18n files to translate the DataTables texts.
    It would take great efford to overwrite every language file to modify this string. I'd like to avoid this solution if possible.

  • allanallan Posts: 64,623Questions: 1Answers: 10,684 Site admin

    The only other option I can offer is to use jQuery (in initComplete) to modify the HTML that DataTables has created.

    Allan

  • halloeihalloei Posts: 23Questions: 6Answers: 0

    Thanks. I put that in the initComplete function:

    var $table = $(this);

$table.closest('.dataTables_wrapper').find('> div > .dataTables_length label').contents().filter(function() {
    return ($(this).prop('tagName') !== 'SELECT');
}).wrap('<span class="hidden-xs"></span>');
  • allanallan Posts: 64,623Questions: 1Answers: 10,684 Site admin
    Answer ✓

    My answer was rejected, so I presume that didn't work for you? If not, can you link to a test case showing the issue please.

    Allan

  • halloeihalloei Posts: 23Questions: 6Answers: 0

    It worked and I would mark your previous comment as answer, if I could change that now. Thanks.

  • allanallan Posts: 64,623Questions: 1Answers: 10,684 Site admin

    Cool - thanks for the update. Just wanted to make sure we got it fixed for you!

    Allan

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2025 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.