Data display only when column header selected

Andy012

Hi,

The data of my table is shown as first. However When I choose "Show: 50 entries" for example, the data disappears. I need to select an option value for data to appear again.

HTML Code for table :

 <select name="menu1" id="menu1">
<option value="">View Alll</option>
<option value="1">1</option>
<option value="2">2</option> 

Script:

<script type="text/javascript">
$(document).ready( function () {
  var table = $('#example').DataTable();
  
 $('option').on('click', function () {
    var val = $(this).val();
    table.column(6).search( val ).draw();
  })
} ); 

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

kthorngren

Can you post a link to your page or a test case showing the issue? This way we can see what you are doing to offer suggestions.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Andy012

Hello,

here's the test link: datatable.securemu.com/test.html

colin

Thanks for the link, can you provide steps to reproduce the problem, please - and say what you're seeing, and what you expect to happen instead.

Colin

Andy012

Hi,

sorry for not providing enough explanations.

All data in tables are shown at first. However when you select say 50 entries, All data will disappear. It's only when you click on View all or any other selection in dropdown that data will appear again.

colin

I'm not seeing that. In your link, if I choose 50 entries, the table is still fully populated.

Colin

Andy012

Thanks,

I just checked, working with Chrome but not Firefox.

Here's an example which is working with both : ghpl.co/products.html

colin

Nope, still not seeing that, even in FF 86.0 (on Ubuntu). It might be worth trying in private browsing mode in case an extension is causing problem.

Colin

Andy012

Hi and thanks, doesn't seem to be an extension issue.

Working with Opera 74.0.3911.203 / Chrome Version 88.0.4324.190 (Official Build) (64-bit)

Not working with : FF Version 86.0 (64 bit), FF Dev Edition 87.ob7 (64 bit), Microsoft Edge 44.18362.1.0

All running on Windows 10 64bits

May be you can check my codes in the initial post and see whether there is an error somewhere ?

allan

  $('option').on('click', function () {
    var val = $(this).val();
    table.column(3).search( val ).draw();
  })

That is selecting all option elements in the DataTables page length drop down as well! So when you select 50 it is doing:

table.column(3).search("50").draw();

I'd say Firefox's behaviour is actually right here - I'm not sure why Chrome isn't doing that... Anyway, a quick fix is to make your selector more selective:

  $('#menu1 option').on('click', function () {

But I would actually suggest you do:

$('#menu1').on('change', function () {
    var val = $(this).val();
    table.column(3).search( val ).draw();
});

That way it will work for keyboard users as well.

Allan

Andy012

Beautiful ! Thank you so much Allan !