Question

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

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

所以我点了一个colum，当你点击它时，将打开一个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。希望这对你有用。

HTML JQuery DataTable：功能不再可用

1 个答案: