Rendering datatable in boostrap dialog/modal

Rendering datatable in boostrap dialog/modal

gabrieldzodomgabrieldzodom Posts: 4Questions: 1Answers: 0

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. "
        }
    });

Answers

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    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

  • gabrieldzodomgabrieldzodom Posts: 4Questions: 1Answers: 0
    edited May 2020

    @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

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    Answer ✓

    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

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736
    Answer ✓

    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

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    Answer ✓

    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

  • gabrieldzodomgabrieldzodom Posts: 4Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736
    Answer ✓

    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

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    Answer ✓

    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.

  • gabrieldzodomgabrieldzodom Posts: 4Questions: 1Answers: 0

    Good to know. Thank you for your help.

This discussion has been closed.