Footable data get disappeared when row collapsed

Question

I have an MVC 4 application, and I'm using footable to display data. A table is loaded fine. But once I expand and collapsed a row, stack data in that row get disappeared. Why is this happening?

This is my HTML

 <table id="xtable"  class="table" data-show-toggle="true" data- expand-first="false">
        <thead>
            <tr>
                <th data-visible="false">ID</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th data-breakpoints="xs">Job Title</th>
                <th data-breakpoints="xs sm">Started On</th>
                <th data-breakpoints="all" data-title="DOB">Date of Birth</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Dennise</td>
                <td>Fuhrman</td>
                <td>High School History Teacher</td>
                <td>November 8th 2011</td>
                <td>July 25th 1960</td>
            </tr>

            <tr>
                <td>2</td>
                <td>Elodia</td>
                <td>Weisz</td>
                <td>Wallpaperer Helper</td>
                <td>October 15th 2010</td>
                <td>March 30th 1982</td>
            </tr>

        </tbody>
    </table>

The footable called with '$('#xtable').footable();'