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


สำหรับคราวนี้จะเป็น การพัฒนาเพิ่มเติมจากบทความคราวก่อนนะครับ โดยจะเพิ่มปุ่ม Back และ Next เข้าไป แล้วนำ DropDownList Control มาแทรกไว้ตรงกลาง โดยกำหนดคุณสมบัติของปุ่มที่เพิ่มเติมขึ้นมาดังนี้

หากเป็นหน้าแรก ปุ่ม Back จะถูก Disable หากเป็นหน้าสุดท้าย ปุ่ม Next จะถูก Disable หากข้อมูลมีการแสดงผลให้หน้าเดียว ปุ่ม Back และ Next จะถูก Disable พร้อมกัน เมื่อกดปุ่ม Back จะแสดงข้อมูลย้อนหลังไป 1 หน้า และเมื่อกดปุ่ม Next จะแสดงข้อมูลหน้าถัดไป ส่วนการเลือกดูข้อมูลที่หน้าใดๆก็จะสามารถเลือกจาก DropDownList Control เหมือนกับในบทความคราวก่อน

มาเริ่มกันเลย สำหรับบทความคราวนี้ ขออนุญาตนำแต่โค้ดภาษา C# มาแสดงอย่างเดียวนะครับ เพื่อไม่ให้บทความยืดยาวเกินเหตุ

ครั้งนี้มีการปรับเปลี่ยนตัวแปร currentPageIndex ให้เป็น property ของ Page และเก็บค่าไว้ใน ViewState นะครับ เพื่อให้จำหน้าปัจจุบันได้ จะได้สามารถเลื่อนหน้าไปมาได้
private int currentPageIndex { get { return (int)ViewState["currentPage"]; } set { ViewState["currentPage"] = value; } }

ในฟังก์ชั่น BindControl() เพิ่มการตรวจสอบหน้าแรกหรือหน้าสุดท้าย โดยใช้ property "IsFirstPage" และ "IsLastPage" ของคลาส PagedDataSource มาตรวจสอบ (บรรทัดที่โค้ดตัวหนา)
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;
        pgNdx.CurrentPageIndex = currentPageIndex;
        btnGoBack.Enabled = !pgNdx.IsFirstPage;         // ถ้าหากเป็นหน้าแรกให้ disable ปุ่ม Back
        btnGoNext.Enabled = !pgNdx.IsLastPage;         // ถ้าหากเป็นหน้าสุดท้ายให้ disable ปุ่ม Next
        DataList1.DataSource = pgNdx;
        DataList1.DataBind();
}
จากนั้นมาจัดการกับการเปลี่ยนหน้าเมื่อมีการกดปุ่ม Back และ Next
void btnGoBack_Click(object sender, EventArgs e) {
        currentPageIndex -= 1;
        BindControl();
}
void btnGoNext_Click(object sender, EventArgs e) {
        currentPageIndex += 1;
        BindControl();
}
เรียบร้อยครับ มาดูผลงานสักหน่อย

One comment

ใส่ความเห็น

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