web-dev-qa-db-ja.com

DataTableがネストされたリピーターとBootstrap

DataTablesとNested Repeaterで問題が発生しました。基本的には、一致するtr tdタグが正しく取得されていないということです。

それでも、以下のリンクからネストされたリピーターのチュートリアルをたどって、HTMLが正しく形成されていることを確認しました。DOMを確認すると、すべてが問題ないようです。テーブルは通常のテーブルのように見えますが、Datatbleを初期化すると、テーブルが壊れる理由がわかりません。

ネストされたRepearterチュートリアルの例を表示するには、ここをクリックしてください 。

見えますしかし、DataTable（#TeamDashboard）を初期化すると、次のエラーが発生します。

不明なTypeError：未定義のプロパティ '_DT_CellIndex'を設定できません


 jquery.dataTables.min.js？v = 6754017259857097728：24 

<asp:Repeater ID="rptTeamPlayers" runat="server" OnItemDataBound="rptTeamPlayers_ItemDataBound">               
    <HeaderTemplate>
        <table id="TeamDashboard" class="table table-striped table-condensed marginBottom30 resultTeams" cellspacing="0" rules="all" border="1">
            <thead>
                <tr>
                    <th class="col-xs-1 col-sm-1 col-md-1 setColumnPlusMinus"></th>
                    <th class="col-xs-2 col-sm-2 col-md-2">Name</th>
                    <th class="col-xs-1 col-sm-1 col-md-1">Status</th>
                    <th class="col-xs-3 col-sm-3 col-md-3"></th>
                    <th class="col-xs-3 col-sm-3 col-md-3">Positions</th>
                    <th class="col-xs-1 col-sm-1 col-md-1"></th>
                    <th class="col-xs-1 col-sm-1 col-md-1 text-center">Action</th>
                </tr>
            </thead>
            <tbody class="searchable">                                                           
    </HeaderTemplate>
<ItemTemplate>
<tr role="row" class="odd shown regularRow">

        <asp:Panel ID="pnlPlayerDetails" runat="server" >
            <asp:Repeater ID="rptPlayerDetails" runat="server" ClientIDMode="Static">
                <ItemTemplate>
                    <%--<table  cellspacing="0" border="0" class="table noPad selected2 closeMe">--%>
                        <tr class="table noPad selected2 closeMe newRow">
                            <td class="col-xs-1 col-sm-1 col-md-1 padLeft"><i class="glyphicon glyphicon-lock"></i> | <i class="glyphicon glyphicon-refresh"></i></td>
                            <td class="col-xs-2 col-sm-2 col-md-1"><%# DataBinder.Eval(Container.DataItem, "EventDate") %></td>
                            <td class="col-xs-1 col-sm-1 col-md-1"><%# DataBinder.Eval(Container.DataItem, "EventType") %></td>
                            <td class="col-xs-5 col-sm-5 col-md-5"><%# DataBinder.Eval(Container.DataItem, "EventName") %> <i class="fa fa-check-circle colorGreen"></i></td>
                            <td class="col-xs-4 col-sm-4 col-md-2 col2"></td>
                            <td></td>
                            <td class="col-xs-2 col-sm-2 col-md-2">
                                <!-- Split button -->
                                <div class="btn-group btn-block">
                                    <button type="button" class="btn btn-sm btn-default col-xs-9 col-md-10">Player Dashboard</button>
                                    <button type="button" class="btn btn-sm btn-default dropdown-toggle col-xs-3 col-md-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <ul class="dropdown-menu btn-block">
                                        <li class="NewEvent"><a href="#">New Event</a></li>

                                    </ul>
                                </div>
                            </td>

                        </tr>
                    <%--</table>--%>
                </ItemTemplate>
            </asp:Repeater>
            </asp:Panel>  
            <td class="details-control">
                <i class="glyphicon glyphicon-plus"></i>                                                                        
                <asp:HiddenField ID="hfPlayerId" runat="server" ClientIDMode="Static" Value='<%# DataBinder.Eval(Container.DataItem, "PlayerId") %>' />
            </td>

            <td class="sorting_1">
