*Simple* (hopefully) was to include HTML/JQuery-UI code into a table cell as outer wrap?

shawngibson

Hi everyone, as I struggle to dig deeper into coding, I would be grateful to learn how I might add (a) simple outer html content and (b) not so simple outer content ,with Editor. Two simple examples to demonstrate, I hope, follow right here:

(A) I currently have a column (db field "Description") which requires a substantial amount of basic CSS-formatted HTML input. Right now, I enter something like the following directly into the cell I am about to edit:

<div id="mywrap" style="height:500px !important;overflow:scroll;">

all of my real data

</div>

This helps me to minimize the size of my table rows so they don't become unwieldy, but to be effective, I will have to go back into hundreds or even thousands of records from the past to carefully insert the above code into each "Description" field.

Is there some way to have this code inserted behind the scenes so that it is always there as a wrap-around container for my actual data? I have both the DataTables and Editor Examples downloaded to my local server and spend a lot of time trying to learn, but I appear to be a bit too scatterbrained to pull this off without some help.

In the meantime, I am populating the field with Generator-created code with the above code as default input, to be augmented with each new record, but it is very touchy, and doesn't account for previous db entries:(.

(B) JQuery-UI/UIKit and other script-based content. As a basic but hopefully self-explanatory example, is it possible to have a set of JQuery-UI Tabs or Accordion block inside a table cell?

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

colin

You can use columns.render to add that <div> element with the formatting. It won't show in the Editor form, as that will only present the raw data. Would that work?

Colin

allan

Is there some way to have this code inserted behind the scenes so that it is always there as a wrap-around container for my actual data?

Yes, use a renderer.

and doesn't account for previous db entries:(.

In what way? If the table already exists, it leaves it alone and just reads from and edits it.

Allan

shawngibson

Thank you both, very much:) I think this example (from your links) will give me the knowledge I need to deal with the example I gave:

$('#example').dataTable( {
  "columnDefs": [ {
    "targets": 4,
    "data": "description",
    "render": function ( data, type, row, meta ) {
      return type === 'display' && data.length > 40 ?
        '<span title="'+data+'">'+data.substr( 0, 38 )+'...</span>' :
        data;
    }
  } ]
} );

Allan, yes, sorry for the lack of precision in my post. I only hope to represent the data differently (i.e., "wrap it" in my fuddled language), not alter it, to achieve my goals here. Rendering looks like a great jump forward:) Thanks again for the quick and helpful responses.

PS - Just moments ago, after months of fiddling and fumbling, I created my first 2-table join, based on the site examples, so I feel a little bit invulnerable now. But I'm sure it will pass before I sneeze...

allan

Haha - I know that golden feeling. Long may it last for you

Allan