Phân trang với Listview và Datapager trong asp.net

Phân trang với Listview và Datapager trong asp.net

Với số lượng dữ liệu quá nhiều không thể hiện lên hết trong 1 trang thì việc phân trang là một công việc chắc chắn phải làm. Có rất nhiều cách: Gridview đã được tích hợp sẵn chức năng phân trang hoặc có thể dùng CollectionPager để phân trang, v.v... Trong bài viết này WEBXAULA xin giới thiệu đến các bạn cách thức phân trang sử dụng Datapager đã được tích hợp sẵn trong Visual Studio 2010.

Phân trang với Listview và Datapager trong asp.net

Ở bài trước tôi đã giới thiệu với các bạn cách phân trang cho datalist, repeater v.v... bằng control CollectionPager (Phân trang dùng CollectionPager trong asp.net). Hôm nay tôi sẽ hướng dẫn các bạn cách phân trang sử dụng Listview để hiển thị dữ liệu và phân trang dữ liệu đó dùng Datapager. Datapager là control có sẵn trong Visual Studio 2010 nên bạn không cần phải add thêm bất kỳ thư viện nào bên ngoài.

Đầu tiên, bạn thiết kế Listview hiển thị dữ liệu như sau:

<asp:ListView ID="DS_Test" runat="server">
        <LayoutTemplate>
            <div id="itemPlaceholderContainer" style="width:100%;">
                <div runat="server" id="itemPlaceholder"></div>
            </div>
        </LayoutTemplate>
        <ItemTemplate>
            <div style="float:left; width:189px;">
 
                <img class="hinh_phim" src=<%# "../hinh/phim/thumb/" + Eval("hinh") %> />
                <div style="text-align:left; margin:5px 0px 0px 10px;">
                <%# Eval("tensanpham") %>
                </div>
            </div>
        </ItemTemplate>
        </asp:ListView>
 
Các bạn lưu ý phần LayoutTemplate giữ nguyên tên id, đó là thiết kế giao diện và dữ liệu sẽ được đổ vào đó. Các bạn có thể tuỳ biến sao cho phù hợp. Sau đó, các bạn thêm control Datapager thiết kế như sau:
 
<asp:DataPager ID="DataPager1" QueryStringField="page" PageSize="5" PagedControlID="DS_Test" runat="server">
        <Fields>
            <asp:NumericPagerField ButtonType="Link" />
            <asp:NextPreviousPagerField ButtonType="Link" RenderNonBreakingSpacesBetweenControls="true"
            FirstPageText="Trang đầu" LastPageText ="Trang cuối" NextPageText="Tiếp theo"
             PreviousPageText="Quay lại" ShowFirstPageButton="true" ShowLastPageButton="true"
              ShowNextPageButton="true" ShowPreviousPageButton="true" />
        </Fields>
    </asp:DataPager>
 
Các  bạn có thể tạo thêm CSS để cho control được đẹp mắt hơn.
 
Tiếp theo trong phần code ASP.NET bạn tiến hành code lấy dữ liệu và đổ dữ liệu cho Listview như bình thường. Như vậy là xong rồi. Chúc các bạn thành công
Bạn thấy bài viết này như thế nào?: 
Average: 10 (2 votes)
Ảnh của Tommy Tran

Tommy owner Express Magazine

Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies

  • Skype ID: tthanhthuy

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
Cài đặt hook_flag_access for controlling what the user can flag Drupal

Cài đặt hook_flag_access for controlling what the user can flag Drupal

Recently, a client wanted their site users to be able to show their support for certain content nodes in Drupal. This can be done very nicely with the flag module. In case you missed it, flag module is a very useful module that has many applications - such as flag as offensive, like, friend, etc.

Bing

Tính năng mới của Bing cho phép tìm ảnh trên Facebook

Công cụ tìm kiếm Bing được bổ sung một cách mới để có thể tìm một hình ảnh hoặc album trong hàng nghìn ảnh/album mà bạn bè của người dùng đã đăng trên Facebook. Tính năng này có khả năng thu hút nhiều người dùng Facebook đến với Bing.

Yahoo Search

Công cụ tìm kiếm Yahoo Search được đặt tên mới là YQ

Yahoo tạo ra công nghệ mới này với mục đích tạo điều kiện cho người dùng có khả năng truy tìm thông tin dễ hơn và nhanh hơn thông qua các từ khóa. Công cụ tìm kiếm Yahoo Search được đặt tên mới là YQ.

Công ty diệt chuột T&C

 

Diet con trung