Answers

• allan Posts: 63,531Questions: 1Answers: 10,475 Site admin

  March 13

  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
• menashe Posts: 196Questions: 43Answers: 2

  March 15

  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!
• allan Posts: 63,531Questions: 1Answers: 10,475 Site admin

  March 15

  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
• menashe Posts: 196Questions: 43Answers: 2

  March 19

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

  How can I do that?
• allan Posts: 63,531Questions: 1Answers: 10,475 Site admin

  March 19

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

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

  Allan
• menashe Posts: 196Questions: 43Answers: 2

  March 20

  html: true

  Who knew?? (Literally! )

  Thank you!!
• allan Posts: 63,531Questions: 1Answers: 10,475 Site admin

  March 20 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