Posted by & filed under Programming.

Sometimes I try and make things way too hard.

One of the things that a web app I’m working on needs is the ability to do an advanced search. It’s using the outstanding DataTables plugin for jQuery which takes care of most of the work. But the way I wanted to have the advanced search work is to repopulate the search field with a formatted string like “fieldOne:some info::fieldTwo:some more info” and so on for each of the 6 possible data elements.

That was pretty easy. Attached an onClick event handler to the search label to pop up a jQuery dialog which would then fill in the input field when one of the buttons was pressed.

Refreshing the table is where I hit a wall. Looking through the DataTables forum I found all kinds of posts on using fnDraw or a plugin called fnRefreshAjax that would supposedly work, but none did.

Then it clicked. DataTables was already doing what I needed to do when a keyup event fired. All I had to do was call the keyup event on the input field and it would take care of it for me.

A few hours later, and this little bit of code solved my issue.

$('div.dataTables_filter input').keyup();

One line, instead of about 20, and everything was working just like it should.

Leave a Reply

Your email address will not be published. Required fields are marked *