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
Share Improve this question edited Mar 19, 2018 at 6:39 User7291 asked Mar 12, 2018 at 11:51 User7291User7291 1,1153 gold badges29 silver badges72 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 thefootable
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
2 Answers
Reset to default 3 +25You 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
版权声明:本文标题:javascript - Reload data from sql footable - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742037145a2417359.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论