ASP.Net – Phân trang trên DataList

Chào mọi người như đã đề cập ở bài trước viết về cách đổ dữ liệu lên DataList hôm nay mình muốn chia sẻ với mọi người cách phân trang DataList trong ASP.Net phần này được xem là quan trọng và cần thiết trong mọi website cũng như WEB ASP.Net

Khi trình bày sản phẩm, bài viết hay cách doanh mục đầu tư… với số lượng bài viết lớn thì trong một trang thì không thể nào hiển thị hết được giải pháp của ta là phân trang, phân trang trong WEB ASP.Net liên quan đến nhiều vấn đề, các đối tượng và sự liên kết của chúng lại với nhau. Sau đây là một cách làm đơn giản về phân trang.

Phân trang trang ASP.Net

Các bạn phải đọc bài trước rồi bài hôm nay mới có thể thực hiện tốt được, đầu tiên phía dưới datalist vừa tạo hôm trước chúng ta trình bày một giao diện như sau:

Giao diện phân trang

Giao diện phân trang

Ta có các button về trang đầu, trang trước đó, sau đó, trang cuối cùng và một textbox hiển thị số trang đang hiện hành. mỗi button đều có sự kiện OnClick và bạn phải đặt tên cho các button, textbox này để tiện cho lúc làm việc.

    protected void bt1_Click(object sender, EventArgs e)
    {

    }
    protected void bt2_Click(object sender, EventArgs e)
    {

    }
    protected void bt3_Click(object sender, EventArgs e)
    {

    }

    protected void bt4_Click(object sender, EventArgs e)
    {

    }

Đó là sự kiện OnClick của 4 button trên, bây giờ mình sẽ viết code cho load dữ liệu lên trên DalaList có khác so với lần trước.

    static PagedDataSource p = new PagedDataSource();
    public static int intSTT;
    public static int trang_thu = 0;

Ở đây ta khai báo một đối tượng p của lớp PagedDataSource để quản lý trạng thái của trang, biến int intSTT để lưu số thứ tự, và biến trang_thu lưu trang đang hiện hành. Chú ý các biến trên đều là biến static.

Sau đó viết hàm load data như sau:

public void load_data()
    {

            string sql = "select top 20 ProID, ProName, Price, VAT, Description,URLImages, Visible from Products order by UpdateDate DESC";
            p.DataSource = data.get(sql).Tables[0].DefaultView;
            p.PageSize = 5;
            p.CurrentPageIndex = trang_thu;
            p.AllowPaging = true;

            bt1.Enabled = true; bt2.Enabled = true; bt3.Enabled = true; bt4.Enabled = true;

            if (p.IsFirstPage == true)//neu la dau.
            {
                bt1.Enabled = false;//neu la trang dau thi hai nut mo di.
                bt2.Enabled = false;
                bt3.Enabled = true;//Hai nut sau sang len.
                bt4.Enabled = true;
            }

            if (p.IsLastPage == true)//neu la cuoi
            {
                bt1.Enabled = true;//nguoc lai
                bt2.Enabled = true;
                bt3.Enabled = false;
                bt4.Enabled = false;
            }

            txtTrang.Text = (trang_thu + 1) + " / " + p.PageCount;

            dlSanPham.DataSource = p;
            dlSanPham.DataBind();
    }

Giải thích:

  • PageSize: là số lượng bài hiển thị trong một trang
  • AllowPaging = true: cho phép thực hiện phân trang
  • IsFirstPage: là trang đầu (Thì hai button trước và trang đầu sẽ ở trạng thái ẩn)
  • IsLastPage: Là trang cuối (Thì hai button sau và trang cuối sẽ ở trạng thái ẩn)
  • PageCount: Đếm số trang được phân ra

Sau đó ta sẽ đi đến viết sự kiện OnClick cho từng Button

