Quantcast
Channel: DataTables 1.9 — DataTables forums
Viewing all articles
Browse latest Browse all 1816

Datatables with Handlebars and how to make one with detail rows

$
0
0
Allan, I'm back, but oh, so close....


        <table id="alertTable" class="dataTable table-striped table-bordered table-condensed" data-pagination-records="4" data-pagination-bottom="true">
            <thead>
                <tr id="rowHead">
                    <th width="5%" class="sorting_disabled"><i id="cbxMaster" style="text-align:center;" class="icon-check-empty center pointerCursor" title="Click here to check/uncheck all the boxes below." onclick="changeIcon(this.id); checkAlerts('all');"></i></th>
                    <th width="3%">SV</th>
                    <th width="4%">Type</th>
                    <th width="10%">Network</th>
                    <th width="10%">Site</th>
                    <th width="10%">Host</th>
                    <th width="8%">Type</th>
                    <th width="39%">Error: Short Description</th>
                    <th width="17%">Date/Time</th>
                </tr>
            </thead>
            <tbody>
                {{#each alertRow}}
                    <tr id="alertRow" data-idval="{{id}}" data-type="{{alertType}}" data-alert="{{alertLevel}}" data-toggle="collapse" data-target="#data{{id}}" class="accordion-toggle GradeA" style="background-color: {{setRowColor @index}}">
                        <td width="5%" id="alertLevel" onclick="cancelIt(event);" data-alert-id="{{id}}" data-alert-type="{{alertLevel}}" style="text-align:center; background-color:{{setCellColor alertLevel}}"><i id="dataCbx{{id}}" style="text-align:center;" class="icon-check-empty center pointerCursor" title="Click here to check/uncheck the box.  This will indicate you want to CLEAR this alert from the list. Click on another part of the row to expand collapse without affecting the checkbox" onclick="changeIcon(this.id); checkAlerts(this.id);"></i></td>
                        <td style="text-align: center;" id="svVal">{{getSVValue alertLevel}}</td>
                        <td style="text-align: center;">{{abbrAType alertType}}</td>
                        <td style="text-align: center;">{{#if network}}{{network}}{{else}}NA{{/if}}</td>
                        <td style="text-align: center;">{{#if site}}{{site}}{{else}}NA{{/if}}</td>
                        <td style="text-align: center;">{{#if resource}}{{resource}}{{else}}NA{{/if}}</td>
                        <td style="text-align: center;">{{#if component}}{{component}}{{else}}NA{{/if}}</td>
                        {{#if shortMessage}}
                            <td width="30%" style="color: {{changeLvlColor alertLevel}}; font-weight: bolder;">{{shortMessage}}</td>
                        {{else}}
                            <td width="30%">No Message Available</td>
                        {{/if}}        
                        <td width="20%">{{stripOutTimeDate alertTime}}</td>
                    </tr>
                    <tr style="background-color: white;">
                        <td id="alertDetails" colspan="9" class="hiddenRow">
                          <div id="data{{id}}" class="accordion-body collapse innerTableCollapse">
                            <div class="row">
                                <div class="span12" style="margin-left: 75px;">
                                    <div style="float: left;"><h4>Server Name:&nbsp;{{getResNets @index "name" "nets" networkId}}</h4></div><br><br>
                                    <div style="float: left;"><h4>Status:&nbsp;<span style="color: {{changeLvlColor alertLevel}}; font-weight: bold;">{{alertLevel}}</span></h4></div>
                                        <div style="clear: both;"></div>
                                    <div style="float: left;"><strong>Issue Description:</strong><span style="color: {{changeLvlColor alertLevel}}; font-weight: bolder;">&nbsp;{{shortMessage}}</span></div><br>
                                    <div style="float: left; width: 50%; word-wrap:break-word;"><strong>Alert Details:</strong>&nbsp;{{longMessage}}</div><br>
                                    <div style="float: left;"><strong>Status:</strong>&nbsp;{{status}}</div><br>
                                    <hr />  
                                </div>
                                <div class="span10" style="float: left; margin-left: 45px;">
                                    <div class="span3" style="float: left; margin-left: 0px; width: 400px;">
                                        <div class="span6">
                                            <div style="float: left;"><strong>Resource Type:</strong>&nbsp;{{getResNets @index "name" "res" resourceId}}</div><br>
                                            <div style="float: left;"><strong>Host Name:</strong>&nbsp;{{getResNets @index "hostname" "res" resourceId}}</div><br>
                                            <div style="float: left;"><strong>Server IP:</strong>&nbsp;{{getResNets @index "hostip" "res" resourceId}}</div><br>
                                            <div style="float: left;"><strong>Hardware Type:</strong>&nbsp;{{getResNets @index "resourcetype" "res" resourceId}}</div><br>
                                            <div style="float: left;"><strong>Deployed:</strong>&nbsp; {{getResNets @index "datedeployed" "res" resourceId}}</div>
                                        </div>
                                     </div>
                                     <div class="span3" style="float: left; width: 400px; margin-right: 5px;">
                                        <div class="span6">
                                            <div style="float: left;"><strong><u>Network Interface</u></strong></div><br>
                                            <div style="float: left;"><strong>Ingress:</strong>&nbsp;{{getResNets @index "ingressip" "res" resourceId}}</div><br>
                                            <div style="float: left;"><strong>Egress:</strong>&nbsp;{{getResNets @index "egressip" "res" resourceId}}</div><br>
                                            <div style="float: left;"><strong>C&amp;C:</strong>&nbsp;{{getResNets @index "candc" "res" resourceId}}</div><br>
                                            <div style="float: left;"><strong>IPMI:</strong>&nbsp;{{getResNets @index "ipmi" "res" resourceId}}</div>
                                        </div>
                                     </div>   
                                </div>         
                                        <div style="clear: both;">&nbsp;</div>
                                <div class="span10" style="float: left;">
                                    <div class="span3" style="float: left; margin-left: 12px !important; width: 200px;">
                                        <p class="pull-left"><strong><a href="javascript:void(0);" onclick="displayDetCmts({{#if comments}}{{comments}}{{else}}'No comments at this time…'{{/if}})">Click for Comments</a></strong></p>
                                    </div>
                                    <p>ALERT ID: {{id}}</p>
                                    <!-- UNCOMMENT out at a later date
                                    <div class="span3" style="float: right; width: 400px; margin-right: 110px;">
                                        <h4><strong>Notes</strong></h4>
                                        <p>04:52:32 - 08262013 - Entered by: Jason Admin<br><strong>Jane Jones is researching the situation</strong></p>
                                    </div> 
                                    -->
                                </div>
                            </div>        
                          </div>  
                        </td>
                    </tr>
                 {{/each}}
             </tbody>
        </table>



That's my table. NOTICE I details row....<td id="alertDetails" colspan="9" class="hiddenRow">...starts there...

Viewing all articles
Browse latest Browse all 1816

Trending Articles