How to add data value to footable row/cell

Question

I'm creating footable like this:

        $('#itemsTable').footable({
        "rows": items.AllItems,
        "paging": {
            "size": 20,
            "container": '#pagination-container',
            "countFormat": "Страница {CP} из {TP}",
            "limit": 8
        },
        "sorting": {
            "enabled": true
        }
    });

And I need to add to all <tr> and <td> data values. It should look like this:

<tr data-id="1">Value</tr>

and same for td:

<td data-id="1">Value</td>

Answer 1

If you're able to modify the JSON, data-attributes for cell data ( <td..> ) can be added via the nested "options" property of each object property. So if you wanted to append data-id , it would look something like this:

{
    "property1": {
        "options": {
            "id": "1"
        },
        "value": "<span class =\"row-val\"> </span>"
    }
}

In order to change data-attributes on the table rows ( <tr..> ), there are no default options to allow this custom behavior that I can see from documentation - but it is possible to override the FooTable.Row#$create method to get to your desired result. This would require accessing and extending the plugin after FooTable has been included on the page:

(function($, F){

    // Extend the Row.$create method to add an id attribute to each <tr>.
    F.Row.extend("$create", function(){
        // call the original method
        this._super();
        // get the current row values
        var values = this.val();
        // then add whatever attributes are required
        this.$el.attr("id", values["your-id-column-name"]);
    });

})(jQuery, FooTable);

Reference