Rendering datatable in boostrap dialog/modal

gabrieldzodom

I am trying to show a datatable into a bootstrap dialog. The table shows but not the search nor the pagination which are essential to my UI. What am I missing?
My code is:

    const table = $("<table>");
    table.addClass("table table-hover");
    table.DataTable({
        data : data,
        columns : columns,
        language : {
            emptyTable : "No data available for selection. "
        }
    });

rf1234

It has been resolved here: https://datatables.net/forums/discussion/comment/169296/#Comment_169296
and here:
https://datatables.net/forums/discussion/comment/168563/#Comment_168563

colin

Looks fine. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

gabrieldzodom

@rf1234, thank you for the links but they did not help. The thing is when I look at the generated html in the browser console, the divs that contains the pagination or the filter textbox are absent.

Anyway is here is a link to a test case for more details and clarifications.

https://jsbin.com/kodawap/edit?html,js,console,output

rf1234

Had it working but then I messed it up sorry.

You are not waiting for your jQuery to complete to add all of those dom elements before initializing the data table. You should use a promise or - as I did - a simple setTimeout:

var table = $("<table>");
setTimeout(function () {
    table.addClass("table table-hover");
    table.DataTable({
      dom: "Bfrltip",
      data : data,
      columns : columns,
      language : {
        emptyTable : "No player data available for selection. "
      }
    })
}, 500);

You also forgot the "dom" option. https://datatables.net/reference/option/dom

kthorngren

You need to create a div for the table. This is where the missing elements are placed. For example:
https://jsbin.com/senesigali/1/edit?html,js,output

Kevin

rf1234

Interesting, Kevin! Both solutions work the one with the timeout and yours with the "div". Amazing.

https://jsbin.com/defuvowiyo/1/edit?html,js,output

gabrieldzodom

Amazing! Thank you so much. Both solutions work well. So the html table element must always be inside a div ?

kthorngren

So the html table element must always be inside a div ?

There is no requirement for the table to be in a div. The HTML requirements are documented here. My solution just provides the parent element for Datatables to place it's elements. If you don't want the div then use rf1234's solution to allow for a small delay.

Kevin

rf1234

Just checked my code. I always have the table element inside a div! I actually never questioned this. Seemed kind of "natural" to me using bootstrap because I need the "container" class which is attached to the outer div.

Hence I guess Kevin's solution is the best: It works and you don't need the timeout.

gabrieldzodom

Good to know. Thank you for your help.