HTML JQuery DataTable：功能不再可用

Question

我有一个大表（动态，来自一个包含大约 366 个结果的 oracle 数据库），如下所示（摘录）：

<table id="MyTable"
    <tr data-id="154789">
        <td href="#infoModal" id="openBtn" data-toggle="modal" class="modal-dialog modal-lg" onclick="GetModalDetails()" aria-hidden="true">154789</td>
        <td>Testproject X</td>
        <td>Good</td>
        <td>greencolored</td>
        <td>01.01.2015</td>
    </tr>
    <tr data-id="189365">
        <td href="#infoModal" id="openBtn" data-toggle="modal" class="modal-dialog modal-lg" onclick="GetModalDetails()" aria-hidden="true">189365</td>
        <td>Testproject B</td>
        <td>Good</td>
        <td>redcolored</td>
        <td>08.01.2015</td>
    </tr>
    <tr data-id="136471">
        <td href="#infoModal" id="openBtn" data-toggle="modal" class="modal-dialog modal-lg" onclick="GetModalDetails()" aria-hidden="true">136471</td>
        <td>Testproject Y</td>
        <td>Bad</td>
        <td>pinkcolored</td>
        <td>15.04.2015</td>
    </tr>
</table>

所以我做了一个可点击的列，当你点击它时，一个Modal将会被打开并且会有更多的额外信息。其他信息正在使用 WebMethod，将 id 传递给代码隐藏，创建新查询并通过 ajax 获取返回的所需信息。这工作得很好。

在我添加这个模态功能之前（这意味着每个 tr-tag 都变成了一个 id。并且每个第一个 td 标记都是模态的链接），使用以下 JavaScript 代码，表格在每一列中都是可排序的，有一个分页、功能齐全的搜索字段等

<script type="text/javascript">
    $(document).ready(function () {
        $('#MyTable').DataTable({
            "paging": true,
            "lengthChange": true,
            "searching": true,
            "ordering": true,
            "info": true,
            "autoWidth": false
        });
    });
</script>

但是现在 DataTable 的所有功能都消失了，不存在了。是否有可能通过保持表格现在的状态（使用 tr 标签属性和 td 标签属性）再次获得它们？ 如果是，我该怎么做？

提前致谢！

Answer 1

您需要有适当的表格格式才能应用 DataTables 的功能。您的表中应该有一个 <thead> 和 <tbody> 标记，在您的情况下这是缺失的。
这是您的代码，我稍作修改，现在可以正常工作了

<table id="MyTable">
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>

    <tbody>
        <tr data-id="154789">
    <td href="#infoModal" id="openBtn" data-toggle="modal" class="modal-dialog modal-lg" onclick="GetModalDetails()" aria-hidden="true">154789</td>
    <td>Testproject X</td>
    <td>Good</td>
    <td>greencolored</td>
    <td>01.01.2015</td>
</tr>
<tr data-id="189365">
    <td href="#infoModal" id="openBtn" data-toggle="modal" class="modal-dialog modal-lg" onclick="GetModalDetails()" aria-hidden="true">189365</td>
    <td>Testproject B</td>
    <td>Good</td>
    <td>redcolored</td>
    <td>08.01.2015</td>
</tr>
<tr data-id="136471">
    <td href="#infoModal" id="openBtn" data-toggle="modal" class="modal-dialog modal-lg" onclick="GetModalDetails()" aria-hidden="true">136471</td>
    <td>Testproject Y</td>
    <td>Bad</td>
    <td>pinkcolored</td>
    <td>15.04.2015</td>
</tr>
    </tbody>
</table>

我使用了您已经编写的相同 JavaScript。希望这对你有用。