Reload data from sql footable

Question

i am using a footable and i need to reload it on a button click but without appending html to the table, i need to reload it from sql as it is filled the first time, is that possible

i have tried to realod the div $("#BusList").load(location.href + " #BusList"); the data is loaded but the design is totally messed up

  <div class="row" id="BusList">
  <table id="demo-foo-filtering" class="table table-striped table-bordered toggle-circle m-b-0" data-page-size="7">
    <thead>
    <tr>
        <th data-toggle="true">Name</th>
        <th>Company</th>
        <th data-hide="phone">Bus Type</th>
        <th data-hide="phone">Bus Model</th>
        <th data-hide="phone">Bus Color</th>
        <th data-hide="phone, tablet">Driver Status</th>
        <th data-hide="phone, tablet">Bus Status</th>
        <th data-hide="phone, tablet"></th>
    </tr>
    </thead>
    <tbody>
    <%
        for (int i = 0; i < BusList.Count; i++)
        {  %>
    <tr class="gradeX">
        <td><%=BusList[i].Name %></td>
        <td><%=BusList[i].CompanyName %></td>
        <td><%=BusList[i].BusType %></td>
        <td><%=BusList[i].BusModel %></td>
        <td><%=BusList[i].BusColor %></td>
        <td><span class="<%= BusList[i].DriverBusStatus == 1?"label label-table label-success":"label label-table label-inverse"%>"><%=BusList[i].DriverBusStatusDesc %></span></td>
        <td><span class="<%= BusList[i].BusStatus == 1?"label label-table label-success":"label label-table label-inverse"%>"><%=BusList[i].BusStatusDesc %></span></td>
        <td>
            <button type="button" class="btn btn-default" onclick="ViewBus(<%=BusList[i].IdBus %>)" />
            View Details</td>
    </tr>
    <%} %>
</tbody>
<tfoot>
    <tr class="active">
        <td colspan="10">
            <div class="text-right">
                <ul class="pagination pagination-split footable-pagination justify-content-end m-t-10 m-b-0"></ul>
            </div>
        </td>
    </tr>
</tfoot>
</table>
</div>

this is a screenshot before the load

this is a screenshot after the load

Ope

I have some question to be sure to understand : you have a table that have the good value / design at first, then you can do thing ot it, and when you click on a button you want to return to the original table? How to you come to this page first, with the good design and the good content? And when you click, you say that you have the good data but not the good design, can we see how it look like please since we can't try to do it ourself? – Financial

@MickaelLeger i added screenshots of the table ... note that i am adding data to the table in sql so on the click of the button i need to refresh the table with the updated data from sql – Ope

Did you try to do something like this, since your table is good when you load it the first time : 1/ You create a function "init_table()" that do what you already do first place to display you table with the good data, and you call it when you load your page. 2/ You add your new data in sql. 3/ On click, you call back your "init_table()" and reload your table on Ajax (you erase it + rebuild from scrach like you first load it but with the new data). In ajax you can do it without reload your page so your user won't see it – Financial

what is returned from the load() call, it would appear that this doesn't match the original HTML structure. If it does then you will need to reinitialize the footable after loading it, as it will not reload automatically when you have removed the table and recreated it programmatically. – Disentitle

Answer 1

You are not reinitializing the footable after loading it dynamically. Assuming that the HTML structure is the same after refresh then you will need to call;

$('#demo-foo-filtering').footable();

After reloading the HTML. This was likely done on page load initially, and then you throw that away when grabbing the rows from the server again.

Disentitle

i tried it and it did not work i tried this $('#demo-foo-filtering').data('footable').redraw(); and this $('#demo-foo-filtering').footable(); – Ope

i even tried to load the table not the div but i am getting the same results the paging of the table is not being loaded – Ope

I have the same problem, did you find any solution? – Diabetes

@User7291, I think if you want to get much further you are going to have to provide the table code before/after the ajax load and the full footable initialization call. – Disentitle

Answer 2

As far as I can see, your table design just depends on SQL data in two elements and others is static:

<td><span class="<%= BusList[i].DriverBusStatus == 1?"label label-table label-success":"label label-table label-inverse"%>"><%=BusList[i].DriverBusStatusDesc %></span></td>
<td><span class="<%= BusList[i].BusStatus == 1?"label label-table label-success":"label label-table label-inverse"%>"><%=BusList[i].BusStatusDesc %></span></td>

In second screenshot the design of two elements is correct. So another thing affects on design not data.

I think you forgot to call footable method after load data. For testing this thing, you can run it code below in console after loading data and if table is true certainly you should run this code after loading the data.

$('.table').footable(); 

Faiyum

i tried it and it did not work i tried this $('#demo-foo-filtering').data('footable').redraw(); and this $('#demo-foo-filtering').footable(); – Ope

@user7291 Could you show us your table html after loding data? – Faiyum

Did you call footable after lodging data in console? – Faiyum