Layout

Layout

menashemenashe Posts: 196Questions: 43Answers: 2

I just "discovered" the new layout; very nice.

How can I insert an line above the pagination formation (to push it down on the page)? Even in your examples, it is higher than the "info" to the left.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    It looks about right on this page to me - Bootstrap 5 styling:

    Can you link to the page with the issue and the styling option.

    Allan

  • menashemenashe Posts: 196Questions: 43Answers: 2

    Hi Allan,

    Allow me please to rephrase: If, for any reason, I want to include extra text or format my layout--for example, above the pagination I want the text "Allan Rocks!"--how do I accomplish that?

    I played around with HTML, but all I got was the pagingType: 'full_numbers' as a literal on the page -- pagingType: 'full_numbers'"!

    Thanks!

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    Here is a little feature plug-in that will place text around the table using layout:

    DataTable.feature.register('text', function (settings, opts){
      var div = document.createElement('div');
      
      if (typeof opts === 'string') {
          div.textContent = opts;
      }
      else {
        if (opts.className) {
          div.classList.add(opts.className);
        }
      
        if (opts.text) {
          div.textContent = opts.text;
        }
      
        if (opts.html) {
          div.innerHTML = opts.text;
        }
      }
      
      return div;
    });
    

    Example here: https://live.datatables.net/yuwiluda/1/edit .

    I've allowed it to accept an object as well as a string should one wish to set HTML data (rather than text), or a class name for the element. The text can be placed anywhere around the table using layout.

    Allan

  • menashemenashe Posts: 196Questions: 43Answers: 2

    Thank you. It works for text, but I have tried everything unsuccessfully to pass HTML--a <br>, for example.

    How can I do that?

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

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

    var table = new DataTable('#example', {
      layout: {
        bottom: {
          text: {
            text: 'DataTables<br>rocks!',
            html: true
          }
        }
      }
    });
    

    Allan

  • menashemenashe Posts: 196Questions: 43Answers: 2

    html: true

    Who knew?? (Literally! :) )

    Thank you!!

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Answer ✓

    Line 16 in the plugin code I wrote for the original example. Sorry, I'd thought it was obvious, but that's what I get for working with it all day, every day and not really thinking outside the box!

    I'm going to write this little feature plugin up into a blog post soon, which will help document it and also make it a bit more widely available.

    Allan

Sign In or Register to comment.