Wednesday 11 December 2013

TABLE Vs GRID VIEW in JQM

TABLE Vs GRID VIEW in JQM  - Report in multi col multi row based.

TABLE FULL CODE:
===================
  <table data-role="table" id="my-table" data-mode="reflow" style="width:100%;">
  <thead >
     <tr bgcolor="#0099FF" >
      <th>S.No</th>
      <th>Services</th>
      <th>Cost</th>
   
    </tr>
  </thead>
  <tbody>
   
    <tr bgcolor="#FFFFFF" >
      <th>1</th>
      <th> Registration</th>
   
      <th>$ 50</th>
     </tr>
   
     <tr bgcolor="#FFFFFF" >
      <th>2</th>
      <th>Consultation</th>
   
      <th>$ 100</th>
     </tr>
   
     <tr bgcolor="#FFFFFF" >
      <th>3</th>
      <th>X-Ray</th>
      <th>$ 150</th>
     
     </tr>
   
   
   
    </tbody>
</table>

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

GRID VIEW FULL CODE:
====================

<div class="ui-grid-b" style="align:center;width:100%;margin-top:50px;" id="medigrid">


      <div class="ui-block-a ui-bar-b" >S.No</div>
      <div class="ui-block-b ui-bar-b" >Particular</div>
      <div class="ui-block-c ui-bar-b">Amt</div>
     
     
     <div class="ui-block-a ui-bar-c">1</div>
      <div class="ui-block-b ui-bar-c">Doctor Consultant</div>
      <div class="ui-block-c ui-bar-c">$ 50</div>
     
      <div class="ui-block-a ui-bar-d">2</div>
      <div class="ui-block-b ui-bar-d">Specialist visit</div>
      <div class="ui-block-c ui-bar-d">$ 100</div>
     
       <div class="ui-block-a ui-bar-c">3</div>
      <div class="ui-block-b ui-bar-c">Lab test</div>
      <div class="ui-block-c ui-bar-c">$ 200</div>
     
     
      <div class="ui-block-a ui-bar-d">4</div>
      <div class="ui-block-b ui-bar-d">Medicine</div>
      <div class="ui-block-c ui-bar-d">$ 100</div>
         
      <div class="ui-block-a ui-bar-c">5</div>
      <div class="ui-block-b ui-bar-c">Bad charge</div>
      <div class="ui-block-c ui-bar-c">$ 100</div>
         
      <style>
      .ui-block-a,.ui-block-b,.ui-block-c,.ui-block-d
      {
      padding-top:5px;
      padding-bottom:5px;
   
      }
     
      </style>
     
</div>
----------------------------------------------------------------------------------------

No comments:

Post a Comment