In-Table Controls and Bootstrap Modal Styling

jwellma

Hello,
I have a table with inline editing enabled, and form controls (specifically just delete) in the last column, as shown here https://editor.datatables.net/examples/simple/inTableControls.html

While everything functions correctly, the bootstrap modal for the delete confirmation is not styled the same way as it normally is for a delete modal, with an <h3> in the header, and changing the button class to btn-danger.

Is there some way to indicate that it should be styled that way when using in-table controls?

allan

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

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

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

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

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

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