Please help me understand DOM basics

TomHall

I am using Bootstrap 4 and have a nice table working. I want to learn more about customizing the DOM, specifically the syntax.

The code below is what I have so far.

1. Is this correct formatting for BS 4?

2. If I understand this syntax, I have a full-width row with two nested table cells, each 50%. If correct, how would I nest a div in the left with an #tom id, and a p (paragraph) in the right side with an #sue id and class of .beautiful

3. How would I add a input for searching the table?

Here is my code:

$("#leads").dataTable({
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"columnDefs": [
{ "visible": false, "targets": 0 },
{ "visible": false, "targets": 1 },
{"visible":true, "targets": 2, "searchable":true}
],
// colReorder: true,
dom: "<'row be-datatable-header'<'col-sm-6'l><'col-sm-6 text-right'B>>" +
"<'row be-datatable-body'<'col-sm-12'tr>>" +
"<'row be-datatable-footer'<'col-sm-6'i><'col-sm-6'p>>",
buttons: [
'excel', 'pdf', 'print', 'colvis'
]
});

TomHall

It took me some time, and I was able to strip my content down to one row

dom: "<'row be-datatable-header'lfB>" +
"<'row be-datatable-body'<'col-sm-12'tr>>" +
"<'row be-datatable-footer'<'col-sm-6'i><'col-sm-6'p>>",

Am I limited to having only div elements in the top row? Can put in custom html, such as a datepicker, p, ul, etc?

kthorngren

This example shows how to add custom components.

Kevin