Added a tabbed layout for the device list UI

merge-requests/7/head
Dulitha Wijewantha 10 years ago
parent cbec06cd35
commit 9fc79868aa

@ -14,25 +14,43 @@ var title="WSO2 CDM";
<div class="row"> <div class="row">
<div class="col-sm-9 main col-centered"> <div class="col-sm-9 main col-centered">
<h2 class="sub-header">Devices list</h2> <h2 class="sub-header">Devices list</h2>
<!--
<div class="row"> <div class="row">
<div class="col-md-1"><button type="button" class="btn btn-primary">Execute</button></div> <div class="col-md-1"><button type="button" class="btn btn-primary">Execute</button></div>
</div> </div>
<div class="table-responsive"> -->
<table id="table-pagination" data-toggle="table" data-url="data2.json" data-query-params="queryParams" data-height="400" data-pagination="true" data-search="true"> <div role="devicepanel">
<thead>
<tr> <!-- Nav tabs -->
<th data-field="state" data-checkbox="true"></th> <ul class="nav nav-tabs" role="tablist">
<th data-field="identifier" data-align="right" data-sortable="true" data-formatter="identifierFormatter">Identifier</th> <li role="presentation" class="active"><a href="#mobile" aria-controls="home" role="tab" data-toggle="tab">Mobile</a></li>
<th data-field="name" data-align="center" data-sortable="true">Name</th> <li role="presentation"><a href="#raspberrypi" aria-controls="profile" role="tab" data-toggle="tab">RaspberryPi</a></li>
<th data-field="owner" data-align="center" data-sortable="true">Owner</th> </ul>
<th data-field="ownership" data-align="center" data-sortable="true">Ownership</th>
<th data-field="deviceType" data-align="center" data-sortable="true">Device Type</th> <!-- Tab panes -->
<th data-field="vendor" data-align="center" data-sortable="true">Vendor</th> <div class="tab-content">
<th data-field="model" data-align="center" data-sortable="true">Model</th> <div role="devicepanel" class="tab-pane active" id="mobile">
<th data-field="osVersion" data-align="center" data-sortable="true">OS Version</th> <div class="table-responsive">
</tr> <table id="table-pagination" data-toggle="table" data-url="data2.json" data-query-params="queryParams" data-height="400" data-pagination="true" data-search="true">
</thead> <thead>
</table> <tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="identifier" data-align="right" data-sortable="true" data-formatter="identifierFormatter">Identifier</th>
<th data-field="name" data-align="center" data-sortable="true">Name</th>
<th data-field="owner" data-align="center" data-sortable="true">Owner</th>
<th data-field="ownership" data-align="center" data-sortable="true">Ownership</th>
<th data-field="deviceTypeId" data-align="center" data-sortable="true">Device Type</th>
<th data-field="vendor" data-align="center" data-sortable="true">Vendor</th>
<th data-field="model" data-align="center" data-sortable="true">Model</th>
<th data-field="osVersion" data-align="center" data-sortable="true">OS Version</th>
</tr>
</thead>
</table>
</div>
</div>
<div role="devicepanel" class="tab-pane" id="raspberrypi">sdfweroiweuroi</div>
</div>
</div> </div>
</div> </div>
</div> </div>

Loading…
Cancel
Save