javascript - Reload data from sql footable - Stack Overflow

admin管理员组

文章数量:1318015

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

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

• javascript
• jquery
• html
• jquery-plugins
• footable

Share Improve this question Follow edited Mar 19, 2018 at 6:39 User7291 asked Mar 12, 2018 at 11:51 User7291User7291 1,11533 gold badges2929 silver badges7272 bronze badges 4

• 1 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 e 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? – Mickaël Leger Commented Mar 16, 2018 at 9:24
• @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 – User7291 Commented Mar 19, 2018 at 6:40
• 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 – Mickaël Leger Commented Mar 19, 2018 at 8:20
• 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. – Steve0 Commented Mar 19, 2018 at 21:16

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3 +25

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.

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(); 

本文标签： javascriptReload data from sql footableStack Overflow