การทำ Paging สำหรับ DataList Control และ Control ประเภท Data-bound Control ทั้งหลาย โดยใช้ PagedDataSource


ครั้งนี้เป็นครั้งแรกที่เขียนเรื่องราวออกแนววิชาการครับ ท่านที่เคยแวะเวียนเข้ามาอ่านมาก่อนอาจจะสงสัย ว่าเอ… หมอนี่มันมีสาระเป็นด้วยหรือนี่ ก็อย่าได้แปลกใจอะไรไปเลย ที่ผมเขียนขึ้นเรื่องนี้ขึ้นมาก็เพื่อเก็บไว้สำหรับตัวเองจะได้ค้นหาวิธีการต่างๆในการพัฒนางานได้สะดวกขึ้น เพราะงานที่ทำๆไว้ไม่เคยได้เอามารวบรวม เวลาจะทำอะไรคล้ายๆกันก็ดันจำไม่ได้ บางทีเพื่อเรื่องเดิมๆต้องเสียเวลาหาเสียหลายวัน ซึ่งเป็นการเสียเวลาโดยใช่เหตุ
 
ปกติผมไม่ค่อยจะได้ใช้งาน DataList Control บ่อยนัก อาจจะเพราะไม่ถนัด หรือใช้ GridView บ่อยกว่า (แต่ก็ยังไม่เชี่ยวนะครับ) ทำให้เวลานำมาใช้งานแต่ละครั้งก็เกิดความลำบากไม่น้อย เมื่อต้องการที่จะจัดหน้าให้กับมัน เนื่องด้วยเจ้า Control ตัวนี้(และตัวอื่นๆในตระกูล Data-bound Control) ไม่มี Property ที่เกี่ยวกับการจัดหน้า เช่น AllowPaging, PageSize, etc. มาให้ เหมือนใน GridView ดังนั้นจึงต้องหาศัยผู้ช่วย ซึ่งเจ้าคลาส PagedDataSource นี่แหละครับคือฮีโร่สำหรับงานนี้
 
คลาส PagedDataSource นี้จะอยู่ในเนมสเปซ System.Web.UI.WebControls ซึ่งอยู่ในแอสเซมบลี System.Web (ใน System.Web.dll) อีกที เจ้าคลาส PagedDataSource ตัวนี้ เป็นคลาสที่รวบรวมนำเอา property ต่างๆ ที่เกี่ยวข้องกับการแสดงผลแบบที่แบ่งเป็นหน้า มาไว้ใช้สำหรับ Control ประเภท Data-bound Control ทั้งหลาย เช่น DataList, Detail View, Form View,… รวมไปถึงเจ้า DataGrid และ GridView ด้วย พูดง่ายๆก็คือเจ้า PagedDataSource ตัวนี้ จะช่วยให้ Control ประเภท Data-bound Control เหล่านี้ สามารถแสดงผลในรูปแบบที่แบ่งเป็นหน้าๆ ได้นั่นเอง (สำหรับรายละเอียดต่างๆ ของ PagedDataSource นี่ สามารถไปดูได้ที่ msdn นะครับ)
 
ตัวอย่างการทำ paging สำหรับ DataList โดยใช้ DropDownList Control เป็นตัวเลือกแต่ละหน้า
1. สร้าง instance object ของ PagedDataSource และกำหนด Bind ข้อมูลเข้ากับ objec PagedDataSource C#
C#

private void BindControl() {
        // …
        // อ่านข้อมูลจากฐานข้อมูล มาใส่ไว้ใน DataTable
        // …
        PagedDataSource pgNdx = new PagedDataSource();
        pgNdx.DataSource = dv;      // Bind DataView ให้กับ PageDataSource object
        pgNdx.PageSize = 5;           // กำหนดจำนวนรายการที่แสดงในแต่ละหน้า
        pgNdx.AllowPaging = true;  // กำหนดว่าให้มีการทำ paging ได้

        ddlPageIndex.Items.Clear();  // เพิ่มจำนวนหน้าลงใน DropDownList Control
        for (int i = 0; i <= (pgNdx.PageCount – 1); i++) {
            ddlPageIndex.Items.Add(new ListItem(Convert.ToString(i + 1), Convert.ToString(i + 1)));
        }
        ddlPageIndex.SelectedIndex = currentPageIndex;   // currentPageIndex เป็น global variable ซึ่งถูกกำหนดไว้ก่อนหน้า
        pgNdx.CurrentPageIndex = currentPageIndex;

        DataList1.DataSource = pgNdx;
        DataList1.DataBind();
}

VB

Private Sub BindControl()
        ‘– …
        ‘– อ่านข้อมูลจากฐานข้อมูล มาใส่ไว้ใน DataTable
        ‘– …
        Dim pgNdx As New PagedDataSource()
        pgNdx.DataSource = dv      ‘– Bind DataView ให้กับ PageDataSource object
        pgNdx.PageSize = 5           ‘– กำหนดจำนวนรายการที่แสดงในแต่ละหน้า
        pgNdx.AllowPaging = True  ‘– กำหนดว่าให้มีการทำ paging ได้

        ddlPageIndex.Items.Clear()  ‘– เพิ่มจำนวนหน้าลงใน DropDownList Control
        For i As Integer = 0 To (pgNdx.PageCount – 1)
            ddlPageIndex.Items.Add(New ListItem(Convert.ToString(i + 1), Convert.ToString(i + 1)))
        Next
        ddlPageIndex.SelectedIndex = currentPageIndex    ‘– currentPageIndex เป็น global variable ซึ่งถูกกำหนดไว้ก่อนหน้า
        pgNdx.CurrentPageIndex = currentPageIndex

        DataList1.DataSource = pgNdx
        DataList1.DataBind()
End Sub

2. กำหนดการจัดการเมื่อมีการเปลี่ยนหน้าโดยการเลือกจาก DropDownList Control
C#

void ddlPageIndex_SelectedIndexChanged(object sender, EventArgs e) {
        currentPageIndex = Convert.ToInt32(ddlPageIndex.SelectedValue) – 1;
        BindControl();
}

VB

Protected Sub ddlPageIndex_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles ddlPageIndex.SelectedIndexChanged
        currentPageIndex = CInt(ddlPageIndex.SelectedValue) – 1
        BindControl()
End Sub

เท่านี้ก็เรียบร้อยครับ สามารถจัดแบ่งหน้าให้กับ Control DataList ได้แล้ว

หมายเหตุ DropDownList Control "ddlPageIndex" จะต้องกำหนด property AutoPostBack="true" เอาไว้ด้วย เพื่อจะได้จัดการเมื่อมีอีเว้นต์ SelectedIndexChanged เกิดขึ้นจะทำการ refresh เว็บเพจทันที ซึ่งหากนำไปใช้ร่วมกับ ASP.Net Ajax UpdatePanel ก็จะทำให้การแสดงผลได้เนียนขึ้น ไม่กระเพื่อม

2 comments

  1. ผมชอบคำว่าการแสดงผล "ไม่กระเพื่อม" จัง เจ้า volk (volk1969) แห่ง เกรทเฟรนด์ส เป็นคนเอามาใช้ ฟังแล้วเห็นภาพเลยว่าปกติถ้าไม่ได้ใช้ ASP.Net Ajax UpdatePanel แล้วเนี่ย หน้าจอมัน "กระเพื่อม" จริงๆ

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s