Adding ScrollY or ScrollX makes foreach loop twice when button is clicked

riji2312

Here is my test link: https://jsfiddle.net/ps1jargb/6/
The console.log text could be seen at the end of result page when trigger.

I had created a search button, which, upon clicking, will store all input value inside an object called "data".
For some reason, if I include "scrollY": "300px", or "scrollX": true,, the $('input.search-input').each() got looped twice (n = 4).
I planned to filter data in server side per AJAX, so object data having both current input value and default input value really troubles me.

Any help is appreciated.

riji2312

I had found out that Datatable created a hidden header inside table body for scroller effect, thus created another hidden input for each input in header.

After changing $('input.search-input') to $('.dataTables_scrollHeadInner input'), the loop had been correctly done.

I don't know how to mark this as answer, so hopefully admin could do it for me.

colin

Hi @riji2312 ,

It's because there's a layer that's used for scrolling, where the elements are duplicated. Change

      $('input.search-input').each(function() {

to be

      $('div.dataTables_scrollBody input.search-input').each(function() {

Cheers,

Colin