JQuery Mobile in Hindi Tables

First Page
Next Page

jQuery Mobile के सभी Widgets को Developing के दौरान Hand में हुए Devices का छोटा आकार सबसे महत्वपूर्ण Economic हैं. Table Widget के लिए भी यह बहुत सही है.

बड़ी संख्या में Rows और Columns वाले Table के रूप को बदलकर और CSS Media Queries का उपयोग करके Padding और Margin जैसी अन्य CSS Feature को बहुत आच्छे तरह से प्रदर्शित नहीं किया जा सकता है.

jQuery Mobile उपयोगकर्ताओं को Responsive Tables बनाने के लिए दो Options Provide कराता है.

Reflow

Reflow Responsive Table को बनाने के लिये Table Element में एक data-role="table" के साथ एक Table की आवश्यकता होती है. आप अपनी Table में Thead और Tbody Elements को Add कर सकते हो क्योंकि Reflow Default होने के कारण data-mode Attribute को Set करने की कोई आवश्यकता नहीं होती है.

Column Toggle Table

जब हम Data Displaying करने के लिए उसकी Width Minimum होती है तब Mode Column Toggle को Hide करता है.

jQuery Mobile Columns को Hide करता है Table के Right Side से.

Table को बनाने के लिये एक Column Toggle में data-mode="columntoggle" <table> Element को जोड़ते है.

For Example

<!DOCTYPE html> 
<html>
   <head>
      <meta charset="UTF-8">
      <title>Table Example</title>
      <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1" />
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
      <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
      <link rel="stylesheet" type="text/css" href="file:///D:/SPLessons/SPLessonsUploads/jQueryMobile/12/Tables/styles/style.css">
   </head> 
   <body> 
      <table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow"
      data-column-btn-text="Click here!" id="mytable">
         <thead>
            <tr>
               <th data-priority="6">Employee ID</th>
               <th>Employee Name</th>
               <th data-priority="1">Employee Email-ID</th>
               <th data-priority="3">Employee Phone Number</th>
               <th data-priority="4">Employee Country</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Ed01</td>
               <td>Johe B</td>
               <td>johe@gmail.com</td>
               <td>086501792**</td>
               <td>US</td>
            </tr>
            <tr>
               <td>Ed02</td>
               <td>Lewis</td>
               <td>lewis@gmail.com</td>
               <td>889981****</td>
               <td>Germany</td>
            </tr>
            <tr>
               <td>Ed03</td>
               <td>Krish</td>
               <td>krishna@gmail.com</td>
               <td>08999586*</td>
               <td>UK</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

Output

First Page
Next Page