Answers

• allan Posts: 61,615Questions: 1Answers: 10,089 Site admin

  May 2017 Answer ✓

  Hi,

  To get the title showing the Bootstrap why you just need to put <h3> tags around whatever you are giving as the title value.

  Likewise with the button, use:

  buttons: {
    className: "btn btn-danger",
    fn: function () {
      this.submit();
    },
    label: 'Delete'
  }
  

  to have it Bootstrap styled.

  Allan
• jwellma Posts: 6Questions: 3Answers: 0

  May 2017

  Ah thank you very much, I had thought I was just missing something with getting the in-table controls to trigger modals with action based style automatically.
• mguinness Posts: 85Questions: 12Answers: 1

  May 2019

  Allan, since Bootstrap requires <h3> tag for the title can that be done in code?

  Something like modifying Editor.prototype.title function in dataTables.editor.js to below?

  if (DataTable.Editor.defaults.display === 'bootstrap')
      header.html('<h3>' + title + '</h3>');
  else
      header.html(title);
  

  I'm looking to switch to Bootstrap modals, but having to change all the code that sets title to append that tag seems like unnecessary work. And if I change to another display controller that has to be done again. Otherwise some type of callback where I could centralize the title manipulation in my code. Thoughts?
• allan Posts: 61,615Questions: 1Answers: 10,089 Site admin

  May 2019

  Editor uses an h5 in the modal header.

  You can change that using the $.fn.dataTable.Editor.defaults.i18n.create.title property (and similar for edit, remove).

  The Bootstrap demos use h5 which is why I used it in Editor by default.

  Allan
• mguinness Posts: 85Questions: 12Answers: 1

  May 2019 edited May 2019

  In editor.bootstrap.js the defaults are as follows and are using h3 tag.

  var i18nDefaults = DataTable.Editor.defaults.i18n;
  i18nDefaults.create.title = "<h3>"+i18nDefaults.create.title+"</h3>";
  i18nDefaults.edit.title = "<h3>"+i18nDefaults.edit.title+"</h3>";
  i18nDefaults.remove.title = "<h3>"+i18nDefaults.remove.title+"</h3>";
  

  My original point is still an issue though - it should be unnecessary for users to wrap their custom title text with a tag if it's required by the modal markup. Any solution like a title callback/change event would be welcome.
• allan Posts: 61,615Questions: 1Answers: 10,089 Site admin

  May 2019

  Ah - the Bootstrap 3 integration uses h3 as you say, while the Bootstrap 4 integration uses h5.

  I agree though, it would be useful to have this done automatically rather than needing to have it specified.

  I've noted this for a future enhancement - thank you!

  Allan