protected void bt1_Click(object sender, EventArgs e)
    {
        trang_thu = 0;
        load_data();
    }
    protected void bt2_Click(object sender, EventArgs e)
    {
        trang_thu--;
        load_data();
    }
    protected void bt3_Click(object sender, EventArgs e)
    {
        trang_thu++;
        load_data();
    }

    protected void bt4_Click(object sender, EventArgs e)
    {
        trang_thu = p.PageCount - 1;
        load_data();
    }

Ở mỗi trạng thái sẽ có những tình huống ứng với nó, do đó bạn suy nghĩ cách để đúng với thực tế. Giao diện chúng ta sẽ được như sau:

Demo phân trang DataList trong ASP.Net

Demo phân trang DataList trong ASP.Net

Kết luận: Đó là cách mình demo giải thuật phân trang, có thể sẽ sử dụng được tuy nhiên chắc có một vài lỗi nào đó các bạn ngâm cú thêm nha! Chúng ta có thể thay các Button thành những Image Button cho đẹp và chuyên nghiệp hơn. Chúc mọi người thành công! :D

VN:F [1.9.22_1171]
Rating: 8.5/10 (21 votes cast)
ASP.Net - Phân trang trên DataList, 8.5 out of 10 based on 21 ratings
Chuyên mục: ASP.Net & SQL Server, Lập Trình
Tagged: , , .

16 Comments

  1. Lê Chí Phát

    ok, thanks!

  2. yến

    Mình rất thích học những bài của bạn. cảm ơn nhiều

  3. Học lập trình là 1 quá trình góp nhặt, những bài viết như thế này rất hay và hữu ích, mình là dân lập trình .Net đã đi làm 2 năm rùi nhưng những bài viết của bạn đối với mình vẫn rất ý nghĩa, chúc bạn thành công và ngày càng có nhiu bài viết hay nhé, mình sẽ lun theo dõi.
    Thank u very much.

    • Cảm ơn bạn đã ủng hộ :D mình sẽ cố gắng!

  4. mình dang cần bài này … tìm 1 phát thấy ngay …. rất hay và dễ làm … cảm ơn bạn .. chúc blog bạn ngày càng phát triển :D !Thân:D

  5. quyết

    xin cảm ơn pro

  6. phuong

    cam on ban nhieu nha! bai viet cua ban hay va bo ich.

  7. san

    các bác cho cái code phan trang kiểu NumericPage????

  8. quocdung

    Pro ơi!. Giupminh voi.. nó bị cái gì mà nó cứ gạch chân ngan chỗ button với Textbox mà mình tìm không ra lỗi ..thanhk nhiều

  9. Nguyễn Tiến

    bạn ơi cho mình hỏi cái DataProvider là bạn có using thêm cái gì vào nữa ko vậy.Sao mình toàn báo lỗi chỗ đó.

    • Cái đó là lớp kết nối CSDL mình ta ra để sử dụng, bạn phải tạo nó trước mới dùng được!

      • Nguyễn Tiến

        Cảm ơn những chia sẻ của bạn, mong rằng bạn sẽ chia sẻ nhiều hơn nữa để cho những người mới làm quen đến .net hiểu biết nhiều hơn :D

  10. Ha

    bạn ơi mình load được dữ liệu nhưng nhấn nút buttom “trang sau” nó không chuyển trang.
    Mong mọi người giúp

  11. Hoài Thanh

    Bạn cho mình hỏi dòng:
    p.DataSource = data.get(sql).Tables[0].DefaultView;
    data ở đây là gì vậy bạn! mình không rõ chỗ đó.hihi.
    thank bạn nhiều!

  12. Nguyễn Hương

    Bạn ơi cho mình hỏi giờ mình muốn thay cái txttrang của bạn băng các số 1,2,3 mà khi click vào đó có thể chuyển đến trang 1,2,3 thì phải làm sao hả bạn.Mình gà lắm mong bạn giúp đỡ hihi

  13. sao mình ghi như trên mà web ko hiểu đoạn :
    p.DataSource = data.get(sql).Tables[0].DefaultView;

Để lại comment của bạn