การใช้ ตาราง table ใน jQuery Mobile ตอนที่ 7

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
jquery mobile

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery mobile

ดูแล้ว 8,442 ครั้ง




เนื้อหาตอนที่ 7 นี้ จะศึกษาเกี่ยวกับการใช้งาน ตารางใน jQuery Mobile 
โดยเริ่มที่ 
 
รู้จักกับ Column toggle 
 
Column toggle เป็นการกำหนด ให้เราสามารถที่จะเลือกแสดง หรือไม่แสดง คอลัมน์
ในตารางได้ รวมทั้งยังสามารถแสดง popup เลือกซ่อน หรือแสดง คอลัมน์ ในตารางได้
 
 
เริ่ม การสร้างตาราง และการใช้งาน ทดสอบจากเริ่มต้น 
 
เราจะสร้าง ตาราง 5 คอลัมน์ 10 แถว โดยใช้ php
สมมติเป็นรายการสินค้า หัวข้อมี ลำดับ ชื่อ วันที่ ราคา และ จำนวน
 
ตัวอย่าง
 
 
โค้ด
 
<!DOCTYPE html> 
<html>
<head>
	<title>ใส่ไตเติล ตามใจชอบ</title>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="js/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>    
</head>

<body>

<!-- Start of  page HOME  -->
<div data-role="page" id="page_home">

	<div data-role="header" data-position="fixed">
    	<a href="#left_panel" class="ui-btn ui-shadow ui-corner-all ui-icon-bars ui-btn-icon-notext">Bars</a>
		<h1>Home</h1>
        
        <div data-role="navbar" >  
            <ul>  
                <li><a href="#" class="ui-btn-active"  data-icon="heart">เมนู 1</a></li>  
                <li><a href="#" data-icon="calendar">เมนู 2</a></li>  
                <li><a href="#" data-icon="audio">เมนู 3</a></li>  
                <li><a href="#" data-icon="alert">เมนู 4</a></li>  
                <li><a href="#" data-icon="gear">เมนู 5</a></li>  
            </ul>  
        </div><!-- /navbar -->            
	</div><!-- /header -->

	<div data-role="content">

        <table>
            <thead>
                <tr>
                    <th># </th>
                    <th>ชื่อ</th>
                    <th>ราคา</th>
                    <th>ราคา</th>
                    <th>จำนวน</th>
                </tr>
            </thead>    
            <tbody>
                <?php for($i=1;$i<=10;$i++){ ?>
                <tr>
                    <td><?=$i?></td>
                    <td>สินค้ารายการที่ <?=$i?></td>
                    <td><?=date("d-m-Y")?> บาท </td>
                    <td><?=$i*100?> บาท </td>
                    <td><?=$i?> รายการ</td>
                </tr>   
                <?php  } ?> 
            </tbody>
        </table>

    
	</div><!-- /content -->
    
    <div data-role="panel" id="left_panel" data-display="push">
        <ul data-role="listview" data-icon="false"  data-divider-theme="a">
            <li data-role="list-divider">หัวข้อแบ่ง</li>
            <li><a href="#">เมนูที่ 1</a></li>
            <li><a href="#">เมนูที่ 2</a></li>
            <li><a href="#">เมนูที่ 3</a></li>
            <li><a href="#">เมนูที่ 4</a></li>            
            <li data-role="list-divider">หัวข้อแบ่ง</li>
            <li><a href="#">เมนูที่ 6</a></li>
            <li><a href="#">เมนูที่ 7</a></li>
        </ul>
    </div><!-- /panel -->        

	<div data-role="footer" data-position="fixed">
		<h4>ส่วน  footer ใส่ตามใจชอบ</h4>
	</div><!-- /footer -->

</div><!-- /page -->

</body>
</html>
 
จากโค้ดตาราง ด้านบน เราจะเพิ่มคุณสมบัติ column chooser ให้กับตาราง
โดยต้องกำหนด attributes 2 ค่า ได้แก่ 
 data-role="table"  และ data-mode="columntoggle" 
 
นอกจากนั้น เราควรกำหนด id ของ ตาราง เพื่อให้สัมพันธ์กับการใช้งาน 
ในการสร้าง popup เลือกแสดงคอลัมน์
 
ก็จะได้เป็น 
 
<table data-role="table" data-mode="columntoggle" id="my_table" >
 
ส่วนของ การซ่อน หรือแสดง คอลัมน์
 
