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

04 April 2014 เขียนเมื่อ 11 ปีก่อน โดย Ninenik Narkdee

jquery mobile

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

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

คำเตือน! เนื้อหาต่อไปนี้ เป็นเนื้อหาเก่า อาจจะไม่เหมาะสำหรับนำไปใช้งาน หรือไม่สามารถใช้งานได้แล้ว

เนื้อหาตอนที่ 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 เลือกแสดงคอลัมน์

ก็จะได้เป็น

ส่วนของ การซ่อน หรือแสดง คอลัมน์

ปกติ ถ้าไม่มีการกำหนดค่าใดๆ คอลัมน์ทั้งหมด จะแสดงปกติ

หากต้องซ่อนคอลัมน์ใด และให้แสดงใน 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" ในตาราง

จะได้เป็น

สำหรับตารางที่กำหนด 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 สำหรับอ้างอิง

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน