DataTables + SimpleModal

chaynlynk

I had a big headache with this until I figured out what was going on. So, I'm posting this in case anyone else runs into the same issue.

I used SimpleModal to display a search box that used DataTables for the result list. It worked great the user could select and item, which would set some form fields and close the modal. The problem occured when I tried to reopen the modal search and the DataTables instance wouldn't update at all.

The problem ended up being in the modal's Close() function. There is an option when creating the modal called Persist, and it is used like this:
[code]
// save changes to the data?
if (s.o.persist) {
// insert the (possibly) modified data back into the DOM
ph.replaceWith(s.d.data.removeClass('simplemodal-data').css('display', s.display));
}
else {
// remove the current and insert the original,
// unmodified data back into the DOM
s.d.data.hide().remove();
ph.replaceWith(s.d.orig);
}
[/code]

By default this is set to false which destroys the tie between table and the DataTables stuff. The solution is to set it to true. Once I did this, the problem went away.