ปกติ ถ้าไม่มีการกำหนดค่าใดๆ คอลัมน์ทั้งหมด จะแสดงปกติ
หากต้องซ่อนคอลัมน์ใด และให้แสดงใน popup เป็นตัวเลือกซ่อนหรือแสดง แทน ให้กำหนด
data-priority="1" ในส่วนของ th ของหัวข้อคอลัมน์ 
 
ตัวเลข 1 คือการกำหนด ความสำคัญในการแสดง ของคอลัมน์นั้น กรณีกำหนดตางเป็นแบบ
responsive หรือยืดหยุ่น ตามขนาดหน้าจอ 
โดยมีค่าตั้งแต่ 1 - 6 แสดงถึง ความสำคัญ มากสุด ไป น้อยสุด 
ซึ่งกรณีกำหนด ui-responsive จะอธิบายในลำดับต่อๆ ไป
 
สำหรับคอลัมน์ที่ไม่ได้กำหนด data-priority ก็จะแสดงในตาราง ตลอด และไม่แสดงใน
popup เลือก การซ่อน หรือแสดง คอลัมน์
 
 
โค้ด
 
            <thead>
                <tr>
                    <th># </th>
                    <th>ชื่อ</th>
                    <th data-priority="2">วันที่</th>
                    <th>ราคา</th>
                    <th data-priority="1">จำนวน</th>
                </tr>
            </thead>    
 
อธิบาย
 
คอลัมน์ที่ 1 2 และ 4 จะแสดงในตารางตลอด และไม่แสดงใน popup
คอลัมน์ที่ 3 และ 5 จะไม่แสดง แต่จะแสดงให้เลือก ใน popup
 
ตัวอย่าง
 
 
โค้ด
 
<!DOCTYPE html> 
<html>
<head>
	<title>ใส่ไตเติล ตามใจชอบ</title>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="js/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>    
</head>

<body>

<!-- Start of  page HOME  -->
<div data-role="page" id="page_home">

	<div data-role="header" data-position="fixed">
    	<a href="#left_panel" class="ui-btn ui-shadow ui-corner-all ui-icon-bars ui-btn-icon-notext">Bars</a>
		<h1>Home</h1>
        
        <div data-role="navbar" >  
            <ul>  
                <li><a href="#" class="ui-btn-active"  data-icon="heart">เมนู 1</a></li>  
                <li><a href="#" data-icon="calendar">เมนู 2</a></li>  
                <li><a href="#" data-icon="audio">เมนู 3</a></li>  
                <li><a href="#" data-icon="alert">เมนู 4</a></li>  
                <li><a href="#" data-icon="gear">เมนู 5</a></li>  
            </ul>  
        </div><!-- /navbar -->            
	</div><!-- /header -->

	<div data-role="content">

        <table data-role="table" data-mode="columntoggle" id="my_table" >
            <thead>
                <tr>
                    <th># </th>
                    <th>ชื่อ</th>
                    <th data-priority="2">วันที่</th>
                    <th>ราคา</th>
                    <th data-priority="1">จำนวน</th>
                </tr>
            </thead>    
            <tbody>
                <?php for($i=1;$i<=10;$i++){ ?>
                <tr>
                    <td><?=$i?></td>
                    <td>สินค้ารายการที่ <?=$i?></td>
                    <td><?=date("d-m-Y")?> บาท </td>
                    <td><?=$i*100?> บาท </td>
                    <td><?=$i?> รายการ</td>
                </tr>   
                <?php  } ?> 
            </tbody>
        </table>

    
	</div><!-- /content -->
    
    <div data-role="panel" id="left_panel" data-display="push">
        <ul data-role="listview" data-icon="false"  data-divider-theme="a">
            <li data-role="list-divider">หัวข้อแบ่ง</li>
            <li><a href="#">เมนูที่ 1</a></li>
            <li><a href="#">เมนูที่ 2</a></li>
            <li><a href="#">เมนูที่ 3</a></li>
            <li><a href="#">เมนูที่ 4</a></li>            
            <li data-role="list-divider">หัวข้อแบ่ง</li>
            <li><a href="#">เมนูที่ 6</a></li>
            <li><a href="#">เมนูที่ 7</a></li>
        </ul>
    </div><!-- /panel -->        

	<div data-role="footer" data-position="fixed">
		<h4>ส่วน  footer ใส่ตามใจชอบ</h4>
	</div><!-- /footer -->

</div><!-- /page -->

