Styling issue in ASPX page

Question

I have an ASPX page that is suppose to output 5 instances of one custom control (basically a table with data grabbed from a database). I am relatively new to ASP.NET as well as JavaScript, so I am having some difficulty fixing this styling issue.

My problem is that, styling on the custom control (the table) is only being applied to the first instance of the control. I am not sure why that is. I have put my code up (I renamed a lot of things to keep this generic). How would I go about making the styling apply to all 5 instances?

<%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=XXXXXXXXXXXXXX" Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register TagPrefix="company" TagName="Control3" Src="~/Common/Controls/Control3.ascx" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link type="text/css" rel="stylesheet" href="<%=ResolveUrl("~/Project/Css/Dashboard.css") %>" />
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <div id="dashboardContent">

        <div id="id1">

            <%-- ID1 --%>
            <div class="roundedTop">
                <asp:Label ID="lblID1" runat="server" CssClass="InputHeader" meta:resourcekey="lblID1" />
            </div>

            <div class="roundedMain"><!--<![endif]-->

                <company:Control3 ID="control3First" runat="server" meta:resourcekey="control3First"
                    Filter="" />
            </div>
        </div>

        <div id="id2">

            <%-- ID2 --%>
            <div class="roundedTop">
                <asp:Label ID="lblID2" runat="server" CssClass="InputHeader" meta:resourcekey="lblID2" />
            </div>

            <div class="roundedMain"><!--<![endif]-->

                <company:Control3 ID="control3Second" runat="server" meta:resourcekey="control3Second"
                    Filter="" />
            </div>
        </div>

        <div id="id3">

            <%-- ID3 --%>
            <div class="roundedTop">
                <asp:Label ID="lblID3" runat="server" CssClass="InputHeader" meta:resourcekey="lblID3" />
            </div>

            <div class="roundedMain"><!--<![endif]-->

                <company:Control3 ID="control3Third" runat="server" meta:resourcekey="control3Third"
                    Filter="" />
            </div>
        </div>

        <div id="id4">

            <%-- ID4 --%>
            <div class="roundedTop">
                <asp:Label ID="lblID4" runat="server" CssClass="InputHeader" meta:resourcekey="lblID4" />
            </div>

            <div class="roundedMain"><!--<![endif]-->

                <company:Control3 ID="control3Forth" runat="server" meta:resourcekey="control3Forth"
                    Filter="" />
            </div>
        </div>

        <div id="id5">

            <%-- ID5 --%>
            <div class="roundedTop">
                <asp:Label ID="lblID5" runat="server" CssClass="InputHeader" meta:resourcekey="lblID5" />
            </div>

            <div class="roundedMain"><!--<![endif]-->

                <company:Control3 ID="control3Fifth" runat="server" meta:resourcekey="control3Fifth"
                    Filter="" />
            </div>
        </div>

    </div>

    <asp:Timer ID="tUpdateTimer" runat="server" ontick="tUpdateTimer_Tick"></asp:Timer>

    <asp:UpdatePanel ID="upTimer" runat="server" UpdateMode="Conditional">
        <ContentTemplate />
        <Triggers><asp:AsyncPostBackTrigger ControlID="tUpdateTimer" EventName="Tick" /></Triggers>
    </asp:UpdatePanel>

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="JavascriptContent" runat="server">

    <script type="text/javascript">

        var tblSomething = null;
        var tblHostConnection = null;

        function pageLoad(sender, args) {
            attachDataTablesToSomethingTable();
            attachDataTablesToHostConnectionTable();
        }

        function attachDataTablesToSomethingTable() {
            tblSomething = $('#tblSomething').dataTable({
                "bRetrieve": true,
                "bServerSide": false,
                "bPaginate": false,
                "bFilter": false,
                "bSort": false,
                "bJQueryUI": true,
                "sScrollY": "230px",
                "sScrollX": "100%",
                "oLanguage": {
                    "sEmptyTable": '<%= GetLocalResourceObject("tblSomething.Empty").ToString() %>',
                    "sProcessing": '<img id="imgAnim" src="<%= ResolveUrl(Resources.SiteIcons.Loader) %>" />',
                    "sInfo":
                                '<%= GetLocalResourceObject("sInfo.Showing").ToString() %>' + ' _START_ ' +
                                '<%= GetLocalResourceObject("sInfo.to").ToString() %>' + ' _END_ ' +
                                '<%= GetLocalResourceObject("sInfo.of").ToString() %>' + ' _TOTAL_ ' +
                                '<%= GetLocalResourceObject("sInfo.entries").ToString() %>'
                }
            });
        }

        function attachDataTablesToHostConnectionTable() {
            tblHostConnection = $('#tblHostConnection').dataTable({
                "bRetrieve": true,
                "bServerSide": false,
                "bPaginate": false,
                "bFilter": false,
                "bSort": false,
                "bJQueryUI": true,
                "sScrollY": "100%",
                "sScrollX": "100%",
                "oLanguage": {
                    "sEmptyTable": '<%= GetLocalResourceObject("tblHostConnection.Empty").ToString() %>',
                    "sProcessing": '<img id="imgAnim" src="<%= ResolveUrl(Resources.SiteIcons.Loader) %>" />',
                    "sInfo": ''
                }
            });
        }

    </script>

</asp:Content>

From a bit of playing around, if I commented out attachDataTablesToSomethingTable() from the JavaScript call at the bottom, then no styling was applied to any table, so I assume that is the function that applies/calls the styling. Again, I am inexperienced with ASP.NET and JavaScript, so if anyone could shed any light, that would be awesome.

Answer 1

I'll agree with @lucuma's comment to your question. So, I may suggest you to implement unique id for table of each custom control instance. This can be achieved by implementing a public property say 'TableID' in your custom control, which can be configured for each custom control instance.

The below parts go into user custom control implementation:

Code behind:

public string TableID
{
   get;
   set;
}

Markup:

<table id='<%=TableID %>'>

Configure the TableID property for each custom control instance in aspx page:

<company:Control3 ID="control3First" runat="server" meta:resourcekey="control3First" Filter=""
TableID='mytable1' />

<company:Control3 ID="control3Second" runat="server" meta:resourcekey="control3Second" Filter=""
TableID='mytable2' />

And finally, wire up jquery plug-in for each table...

mytable1 = $('#mytable1').dataTable(...);
mytable2 = $('#mytable2').dataTable(...);

Hope this helps...