footable js removes all form elements in the table

Question

I have implemented a responsive table with the help of footable jquery library. Now i have placed input tags, select box in it. Footable js removes all these tags and make it an empty <td>.

<table id="accordion-example-1" class="table" data-paging="true" data-filtering="false" data-sorting="false">
  <thead>
    <tr>
        <th></th>
        <th data-breakpoints="xs">Date Created</th>
        <th>Source</th>
        <th>Type</th>
        <th data-breakpoints="xs">Status</th>
        <th data-breakpoints="xs sm">&nbsp;</th>
        <th data-breakpoints="xs sm md" >&nbsp;</th>
        <th data-breakpoints="xs sm md">&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr data-expanded="true">
        <td></td>
        <td>6/11/16</td>
        <td>Mr. Cooper - Request Info</td>
        <td>Buying</td>
        <td>
            <select class="nobrdr">
                <option>Offer</option>
            </select>
        </td>
        <td><input type="text" class="nobrdr" placeholder="Value"/></td>
        <td><input type="text" class="nobrdr" placeholder="Date" /></td>
        <td><button class="nobrdr m-l-1" type="button" ><b>+ Add</b></button><br>Forms/Docs</td>
    </tr>

  </tbody>
</table>

jquery function :

$(function($){
            $('#accordion-example-1,#accordion-example-2').footable({

            });
        });

Answer 1

You need to change the data type of the column(s) where the form elements are to "html", otherwise FooTable assumes the column contains only text and formats it as such - i.e. it will strip out all HTML markup from the cell contents, and not just form elements.

For example in your case:

<th data-type="html" data-breakpoints="xs">Status</th>

will tell it to respect HTML markup within any cells in the Status column.

The possible column types supported are "text", "number", "html" and "date". "text" is the default if no type is specified.

For more detailed discussion I suggest you read the guide at http://fooplugins.github.io/FooTable/docs/getting-started.html and find the "Column options" section.