c# - Asp.Net 中的 jQuery 数据表

Question

我在 2 个不同的菜单选项卡中有 2 个 jquery 数据表。当我附加第一个数据表（id = gvSchedule）时，它工作正常。一旦我附加第二个数据表（id=gvMySchedule），它就会失去格式，我看不到分页或 jquery 数据表搜索选项。我确定问题出在第二个 JavaScript 上，但我没有成功修复它。

这就是我所拥有的：

HTML：

<div id="tabe-1" class="tab-pane active">
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <asp:GridView ID="gvSchedule" runat="server" AutoGenerateColumns="false" class="table table-bordered" ClientIDMode="Static">
                    <Columns>
                        <asp:BoundField DataField="CenterName" HeaderText="CenterName" SortExpression="CenterName" />
                        <asp:BoundField DataField="FirstName" HeaderText="Resource" SortExpression="FirstName" />
                        <asp:BoundField DataField="Date" HeaderText="Date" DataFormatString="{0:dd/MMM/yyyy}" SortExpression="Date" />
                        <asp:BoundField DataField="StartTime" HeaderText="StartTime" SortExpression="StartTime" />
                        <asp:BoundField DataField="EndTime" HeaderText="EndTime" SortExpression="EndTime" />
                        <asp:BoundField DataField="EventDescription" HeaderText="Event" SortExpression="EventDescription" />
                        <asp:TemplateField HeaderText="Action">
                            <ItemTemplate>
                                <asp:Button ID="Button1" runat="server" Text="View Notes" />
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
            </div>
        </div>
    </div>
</div>



<!--The problem occurs for this grid-->


<div id="tabe-2" class="tab-pane fade">
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <asp:GridView ID="gvMySchedule" runat="server" AutoGenerateColumns="false" class="table table-bordered" ClientIDMode="Static">
                    <Columns>
                        <asp:BoundField DataField="CenterName" HeaderText="CenterName" SortExpression="CenterName" />
                        <asp:BoundField DataField="FirstName" HeaderText="Resource" SortExpression="FirstName" />
                        <asp:BoundField DataField="Date" HeaderText="Date" DataFormatString="{0:dd/MMM/yyyy}" SortExpression="Date" />
                        <asp:BoundField DataField="StartTime" HeaderText="StartTime" SortExpression="StartTime" />
                        <asp:BoundField DataField="EndTime" HeaderText="EndTime" SortExpression="EndTime" />
                        <asp:BoundField DataField="EventDescription" HeaderText="Event" SortExpression="EventDescription" />
                        <asp:TemplateField HeaderText="Action">
                            <ItemTemplate>
                                <asp:Button ID="Button2" runat="server" Text="View Notes" />
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
            </div>
        </div>
    </div>
</div>

JS：

<script type="text/javascript">
    $(function () {
        $('[id*=gvSchedule]').prepend($("<thead style=background-color:#ff974d></thead>").append($(this).find("tr:first"))).DataTable({
            "responsive": true,
            "sPaginationType": "full_numbers"
        });

    });
</script>

<script type="text/javascript">
    $(function () {
        $('[id*=gvMySchedule]').prepend($("<thead style=background-color:#ff974d></thead>").append($(this).find("tr:first"))).DataTable({
            "responsive": true,
            "sPaginationType": "full_numbers"
        });

    });
</script>

请协助我如何解决问题。谢谢。

标签： c#jqueryhtmlasp.net

Answer 1

我已经设法通过使用下面的脚本而不是问题中显示的 2 个 JS 脚本来解决问题。如果有人有更好的解决方案，请告诉我

<script type="text/javascript">
    $("document").ready(function () {
        $('table').each(function () {
            $(this).prepend($("<thead style=background-color:#ff974d></thead>").append($(this).find("tr:eq(0)"))).DataTable({
                "responsive": true,
                "sPaginationType": "full_numbers"
            });
        })
    });
</script>