</body>
</html>
 
มาดูต่อ ส่วนของการกำหนดตารางแบบ responsive และความสัมพันธ์กับการใช้งาน
data-priority 
เราจะกำหนดให้ตารางเป็นแบบ responsive โดยเพิ่มคลาส class="ui-responsive" ในตาราง
จะได้เป็น 
 
<table data-role="table" data-mode="columntoggle" id="my_table" class="ui-responsive">
 
สำหรับตารางที่กำหนด class="ui-responsive" ถึงแม้จะกำหนด การซ่อน คอลัมน์ด้วย data-priority 
แต่หากหน้าจอมีขนาดใหญ่ จำนวนคอลัมน์ก็จะแสดง ข้อมูล ตามความกว้างของหน้าจอ และการกำหนด 
ความสำคัญของ data-priority 
 
ตัวอย่าง
 
 
โค้ด
 
<!DOCTYPE html> 
<html>
<head>
	<title>ใส่ไตเติล ตามใจชอบ</title>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="js/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>    
</head>

<body>

<!-- Start of  page HOME  -->
<div data-role="page" id="page_home">

	<div data-role="header" data-position="fixed">
    	<a href="#left_panel" class="ui-btn ui-shadow ui-corner-all ui-icon-bars ui-btn-icon-notext">Bars</a>
		<h1>Home</h1>
        
        <div data-role="navbar" >  
            <ul>  
                <li><a href="#" class="ui-btn-active"  data-icon="heart">เมนู 1</a></li>  
                <li><a href="#" data-icon="calendar">เมนู 2</a></li>  
                <li><a href="#" data-icon="audio">เมนู 3</a></li>  
                <li><a href="#" data-icon="alert">เมนู 4</a></li>  
                <li><a href="#" data-icon="gear">เมนู 5</a></li>  
            </ul>  
        </div><!-- /navbar -->            
	</div><!-- /header -->

	<div data-role="content">

        <table data-role="table" data-mode="columntoggle" id="my_table" class="ui-responsive" >
            <thead>
                <tr>
                    <th># </th>
                    <th>ชื่อ</th>
                    <th data-priority="2">วันที่</th>
                    <th>ราคา</th>
                    <th data-priority="1">จำนวน</th>
                </tr>
            </thead>    
            <tbody>
                <?php for($i=1;$i<=10;$i++){ ?>
                <tr>
                    <td><?=$i?></td>
                    <td>สินค้ารายการที่ <?=$i?></td>
                    <td><?=date("d-m-Y")?> บาท </td>
                    <td><?=$i*100?> บาท </td>
                    <td><?=$i?> รายการ</td>
                </tr>   
                <?php  } ?> 
            </tbody>
        </table>

    
	</div><!-- /content -->
    
    <div data-role="panel" id="left_panel" data-display="push">
        <ul data-role="listview" data-icon="false"  data-divider-theme="a">
            <li data-role="list-divider">หัวข้อแบ่ง</li>
            <li><a href="#">เมนูที่ 1</a></li>
            <li><a href="#">เมนูที่ 2</a></li>
            <li><a href="#">เมนูที่ 3</a></li>
            <li><a href="#">เมนูที่ 4</a></li>            
            <li data-role="list-divider">หัวข้อแบ่ง</li>
            <li><a href="#">เมนูที่ 6</a></li>
            <li><a href="#">เมนูที่ 7</a></li>
        </ul>
    </div><!-- /panel -->        

	<div data-role="footer" data-position="fixed">
		<h4>ส่วน  footer ใส่ตามใจชอบ</h4>
	</div><!-- /footer -->

</div><!-- /page -->

</body>
</html>
 
คำอธิบาย
 
จะเห็นว่า ตารางมีการกำหนด class="ui-responsive" ซึ่งมีผลต่อคอลัมน์ ที่ 5
จากที่ หากไม่กำหนดเป็น responsive คอลัมน์ ที่ 5 จะไม่แสดงในตาราง แต่แสดงใน popup
แต่เมื่อมีการกำหนดเป็น responsive คอลัมน์ ที่ 5 จะแสดง ตามขนาดของหน้าจอ
ที่ยังพอให้คอลัมน์อีก 1 คอลัมน์แสดงข้อมูลได้
 
