Load dữ liệu từ Server trong khi cuộn chuột giống facebook

load data from server while scroll

Như tiêu đề, bài viết sẽ hướng dẫn các bạn thực hiện load dữ liệu từ server trong khi cuộn chuột giống facebook khi mà dữ liệu của bạn lớn, và bạn chỉ muốn show dữ liệu cho tới khi nào người dùng cuộn chuột xuống dưới để xem tiếp.

Để làm được bài này, các bạn cần chú ý chút về ajax, và jquery, cũng như một số kiến thức về webservice nhé.
Server Method: Đầu tiên là phương thức được sử dụng để lấy dữ liệu từ server, sau đó gen nó ra dạng HTML để dùng cho ajax như dưới đây
[PHP]
[WebMethod]
public static string GetDataFromServer()
{
string resp = string.Empty;
for(int i = 0; i <= 10; i++) { resp += "

” + counter++ +
This content is dynamically appended ” +
“to the existing content on scrolling.

” ;
}
return resp;
}
[/PHP]
Nếu bạn muốn load dữ liệu từ server thì dùng đoạn code dưới đây
[PHP]
[WebMethod]
public static string GetDataFromServer()
{
DataSet ds = new DataSet();

// Set value of connection string here
string strConnectionString = “”; // Insert your connection string value here
SqlConnection con = new SqlConnection(strConnectionString);

// Write the select command value as first parameter
SqlCommand command = new SqlCommand(“SELECT * FROM Person”, con);
SqlDataAdapter adp = new SqlDataAdapter(command);
int retVal = adp.Fill(ds);

string resp = string.Empty;
for (int i = 1; i <= ds.Tables[0].Rows.Count; i++) { string strComment = string.Empty; if (ds.Tables != null) { if (ds.Tables[0] != null) { if (ds.Tables[0].Rows.Count > 0)
{
if (ds.Tables[0].Rows.Count >= i – 1)
{
if (ds.Tables[0].Rows[i – 1][0] != DBNull.Value)
{
strComment = ds.Tables[0].Rows[i – 1][0].ToString();
}
}
}
}
}
resp += “

” + counter++ + “ ” + strComment + “

“;
}
return resp;
}
[/PHP]
Client Method: Ở phía client chúng ta sử dụng 2 thẻ div, một thẻ được đăng ký sự kiện scroll là mainDiv và một thẻ dùng để append dữ liệu tự động là wrapperDiv
[PHP]
$(document).ready(
function()
{
$contentLoadTriggered = false;
$(“#mainDiv”).scroll(
function()
{
if($(“#mainDiv”).scrollTop() >= ($(“#wrapperDiv”).height() –
$(“#mainDiv”).height()) &&
$contentLoadTriggered == false)
$contentLoadTriggered == false)
{
$contentLoadTriggered = true;
$.ajax(
{
type: “POST”,
url: “LoadOnScroll.aspx/GetDataFromServer”,
data: “{}”,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
async: true,
cache: false,
success: function (msg)
{
$(“#wrapperDiv”).append(msg.d);
$contentLoadTriggered = false;
},
error: function (x, e)
{
alert(“The call to the server side failed. ” +
x.responseText);
}
}
);
}
}
);
}
);
[/PHP]
Ở đây chúng ta sử lý sự kiện người dùng scroll chuột xem là scroll xuống hay lên, nếu xuống thì thực hiện gen dữ liệu ra
[PHP]
if($(“#mainDiv”).scrollTop() >=
($(“#wrapperDiv”).height() – $(“#mainDiv”).height()) &&
$contentLoadTriggered == false)
[/PHP]
Bạn có thể nhìn thành quả của bạn theo 2 hình dưới đây
load data from server while scroll

Chúc bạn có một ứng dụng thú vị với bài viết này.

Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com