Multiple DataTables on same .aspx webform are not formatted correctly

LLahman

I have read the rules for submission and I am going to violate them upfront. I do not have a way of providing public access to a test case and this is a complex issue that I am not certain that I could re-produce it elsewhere. I would like to describe the issue and see if it "strikes a chord" with anyone in terms of what possible things I could begin further debugging with.

THE ISSUE:
I have a webform .aspx page with multiple DataTables on it.

These DataTables are defined exactly the same (except for search field, names, etc.) and populated exactly the same (as Literals populated by the code behind).

All of the DataTables are displayed with correct columns, headers, data values, etc. But the export buttons, lines/page combo box, search textbox, count of entries and any paging controls are not displayed at all.

However, if I move one of the DataTables to a webforms usercontrol and display it on the same webpage but as a usercontrol, all displayable items are shown (columns, headers, contents, export buttons, line/page combo box, search textbox, etc. without any change in the definition.

The list of libraries utilized (in the sequence shown) are attached in the IntializationLibraries
It should be noted that the second set of scripts are also loaded separately in the usercontrol version of the DataTable.

I should also add that of the individual DataTables (regardless of hard-coded in the html or the usercontrol version) are positioned on the webpage inside separate asp:Panel controls to allow for visibility on/off during execution and some are not. Whether or not they are contained within a panel does not seem to affect display whatsoever.

=================================================================

The definitions of two of these DataTables that do not display correctly are also inlcuded in the DATATABLES LIBRARIES INITIALIZATION.txt file that is attached.

========================================================================
The code used to define placement within the HTML is:

                                            <asp:Panel ID="Panel62" runat="server">
                                                <br />
                                                <h3>
                                                    Scheduled Closing Activities
                                                </h3>
                                                <br />
                                                <div class="rcorners1">
                                                    <div class="row">
                                                        <div class="col-md-12" >
                                                            <asp:Literal ID="Literal6" runat="server"></asp:Literal>
                                                            <asp:HiddenField ID="saveSrch6" Value="" runat="server" />
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-md-12" style="text-align: center;" >
                                                            <asp:Button CssClass="btn-THDi"  ID="CreateNewActivity" runat="server" Text="Create New" CausesValidation="False" ToolTip="Displays a form for adding a new Activity to the database for the specified Contract." UseSubmitBehavior="True" OnClientClick="SetNewButton6();return false;" />
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-12" style="text-align: center;">
                                                            <asp:Label ID="Label31" runat="server" Font-Bold="True" ForeColor="#C00000" Width="95%"></asp:Label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </asp:Panel>

==========================================================================

The code used to populate one of the DataTables is:

    private void BuildActivityDataTable()
    {
        DataTable dt = new DataTable();
        StringBuilder stringBuilder = new StringBuilder();

        stringBuilder.Append("<table id='TableId6' class='display responsive nowrap' cellspacing='0' width='100%' >");
        stringBuilder.Append("<thead>");
        stringBuilder.Append("<tr>");

        stringBuilder.Append("<th>Edit?</th>");
        stringBuilder.Append("<th>Description</th>");
        stringBuilder.Append("<th>Date Due</th>");
        stringBuilder.Append("<th>Responsible</th>");
        stringBuilder.Append("<th>Date Completed</th>");
        stringBuilder.Append("<th>Complete?</th>");
        stringBuilder.Append("<th>Delete?</th>");
        stringBuilder.Append("</tr>");
        stringBuilder.Append("</thead>");
        stringBuilder.Append("<tbody>");

        dt = GetActivityDataTable();
        string sKey = "";
        string sCount = "";
        int iCount = 0;
        string sFlag = "";
        foreach (DataRow row in dt.Rows)
        {
            stringBuilder.Append("<tr>");

            sKey =  System.Convert.ToString(row["ContractAct"]);
            sCount = iCount.ToString();
            stringBuilder.Append("<td>");
            stringBuilder.Append("<a href='javascript: EditMe6(" + sKey + "," + sCount + ");' ><img border='0' alt='View' src='../icons/pencil_16.png' /></a>");
            stringBuilder.Append("</td>");

            stringBuilder.Append("<td>");
            stringBuilder.Append((string)row["ContractActDescription"]);
            stringBuilder.Append("</td>");

            stringBuilder.Append("<td>");
            if (row["ContractActDateDue"] != DBNull.Value && row["ContractActDateDue"] != null)
            {
                string sDate1 =  System.Convert.ToDateTime(row["ContractActDateDue"]).ToString("MM/dd/yyyy");
                stringBuilder.Append(sDate1);
            }
            else
            {
                stringBuilder.Append(" ");
            }
            stringBuilder.Append("</td>");

            stringBuilder.Append("<td>");
            stringBuilder.Append((string)row["ContractActResponsibility"]);
            stringBuilder.Append("</td>");

            stringBuilder.Append("<td>");
            if (row["ContractActDateCompleted"] != DBNull.Value && row["ContractActDateCompleted"] != null)
            {
                string sDate1 =  System.Convert.ToDateTime(row["ContractActDateCompleted"]).ToString("MM/dd/yyyy hh:mm tt");
                stringBuilder.Append(sDate1);
            }
            else
            {
                stringBuilder.Append(" ");
            }
            stringBuilder.Append("</td>");

            string sDesc = (string)row["ContractActDescription"];
            stringBuilder.Append("<td>");
            if (row["ContractActDateCompleted"] == DBNull.Value || row["ContractActDateCompleted"] == null)
            {
                stringBuilder.Append("<a href='javascript: CompleteMe6(" + sKey + ",0,\"" + sDesc + "\")'; ><img border='0' alt='Complete' src='../icons/taskcomp2.gif' /></a>");
            }
            else
            {
                stringBuilder.Append(" ");
            }
            stringBuilder.Append("</td>");

            stringBuilder.Append("<td>");
            stringBuilder.Append("<a href='javascript: DeleteMe6(" + sKey + ",0,\"" + sDesc + "\")'; ><img border='0' alt='Delete' src='../icons/delete16.png' /></a>");
            stringBuilder.Append("</td>");

            stringBuilder.Append("</tr>");
            iCount++;
        }
        dt.Clear();
        dt.Dispose();

        stringBuilder.Append("</tbody>");
        stringBuilder.Append("</table>");
        Literal6.Text = stringBuilder.ToString();
    }

===============================================================

The images of these DataTables are attached as IncorrectDataTable1 and incorrectDataTable2. The image of one of the working DataTables displayed from a usercontrol that displays correctly is attached correctDataTable.

I realize I have not provided all of the information/test-able case that you request. To me this seems like some kind of "separate container required" to separate DataTables in order to utilize the export buttons, search textbox, etc. But I also recognize that something I may have done/not done may contribute to the issues I am having.

I am just hoping that this problem description if familiar to you and that you can kind point me in the correct direction.

Thanks!

Lynn

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

allan

Hi Lynn,

Can you show us the rendered HTML for your page?

But the export buttons, lines/page combo box, search textbox, count of entries and any paging controls are not displayed at all.

As you'll be able to see in this example having multiple DataTables per page is valid. So there must be something going wrong on your page. Possibly they don't have unique ids? Or the initialisation isn't picking them out? We'd need more information I'm afraid.

Allan