grid layout - show custom div behind a feature element

ltdeta

How can I insert a custom div directly after the layout element paging?
Currently, it is displayed as a separate cell in the grid.

https://live.datatables.net/mijifezi/1/edit?html,css,output

<div class="dt-layout-row">
  <div class="dt-layout-cell dt-layout-full"></div>
  <div class="dt-length"></div>
  <div class="custom-div">hallo</div>
  <div class="dt-search"></div>
</div>

current

what i want

allan

https://live.datatables.net/mijifezi/2/edit

Use topLeft and topRight to get the left and right cells. From there, the key piece of information is that topStart (etc) can be given as an array:

var table = new DataTable('#example', {
  layout: {
    topStart: [
      {
        pageLength: {},
        div: {
          className: 'custom-div',
          text: 'hallo'
        }
      }
    ],
    topEnd: 'search'
  }
});

Use top if you want multiple cells all spaced out. See this example for a more visual explanation.

Allan

ltdeta

Thanks for the quick reply!

Can I also use two div elements by combining topStart and topEnd, and center the last div?
https://live.datatables.net/mijifezi/3/edit

Or would it be better to use multiple div elements within with top instead?
https://live.datatables.net/mijifezi/4/edit

allan

https://live.datatables.net/mijifezi/5/edit

You can't have two properties called div in an object. (or indeed any two properties with the same name).

Do to that, you need to use the features: [] array approach where each entry is defined independently. Its a bit more verbose, but it allows the same feature type to be reused.

Allan

ltdeta

OK, I understand that now – thank you.

Ich migriere gerade von dt 1.10 nach 2.3
Die alte dom option habe ich durch die neue layout option ersetzt

I am currently migrating from dt 1.10 to 2.3.
I have replaced the old dom option with the new layout option.

  layout: {
                topStart: [
                  {
                    pageLength: { },
                    div: {
                      id: 'a',
                      className: 'resetSort'
                    }
                  }
                ],
                topEnd: 'search',

This is what the display currently looks like with dt 2.3

This is how it should look (old display with dt 1.10)
I need a div tag in the middle of the empty area.

allan

I need a div tag in the middle of the empty area.

Why? It doesn't look like there is anything there.

There isn't a built in option to put a filler div there. You'd need to add an extra div in the features array (probably for top) and alter the layout's CSS.

Allan

ltdeta

Just to clarify, the div is not empty. The image is only meant to illustrate the schematic layout.
An additional text should be displayed in the center of the available space.

Here’s the design with DataTables 1.10

allan

Ah - Thank you for the extra information. You will still need a little extra CSS, but it is a trivial line: margin: 0 auto for the div in question: https://live.datatables.net/mijifezi/8/edit .

Allan

ltdeta

Thank you very much, that's exactly what I was looking for.

One last question, if I may.
why is it not possible to set the id attribute for the option elements? (in our example dt-length)

<div class="dt-layout-row">
  <div class="dt-layout-cell dt-layout-start">
    <div class="dt-length">
    <div class="custom-div">
    <div class="custom-div-2">
  <div class="dt-layout-cell dt-layout-end">
</div>

At the moment, I solve it as follows (there is only one length element)
$jq('#jqdatatable_wrapper').find('.dt-length').attr('id', 'jqdatatable_length');

In DataTables 1.10, the id attribute is automatically set to 'jqdatatable_length'.

<div class="fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-tl ui-corner-tr dialog-input-text toolbar-top"
  <div class="dataTables_length" id="jqdatatable_length">
....

allan

Because it wasn't necessary. Moreover, if you had multiple instances of the same feature (i.e. a page length control above and below the table), then you'd have one with an id and one without.

What do you need the id for? As you say, the way to add it is with a quick query.

Allan

ltdeta

A few CSS adjustments — I often used the id attribute here.
Of course, it can also be done using a CSS selector. It was more of a question for understanding.

allan

Yup - use a class name for that sort of adjustment. Apologies for the extra work that will create for you for the transition!

Allan