Answers

• allan Posts: 65,330Questions: 1Answers: 10,836 Site admin

  November 11

  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 Posts: 31Questions: 11Answers: 0

  November 11

  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 Posts: 65,330Questions: 1Answers: 10,836 Site admin

  November 11 Answer ✓

  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 Posts: 31Questions: 11Answers: 0

  November 11 edited November 11

  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 Posts: 65,330Questions: 1Answers: 10,836 Site admin

  November 11 Answer ✓

  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 Posts: 31Questions: 11Answers: 0

  November 12

  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 Posts: 65,330Questions: 1Answers: 10,836 Site admin

  November 12

  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 Posts: 31Questions: 11Answers: 0

  November 12 edited November 12

  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 Posts: 65,330Questions: 1Answers: 10,836 Site admin

  November 12 Answer ✓

  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 Posts: 31Questions: 11Answers: 0

  November 12 edited November 12

  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 Posts: 65,330Questions: 1Answers: 10,836 Site admin

  November 12

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

  Allan