Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,027

HOME > Windows Azure > Windows Azure (Mobile Services) and HTML/JavaScript (jQuery) > ตอนที่ 7 : การทำ Refine Mobile Services queries with paging บน HTML และ JavaScript

ตอนที่ 7 : การทำ Refine Mobile Services queries with paging บน HTML และ JavaScript

ตอนที่ 7 : การทำ Refine Mobile Services queries with paging บน HTML และ JavaScript การทำ Refine queries paging เป็นรูปแบบการเขียน Query เพื่อสร้างเงื่อนไขการแสดงข้อมูล Data จาก Mobile Services (คล้าย ๆ กับการเขียน Query เช่น Where , Top , Limit , Order By) โดยเราสามารถทำได้ทั้งระดับ Script ที่อยู่บน Mobile Services หรือจะเขียนเงื่อนไขภายใต้คำสั่ง Where() ที่อยู่บนคำสั่งของ HTML และ JavaScript ก็ได้เช่นเดียวกัน และรูปแบบการใช้งานคำสั่ง Script ก็สามารถเข้าใจได้ง่าย ๆ เช่น

var query = myMemberTable.where({ status:0 }).where({ id:4 });

จาก Code จะเหมือนกับ

SELECT * FROM table_name WHERE status = '0' and id = '4'

var query = todoItemTable.where({ complete: false }).skip(3).take(3);

จากตัวอย่างจะเป็นการเลือก complete = false และ ไม่เอา 3 รายการแรก แต่เอาแค่ 3 รายการถัดไปที่พบ

อ่านเพิ่มเติม : How to use an HTML/JavaScript client for Windows Azure Mobile Services

http://www.windowsazure.com/en-us/develop/mobile/how-to-guides/work-with-html-js-client/

Example ตัวอย่างการเขียน Refine queries แบบง่าย ๆ บน HTML และ JavaScript

Refine Mobile Services queries with paging บน HTML และ JavaScript

ตอนนี้เรามี Mobile Services อยู่ 1 รายการ ที่ได้สร้างไว้ก่อนหน้านี้

Refine Mobile Services queries with paging บน HTML และ JavaScript

ชื่อตารางว่า MyMember มีข้อมุลอยู่ 4 รายการ

Refine Mobile Services queries with paging บน HTML และ JavaScript

รายการข้อมูลในตาราง MyMember

Code ทั้งหมด

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title>ThaiCreate.Com</title>
        <link rel='stylesheet' href='styles.css' />
        <meta name='viewport' content='width=device-width' />
        <!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"></script><![endif]-->
        <script src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js'></script>
        <script src='https://thaicreate.azure-mobile.net/client/MobileServices.Web-1.0.0.min.js'></script>
    </head>
    <body>

	<script type="text/javascript">
		$(document).ready(function(){

				var client = new WindowsAzure.MobileServiceClient('https://thaicreate.azure-mobile.net/', 'uJPAhkAkcTBuTyCNxaOSnDKFzkoYqB49'),

				myMemberTable = client.getTable('MyMember');

				function refreshMyMember() {

					var query = myMemberTable.where({ status:0 }).where({ id:4 });

					query.read().then(function(mymemberItems) {
						
						var listItems = $.map(mymemberItems, function(item) {
							return $('<li>')
								.attr('data-todoitem-id', item.id)
								.append($('<div>id = '+item.id+' &nbsp;&nbsp;name : '+item.name+'&nbsp;&nbsp;&nbsp; email : '+item.email+'&nbsp; status : '+item.status+'</div>')
								);
						});

						$('#todo-items').empty().append(listItems).toggle(listItems.length > 0);
						$('#summary').html('<strong>' + mymemberItems.length + '</strong> item(s)');
					}, handleError);
				}

				function handleError(error) {
					var text = error + (error.request ? ' - ' + error.request.status : '');
					$('#errorlog').append($('<li>').text(text));
				}

				// Handle insert
				$('#add-item').submit(function(evt) {
					var tname = $('#txtName');
					var temail = $('#txtEmail');
						sname = tname.val();
						semail = temail.val();
					if (sname !== '') {
						myMemberTable.insert({ name: sname, email: semail, status:0 })
									.then(refreshMyMember, function(error){
									alert(JSON.parse(error.request.responseText).error);
								});
					}
					tname.val('').focus();
					temail.val('').focus();
					evt.preventDefault();
				});

				// On initial load, start by fetching the current data
				refreshMyMember();

		});

	</script>

        <div id='wrapper'>
            <article>
                <header>
                    <h2>Windows Azure</h2>
                    <h1>Mobile Services</h1>

                    <form id='add-item'>
                        <button type='submit'>Add</button>
                        <div>
						Name : <input type='text' id='txtName' placeholder='Enter your name' style='width:200px' />
						Email : <input type='text' id='txtEmail' placeholder='Enter your email' style='width:300px' /></div>
                    </form>
                </header>

                <ul id='todo-items'></ul>
                <p id='summary'>Loading...</p>
            </article>

            <footer>
                <a href='http://www.windowsazure.com/en-us/develop/mobile/'>
                    Learn more about Windows Azure Mobile Services
                </a>
                <ul id='errorlog'></ul>
            </footer>
        </div>

    </body>
</html>

โดยเราจะเปลี่ยน Query ใหม่

Example 1 : การใช้ Order By

Refine Mobile Services queries with paging บน HTML และ JavaScript