ข้อสงสัยเพิ่มเติม ในเมื่อ คอลัมน์ที่ 3 และ 5 กำหนด data-priority อะไรคือตัวเลือก
ที่จะแสดงหรือไม่แสดง ของ 2 คอลัมน์นี้
ตอบ ตำเลขความสำคัญที่กำหนดเข้าไป 1 มีค่าความสำคัญ มากกว่า 2 
ตารางจึงเลือกแสดง คอลัมน์ที่ 5 ที่มีความสำคัญมากว่าก่อน แบบนี้ เป็นต้น
 
ดูเพิ่มเติมกับการกำหนดในตาราง ตามค่าต่อไปนี้
ส่วนของ class
ui-responsive คลาสสำหรับ กำหนดให้ตารางเป็นเแบบ responsive
table-stripe คลาสสำหรับ กำหนดการสลับสี แถวในตาราง
table-stroke คลาสสำหรับ กำหนดให้มีเส้นค้นระหว่างแถวในตาราง
ui-body-a คลาสสำหรับ กำหนดสี theme ให้ตาราง
ui-shadow คลาสสำหรับกำหนด การแสดงแบบมีเงา
 
ส่วนของ attributes
data-column-popup-theme="a"  กำหนด theme ให้กับ popup เลือกคอลัมน์
data-column-btn-theme="b" กำหนด theme ของ ปุ่ม แสดง popup
data-column-btn-text="แสดงคอลัมน์.."  กำหนด ข้อความ ปุ่ม แสดง popup
 
ตัวอย่าง
 
 
โค้ด
 
<!DOCTYPE html> 
<html>
<head>
	<title>ใส่ไตเติล ตามใจชอบ</title>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="js/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>    
</head>

<body>

<!-- Start of  page HOME  -->
<div data-role="page" id="page_home">

	<div data-role="header" data-position="fixed">
    	<a href="#left_panel" class="ui-btn ui-shadow ui-corner-all ui-icon-bars ui-btn-icon-notext">Bars</a>
		<h1>Home</h1>
        
        <div data-role="navbar" >  
            <ul>  
                <li><a href="#" class="ui-btn-active"  data-icon="heart">เมนู 1</a></li>  
                <li><a href="#" data-icon="calendar">เมนู 2</a></li>  
                <li><a href="#" data-icon="audio">เมนู 3</a></li>  
                <li><a href="#" data-icon="alert">เมนู 4</a></li>  
                <li><a href="#" data-icon="gear">เมนู 5</a></li>  
            </ul>  
        </div><!-- /navbar -->            
	</div><!-- /header -->

	<div data-role="content">

        <table data-role="table" data-mode="columntoggle" id="my_table" class="ui-body-a ui-shadow ui-responsive table-stripe " data-column-btn-text="แสดงคอลัมน์.." data-column-popup-theme="a" data-column-btn-theme="b" >
            <thead>
                <tr>
                    <th># </th>
                    <th>ชื่อ</th>
                    <th data-priority="2">วันที่</th>
                    <th>ราคา</th>
                    <th data-priority="1">จำนวน</th>
                </tr>
            </thead>    
            <tbody>
                <?php for($i=1;$i<=10;$i++){ ?>
                <tr>
                    <td><?=$i?></td>
                    <td>สินค้ารายการที่ <?=$i?></td>
                    <td><?=date("d-m-Y")?> บาท </td>
                    <td><?=$i*100?> บาท </td>
                    <td><?=$i?> รายการ</td>
                </tr>   
                <?php  } ?> 
            </tbody>
        </table>

    
	</div><!-- /content -->
    
    <div data-role="panel" id="left_panel" data-display="push">
        <ul data-role="listview" data-icon="false"  data-divider-theme="a">
            <li data-role="list-divider">หัวข้อแบ่ง</li>
            <li><a href="#">เมนูที่ 1</a></li>
            <li><a href="#">เมนูที่ 2</a></li>
            <li><a href="#">เมนูที่ 3</a></li>
            <li><a href="#">เมนูที่ 4</a></li>            
            <li data-role="list-divider">หัวข้อแบ่ง</li>
            <li><a href="#">เมนูที่ 6</a></li>
            <li><a href="#">เมนูที่ 7</a></li>
        </ul>
    </div><!-- /panel -->        

	<div data-role="footer" data-position="fixed">
		<h4>ส่วน  footer ใส่ตามใจชอบ</h4>
	</div><!-- /footer -->

</div><!-- /page -->

</body>
</html>
 
โปรดติดตามเนื้อหาตอนต่อไป


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ





Tags:: jquery mobile







URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