从sql footable重新加载数据

Question

我正在使用footable我需要在按钮点击时重新加载它，但没有将html附加到表中，我需要从sql重新加载它，因为它是第一次填充，是可能的

我试图将数据加载div <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> ，但设计完全搞砸了

{{1}}

这是加载前的屏幕截图

这是加载后的屏幕截图

Answer 1

动态加载后，您没有重新初始化footable。假设刷新后HTML结构相同，则需要调用;

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

重新加载HTML后。这可能最初在页面加载时完成，然后在再次从服务器获取行时将其丢弃。

Answer 2

据我所知，你的表设计只依赖于两个元素中的SQL数据而其他元素是静态的：

<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>

在第二个截图中，两个元素的设计是正确的。所以另一件事影响设计而不是数据。

我认为您在加载数据后忘记调用footable方法。为了测试这个东西，你可以在加载数据后在控制台中运行下面的代码，如果table为true，你肯定应该在加载数据后运行这段代码。

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