lightbox for dataTable

montoyam

I have a DataTable where I want to add a 'History' button. When clicking this button, I would like for it to display another DataTable showing the audit history of the record selected in the 'parent' DataTable. But, I thought it would be nice if the DataTable showed in a lightbox, like what the Editor does.

Is this possible? Has anybody done this?

allan

Editor’s lightbox is built into it (unless you are using something like Bootstrap, in which case it uses the modal that the library provides), so it isn’t available for external use. But if you don’t want to write your own popover, there are loads of libraries to do that kind of thing and there is no reason why they can’t contain a DataTable.

Allan

montoyam

Yes, I'm using Bootstrap with DataTables. So instead of finding another lightbox plug-in, can I use the same one Editor uses? If so, what is the jquery command to make the lightbox display?

montoyam

I found the html needed to make it work without any extra plug-ins. thanks

allan

For anyone else reading this, the Bootstrap documentation for how to use their modals is available here.

Allan

montoyam

thanks. I tried posting the code but for some reason after I clicked 'Post Comment' it seemed to save, but was not visible here. I tried it three times

montoyam

ooooh, I tried again and now I noticed the popup "it will appear after it is approved". oops. sorry, you will see the same post multiple times if they are all approved.

montoyam

ah, I think I may have stumbled upon the way to use Bootstrap lightbox without any extra plugins.

                    <div class="row" data-toggle="modal" data-target="#caseActionHistory">
                        <div>
                            <a  href="javascript:void(0);">View History</a>
                        </div>
                    </div>

        <div class="modal fade" id="caseActionHistory" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        dataTable will go here
                    </div>
                </div>
            </div>
        </div>

montoyam

                    <div class="row" data-toggle="modal" data-target="#caseActionHistory">
                        <div>
                            <a  href="javascript:void(0);">View History</a>
                        </div>
                    </div>

allan

I’ve just marked your account so it will bypass the spam checks. Not sure why those posts got picked up!

Allan

montoyam

thank you