Question

I use jQuery DataTable and I want call my function when I select number of results from dropdown. How can I do that?

DataTable generate code:

<div id="displayData_length" class="dataTables_length">
  <label>
     Show <select name="displayData_length" size="1" aria-controls="displayData">
             <option value="10" selected="selected">10</option>
             <option value="25">25</option>
             <option value="50">50</option>
             <option value="100">100</option>
           </select>
  </label>
</div>

So i try use function:

$('select[name=displayData_length]').bind('change', function(event) {
    alert($(this).val());
});

But it is not good, because I don’t see alert() when I select number of result.

How can I do that? Maybe is another solution?

Answer 1

Have tested your code – it works fine and as expected here. Be sure that the script is placed after the <div id="displayData_length"-markup.

If the markup is generated runtime by DataTables, place the function in a document ready function

$(document).ready(function() {
    $('select[name=displayData_length]').bind('change', function(event) {
        alert($(this).val());
    });
});