FooTable removing inner content

Question

I am using fooTable and having problems withh inner content of <td> elements. They all get removed. This wasn't the case in previous version, but v3 removes it. For example if i add a button <td><button class="online">Turn on</button></td> it gets removed, as well as the class of table cell.

How can this be prevented?

I am having this issue too. I've searched online and can't seem to find any examples on how to fix it. Any help would be fantastic :-) — Jonathan, Oct 15 '15 at 09:05
Hey @Jonathan look at the answer i posted, this helped me as a starting ground — user4675957, Oct 15 '15 at 15:07

score 4 · Answer 1 · answered Mar 02 '16 at 06:03

4

How about we set at Header Data Parameter

"data-type"="html"

answered Mar 02 '16 at 06:03

psycobot

39
2

2

This is the best option, there is no needs to modify the library. – Sogeking Mar 06 '16 at 12:40

score 0 · Accepted Answer · answered Oct 15 '15 at 15:06

For anyone looking to prevent this, the change can be made in footable.js. Change this:

    $create: function(){
        if (this.created) return;
        (this.$el = F.is.jq(this.$el) ? this.$el : $('<td/>'))
            .data('value', this.value)
            .contents().detach().end()
            .append(this.format(this.value));

        this._setClasses(this.$el);
        this._setStyle(this.$el);

        this.$detail = $('<tr/>').addClass(this.row.classes.join(' ')).data('__FooTableCell__', this)
            .append($('<th/>', { text: this.column.title }))
            .append($('<td/>'));

        this.created = true;
    },

to:

$create: function(){
            if (this.created) return;
            (this.$el = F.is.jq(this.$el) ? this.$el : $('<td/>'))
                .data('value', this.value)
                .contents();

            this._setClasses(this.$el);
            this._setStyle(this.$el);

            this.$detail = $('<tr/>').addClass(this.row.classes.join(' ')).data('__FooTableCell__', this)
                .append($('<th/>', { text: this.column.title }))
                .append($('<td/>'));

            this.created = true;
        },

Well, this might not be the best way to handle, but it served my purpose. This leaves unformated content, and keeps links, buttons, classes set...

score 0 · Answer 3 · answered Oct 17 '15 at 01:47

Adding to @user4675957's excellent contribution: When you use inner HTML, the details (collapsed table) version will show it as text. This is because it is loaded as such.

To prevent this, modify this line in the $create function:

 .append($('<th/>', { text: this.column.title }))

to

.append($('<th/>').append(this.column.title))

FooTable removing inner content

3 Answers3