Question

我使用的是bootstrap管理预设主题，但是他们的表功能有问题。以前，该表将在右上角显示搜索功能，允许您按行对表进行排序。我为表中的每个条目添加了一个新的表行，它破坏了这个功能。它与第二行的“隐藏”或“显示”无关，而只是为每个条目添加第二行。我进行了简短的浏览，并认为它与搜索试图运行的表格的每一行中的元素数量有关，并且存在不匹配。即使在我的表中添加第二行之后，还有什么方法可以实现搜索/排序吗？代码如下：

 <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>Session Name</th>
                                <th>Provider</th>
                                <th>Status</th>
                                <th>Pricing Type</th>
                                <th>Subscription Type</th>
                                <th>JIRA Number</th>
                                <th>Accept Port</th>
                                <th>IP Addresses</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th>Session Name</th>
                                <th>Provider</th>
                                <th>Status</th>
                                <th>Pricing Type</th>
                                <th>Subscription Type</th>
                                <th>JIRA Number</th>
                                <th>Accept Port</th>
                                <th>IP Addresses</th>
                            </tr>
                        </tfoot>
                    <tbody>
                        {% for item in session_details %}
                        <tr onclick = "rowClick(this)">
                            <td>{{ item.session_name }}</td>
                            <td>{{ item.client_name }}</td>
                            <td>{{ item.current_status }}</td>
                            <td>{{ item.pricing_type }}</td>
                            <td>{{ item.subscription_type }}</td>
                            <td>{{ item.jira }}</td>
                            <td>{{ item.accept }}</td>
                            <td>
                                {% for ips in item.IP_Addresses %}
                                    <li>{{ ips.ip_addr }}</li>
                                {% endfor %}
                            </td>
                        </tr>
                        <tr bgcolor="#f8f9fa">
                            <td colspan="8">
                                {% for notes in item.Notes %}
                                <p><b>Note: </b>"{{ notes.note }}"</p><p><small><strong> Time of entry: </strong><i>{{notes.time_now}}</i></small></p>
                                {% endfor %}
                                </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                    </table>

                   <script>
                    function rowClick(x)
                    {
                        var content = $(x).text().split('\n')[1];
                        console.log(content);

                    }
                    </script>

                    <script>
                    $( document ).ready(function()
                        {
                            console.log("ready!");
                            $("td[colspan=8]").find("p").hide();
                            $("table").click(function(event) {
                                event.stopPropagation();
                                var $target = $(event.target);
                                if ( $target.closest("td").attr("colspan") > 1 )
                                {
                                    $target.slideUp();
                                } else
                                {
                                    $target.closest("tr").next().find("p").slideToggle();
                                }
                            });
                        });
                    </script>
                </div>

开发者控制台中生成的错误消息：

未捕获的TypeError：无法设置未定义的属性'_DT_CellIndex'

Answer 1

$ .Click（）是一个不能与新元素一起使用的函数。它在文档准备好时初始化。

要使用动态元素单击功能，请使用函数$ .on（'click'，（）=＆gt; {}）http://api.jquery.com/on/

在向表添加新内容后，搜索/排序功能已经中断

1 个答案: