Bootstrap-table with bootstrap 4 and x-editable removes editable attributes

[hepabolu]

I'm trying to build a sortable table with inline editing using Bootstrap 4, jQuery 3.3.1, bootstrap-table1.12.1 and x-editable 1.5.1 (or the latest from the dev branch I could download).

I load the data using PHP and Twig, from the server. The list is long, i.e. many rows of data.
I managed to get the table sortable, but when I added x-editable, it seems the data-attributes are removed and the javascript is not called to make the table editable.

I've managed to reproduce the problem on jsfiddle.

I hope someone can help.

UPDATE: clicking around in the jsFiddle, I noticed that some of the fields are actually editable, but only in the first row, not the second.

UPDATE2: turns out there was an error in the data attributes. There is no 'data-type="checkbox"'. Once I changed that to checklist, the second row worked as well. I have updated the jsFiddle.

Only thing I need now is figure out how to make the checklists work.

UPDATE3: turns out the inline editing is lost when the table is filtered by using the search field.

[olivsinz]

same here...

[rodolfosouza]

replace the buttons solve the issue, the problem is that Glyphicons icon font is missing

$.fn.editableform.buttons = '<button type="submit" class="btn btn-primary btn-sm editable-submit">'+ '<i class="fa fa-fw fa-check"></i>'+ '</button>'+ '<button type="button" class="btn btn-default btn-sm editable-cancel">'+ '<i class="fa fa-fw fa-times"></i>'+ '</button>';

[hepabolu]

@rodolfosouza I did that but that and it solved the problem for the text fields. It didn't help for the checkboxes and it didn't solve the problem of UPDATE3: the editing links disappear when filtering the table by using the search field.

[wenzhixin]

Because of the latest version of x-editable does not support bootstrap v4, vitalets/x-editable#1071.

[wenzhixin]

Added blog: https://blog.bootstrap-table.com/2019/10/06/use-editable-in-bootstrap-v4/