Append jQuery datatable as <span> instead of <div>

Question

I am trying to create a datatable next to my globe like this one. I was able to create the table using jQuery datatable. However, it's creating the table in a div instead of in a span next to my globe. Screenshot below: I want to achieve an effect somewhat like this: I believe I have to use the span tag. #currentInfo is the div that the globe is in). I tried

$("#currentInfo").append("<span id='createSpan'></span>");
$("#createSpan").append("<table id='example' class='display compact' width='50%'></table>");

Nothing seems to change. The table is created as a div above the globe. So I tried:

$("#currentInfo").append("<span><table id='example' class='display compact' width='50%'></table></span>");

The result is still the same. The data returned is <div><span>data</span><span>data</span>.....</div>

The below code skips including the table completely.

$("#currentInfo").append("<span id='example' class='display compact' width='50%'></span>");

and I am also getting an error: DataTables warning: Non-table node initialisation (SPAN). For more information about this error, please see http://datatables.net/tn/2. This leads me to believe that jQuery datatable has to be appended in the format below with the table tag, and a div will be created and wrap around the data automatically.

 $("#elementId").append("<table id='example' class='display compact' width='50%'></table>");

I am able to add span text by doing

$("#currentInfo").append("<span id='temp'>Add span text here</span>");

to the globe. I could style my data and just append it as a span, but there are so many read to use perks that come with the jQuery datatable (sort, format, etc.)

Is there a way that I can override the jQuery datatable div property, so it creates wrap the table in a span tag instead of a div? Or can anymore suggest a different data library that allows me to achieve this?

And why don't you style the wrapper DIV to behaves like a SPAN??? You could set it position to absolute with some specific z-index and warpped this DIV and your globe element to a common container. There is many ways to do what you are expecting but you should provide minimalistic sample replicating your issue to get, i guess, the best solution which would fit your needs — A. Wolff
Understood the issue might be hard to replicate without a minimalistic sample. Trying the z-index with absolute position now. — caramelslice
Yes, styling the dataTable wrapper to an absolute position would be the right way to solve this problem. I am pretty sure the sphere has some absolute styling as well. — davidkonrad

caramelslice caramelslice · Accepted Answer · 2016-05-11T14:16:52

Thanks to @A. Wolff and @davidkonrad for the enlightenment. I was thinking the long and winding way to do something simple. The globe does have absolute styling. The use of absolute and and z-index solved my problem beautifully. Posting my solution for anyone who wishes to add table to their globe as a future reference:

#example_wrapper {
    padding: 5%;
    padding-top: 20%;
    position: absolute;
    width: 40%;
    background-color: black;
    height: 700px;
    z-index: 3
} 

#globeImageContainer {
  margin: 0;
  padding: 0;
  background: #000000;
  color: #ffffff;
  font-family: sans-serif;
  font-size: 13px;
  line-height: 20px;
  height: 900px;
  width: 100%;
  position: absolute;
  }

canvas {
    right: 0px;
    left: 5%;
    top:0px;
    position: absolute;
    width: 75%;
}

Note that #globeImageContainer is my custom div where I put my globe and the table in. #example_wrapper came with the jQuery datatable library. Canvas come with the globe library.

Append jQuery datatable as <span> instead of <div>

1 Answers