从 sql footable 重新加载数据答案

【问题标题】：Reload data from sql footable从 sql footable 重新加载数据
【发布时间】：2018-03-12 11:51:10
【问题描述】：

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

我试图重新分配 div $("#BusList").load(location.href + " #BusList"); 数据已加载，但设计完全一团糟

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

这是加载前的截图

这是加载后的截图

【问题讨论】：

我有一些问题需要确定：您首先拥有一张具有良好价值/设计的桌子，然后您可以做其他事情，当您点击一个按钮时，您想要回到原来的表？你怎么会先到这个页面，有好的设计和好的内容？当你点击时，你说你有很好的数据但没有很好的设计，我们不能自己尝试做，我们可以看看它的样子吗？
@MickaelLeger 我添加了表格的屏幕截图...请注意，我正在将数据添加到 sql 中的表格中，因此单击按钮我需要使用 sql 中的更新数据刷新表格
您是否尝试过这样做，因为您的表在第一次加载时就很好：1/您创建了一个函数“init_table()”，它首先执行您已经做的事情向您显示包含良好数据的表格，并在加载页面时调用它。 2/你在sql中添加你的新数据。 3/点击时，你回调你的“init_table()”并在Ajax上重新加载你的表（你删除它+从头开始重建，就像你第一次加载它但使用新数据一样）。在 ajax 中，您可以在不重新加载页面的情况下执行此操作，这样您的用户就不会看到它
load() 调用返回的内容似乎与原始 HTML 结构不匹配。如果是这样，那么您需要在加载后重新初始化footable，因为当您删除表并以编程方式重新创建它时，它不会自动重新加载。

标签： javascript jquery html jquery-plugins footable

【解决方案1】：

在动态加载 footable 后，您不会重新初始化它。假设刷新后 HTML 结构相同，则需要调用；

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

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

【讨论】：

我试过了，但没用我试过这个$('#demo-foo-filtering').data('footable').redraw();和这个$('#demo-foo-filtering').footable();
我什至尝试加载表格而不是 div，但我得到了相同的结果，表格的分页没有被加载
我也遇到了同样的问题，你找到解决办法了吗？
@User7291，我认为如果你想更进一步，你将不得不在 ajax 加载和完整的footable 初始化调用之前/之后提供表格代码。

【解决方案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').footable();

【讨论】：

我试过了，但没用我试过这个$('#demo-foo-filtering').data('footable').redraw();和这个$('#demo-foo-filtering').footable();
@user7291 加载数据后，您能向我们展示您的表格 html 吗？
你在控制台提交数据后调用footable了吗？