<%# DataBinder.Eval(Container.DataItem, "PlayerName") %></td>
            <td>
<div class='<%# DataBinder.Eval(Container.DataItem, "Status").ToString().Equals("Able")?"well green status":"well red status" %>'><%# DataBinder.Eval(Container.DataItem, "Status") %></div></td>
            <td></td>
            <td><%# DataBinder.Eval(Container.DataItem, "Position") %> </td>
            <td>
                <!-- Split button -->
                <div class="btn-group">
                    <button type="button" class="DIR btn btn-sm btn-default col-md-8"><a data-toggle="modal" href="ModalWindows/Daily_Injury_Report.aspx" data-target="#Daily_Injury_Report" class="openDIR">Open DIR</a></button>
                    <div type="button" class="DIR openDIR_icon btn-sm btn-default col-md-4 dropdown-toggle" >
                    <div class="text-center centerGlyphicon"><i class="fa fa-check-circle colorGreenTop" aria-hidden="true"></i></div>
                    </div>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                    </ul>
                </div>
            </td>
            <td>
                <!-- Split button -->
                <div class="btn-group btn-block">
                    <button type="button" class="btn btn-sm btn-default col-xs-9 col-md-10">Player Dashboard</button>
                    <button type="button" class="btn btn-sm btn-default dropdown-toggle col-xs-3 col-md-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu">
                        <li class="NewEvent"><a href="#">New Event</a></li>
                    </ul>
                </div>
            </td>       
        </tr>   


</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>

これは、DataTableを初期化するためのコードです。

var table = $('#TeamDashboard').DataTable({
"retrieve": true,
"bStateSave": true,
select: true,
"pagingType": "full_numbers",
"lengthMenu": [5, 10, 25, 50, 75, 100],
oLanguage: {
    sLengthMenu: "_MENU_",
},
"bAutoWidth": true,
"searching": false,
bFilter: true, // This Turns Off The Search Box
bInfo: true,
"order": [[2, "desc"]],
"dom": '<"top"i>rt<"bottom"flp><"clear">', 
"aoColumnDefs": [{ aTargets: [0], bSortable: false },
{ aTargets: [3], bSortable: false },
{ aTargets: [3], bSearchable: false },
{ aTargets: [2], bSearchable: false },
{ aTargets: [5], bSortable: false },
{ aTargets: [5], bSearchable: false,
{ aTargets: [5], bSearchable: false }]
});

誰かが私がどこが間違っているのか知っていますか？ JSを壊してしまうことを除いて、すべてが問題ないようです。

DataTableを初期化するとすぐに表示され、ページのJSが壊れます...

事前の感謝BMCC

jquerytwitter-bootstrapdatatablesnested-repeater
6
bmcc81

ヘッダー列の数の不一致がこの問題の原因です。ヘッダー列と行列の数は同じである必要があります。または、「aoColumns」または「aoColumnDefs」の不一致

14
user3397383

ColumnDefsの間違ったインデックスでこの問題が発生しました：

"columnDefs": [
        {  // set default column settings
            "orderable": false,
            "targets": [1, 2, 4]
        }
]

targetsは0から始まる列インデックスを指定することに注意してください。私の場合、5番目の列はありませんでしたが、4エラーを引き起こしていたインデックス。

5
Raghavendra N

設定されている列の数を確認してください... "aoColumns": [ null, null, { "sType": "uk_date" }, { "sType": "uk_date" }, null, null ]

2
Abin Abraham

私は同じ問題を抱えており、解決策は次のとおりです。テーブル内のデータをtbodyタグで送信し、theadタグに書き込む列を空にしないでください。

0
Mahmoud Abbas

開いている余分なタグがないことを確認する必要があります。このエラーは、タグの不一致がある場合に表示されます（例：<th><tr>または<td>。

0
Shubham Nayak