thanks for that great post. Although your original code at the end showing
TableFilter.init();
didn't work for me, so I had to change the last part as suggested by you:
function domReady (callback) {
if (document.readyState !== "loading")
callback();
else
document.addEventListener("DOMContentLoaded", callback);
};
domReady(TableFilter.init);
That works so far, great! But ...
... I have a dynamic table where new rows are added every few seconds. For example, at time 07:45:11am exist 15 rows in the table. When I enter a search text in the search field (e.g. ABC), there are 5 hits and the corresponding 5 rows are displayed and all others are hidden, so far so good. However, when I wait for some seconds then the new arrived three rows at time 07:45:24am are ALWAYS displayed regardless of the filter. They do not go through the search filter although ABC is still displayed in the search field and the filter does not match the new 3 lines. All new arriving rows bypassing the filter.
How can we fix that, so even new added rows are taken into account? Looking forward to your comment. Appreciate your assistance and again BIG THANKS !
i'm guessing you are using AJAX to fetch more data? in that case, that is where the code i posted above really shines.
rather than to reference the source of an input, my code SPECIFICALLY targets the id of the search filter box. that way, you can just tell your AJAX code to run the JS function to filter whenever the data is updated.
or whenever else you want! :)
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
thanks for that great post. Although your original code at the end showing
TableFilter.init();
didn't work for me, so I had to change the last part as suggested by you:
function domReady (callback) {
if (document.readyState !== "loading")
callback();
else
document.addEventListener("DOMContentLoaded", callback);
};
domReady(TableFilter.init);
That works so far, great! But ...
... I have a dynamic table where new rows are added every few seconds. For example, at time 07:45:11am exist 15 rows in the table. When I enter a search text in the search field (e.g. ABC), there are 5 hits and the corresponding 5 rows are displayed and all others are hidden, so far so good. However, when I wait for some seconds then the new arrived three rows at time 07:45:24am are ALWAYS displayed regardless of the filter. They do not go through the search filter although ABC is still displayed in the search field and the filter does not match the new 3 lines. All new arriving rows bypassing the filter.
How can we fix that, so even new added rows are taken into account? Looking forward to your comment. Appreciate your assistance and again BIG THANKS !
Did you try to call
TableFilter.init()again just after the new rows were added?i'm guessing you are using AJAX to fetch more data? in that case, that is where the code i posted above really shines.
rather than to reference the source of an input, my code SPECIFICALLY targets the id of the search filter box. that way, you can just tell your AJAX code to run the JS function to filter whenever the data is updated.
or whenever else you want! :)