Home > ASP.NET With C#, jQuery, Lập Trình > Jquery Paging – Phân trang với jQuery cơ sở dữ liệu SQL server

Jquery Paging – Phân trang với jQuery cơ sở dữ liệu SQL server

Trong bài viết trước về Jquery Paging bạn đã biết về phân trang bằngjQuery Pagination Plugin với html. Nhiều bạn có yêu cầu phân trang lấy dữ liệu SQL như thế nào. Bài này sẽ đáp ứng yêu cầu của bạn.

Jquery Paging, Phân trang, jQuery, cơ sở dữ liệu, SQL server, Asp.net, Csharp,

Nói qua về thuật toán: Ở bài trước bạn đã biết tương ứng với số trang dữ liệu thì ta sẽ có các thẻ div với id=pi (Với i là chỉ số) và Class là pagedemo với thuộc tính display=none ứng với dữ liệu của trang không được chọn (Khác current). Còn với trang đang chọn thì ta sẽ có thuộc tính để jquery hiểu là ta đang xem trang hiện tại. do vậy thuật toán của ta là sinh ra các thẻ div

<div id=”pi” style=”display:none;”></div> ứng với dữ liệu của các trang không được chọn và dữ liệu bên trong thẻ div này là rỗng.

<div id=”pi”>Dữ liệu trang đang chọn</div> ứng với dữ liệu của trang đang chọn.

Do đó chúng ta sẽ sử dụng vòng lặp để sinh ra dữ liệu (html) này, và kèm thêm thẻ <div id=”demo”></div>.

Trong code của jquery các giá trị count và display sẽ là các biến động

	
	count 		: Số trang dữ liệu,
	start 		: 1,
	display     : Số trang hiển thị,

Ở bài này tôi sẽ viết toàn bộ phần hiển thị dữ liệu trong một Store ở SQL. Bạn nào không dành lắm về cách viết Store có thể dựa vào đây mà chuyển sang C# hoặc VB. Giả sử ta có bảng dữ liệu TB_News trong đó có 2 trường là Title và Description Khi đó Store tôi viết như sau:

CREATE  PROCEDURE [dbo].[sTB_News_TestJqueryPaging]
@currPage int,
@recodperpage int,
@Pagesize int
AS
Begin
	Declare @SQL nvarchar(MAX)
	Set @SQL=''
	DECLARE @_TempTable TABLE  
	(
		STT int Null,
		idNews int null,
		Title nvarchar(400) Null,
		Descript nvarchar(2000) null
	)
	DECLARE @Tolal int Set @Tolal=0
	Select @Tolal = count(*) From TB_News tn
		Begin
			WITH s AS
			(
				SELECT ROW_NUMBER() 
				OVER(ORDER BY tn.idNews desc) As RowNum , tn.idNews,  tn.Title, tn.Description
				From TB_News tn  
			)
			Insert Into @_TempTable
			Select * From s 
			Where RowNum Between 
				(@currPage - 1)*@recodperpage+1 
					AND @currPage*@recodperpage
		End
		DECLARE @TotalPage int
		IF @Tolal%@recodperpage>0
			SET @TotalPage=(@Tolal/@recodperpage)+1
		ELSE
			SET @TotalPage=@Tolal/@recodperpage 
		Set @SQL=@SQL+'
		<div id="paginationdemo">'
		Declare @i int Set @i=1
		WHILE @i<@currPage
		  BEGIN
			Set @SQL=@SQL+'
				<div id="p'+Cast(@i As varchar(3))+'"
				 style="display:none;"></div>'
				SET @i=@i+1
		  END
			Set @SQL=@SQL+'
				<div id="p'+Cast(@currPage As varchar(3))+'"
				 style="">'
			Declare @idNews int, @Title nvarchar(400), @Dectiption nvarchar(2000)
			--Dùng con trỏ (vòng lặp) để tìm kiếm từ khóa
			DECLARE PhanTrang_Cursor CURSOR FOR 
			Select idNews, Title, Descript From @_TempTable
 			OPEN PhanTrang_Cursor 
			FETCH NEXT FROM PhanTrang_Cursor INTO @idNews, @Title, @Dectiption 
			WHILE @@FETCH_STATUS = 0 
			BEGIN 
				Set @SQL=@SQL+'
					<li><a href="?NewID='+Cast(@idNews as varchar(9))+'">'+@Title+'</a></li>'
				Set @SQL=@SQL+'
				<li>'+@Dectiption+'</li>'
				FETCH NEXT FROM PhanTrang_Cursor INTO @idNews, @Title, @Dectiption 
			END
			CLOSE PhanTrang_Cursor
			DEALLOCATE PhanTrang_Cursor
		Set @SQL=@SQL+'
		</div>'
		Set @i=@currPage+1
		WHILE @i<=@TotalPage
		BEGIN
		Set @SQL=@SQL+'
			<div id="p'+Cast(@i As varchar(3))+'" 
			class="pagedemo" style="display:none;"></div>'
			SET @i=@i+1
		END
		Set @SQL=@SQL+'	
		<div id="demo"></div>                
	</div>
<script type="text/javascript"> 
$(function() {
    $(''#demo'').paginate({
        count 		: '+cast(@TotalPage As varchar(4))+',
        start 		: 1,
        display     : '+cast(@Pagesize As varchar(4))+',
        border					: true,
        border_color			: ''#fff'',
        text_color  			: ''#fff'',
        background_color    	: ''black'',	
        border_hover_color		: ''#ccc'',
        text_hover_color  		: ''#000'',
        background_hover_color	: ''#fff'', 
        images					: false,
        mouse					: ''press'',
        onChange     			: 
        function(page){
        $(''._current'',''#paginationdemo'').removeClass(''_current'').hide();
        $(''#p''+page).addClass(''_current'').show();
      }
    });
});
</script>'

	Select @SQL As PhanTrang
END

Giải thích store trên: đầu tiên ta khai báo bảng Tạm @_TempTable để ta đổ dữ liệu cần hiển thị của trang hiện hành. Sau đó ta dùng vòng lặp để tạo các dữ liệu thẻ div của các trang khác trang đang chọn. Đến trang dữ liệu đang chọn ta dùng vòng lặp để hiển thị dữ liệu dang list (<li>). Sau đó ta lại dùng tiếp vòng lặp để tạo các dữ liệu sau trang đang chọn. Cuối cùng là phần code jquery cũng được tạo luôn trong Store này và Store này sẽ trả về bảng chỉ có 1 bản ghi chính là dữ liệu ta cần hiển thị

Dữ liệu in ra khi Exec store này như sau – là dữ liệu dạng html ( Exec spCustomers_TestJqueryPaging 2,5,5) – Ở đây tôi có 16 bản ghi và chọn trang thứ 2 với 5 bản ghi trên 1 trang.

<div id="paginationdemo">
	<div id="p1" style="display:none;"></div>
	<div id="p2" style="">
		<li>Title 1</li>
		<li>Description 1</li>
		<li>Title 2</li>
		<li>Description 2</li>
		<li>Title 3</li>
		<li>Description 3</li>
		...
	</div>
	<div id="p3" style="display:none;"></div>
	<div id="p4" style="display:none;"></div> 	
<div id="demo"></div>                
</div>
<script type="text/javascript"> 
$(function() {
    $('#demo').paginate({
        count 		: 4,
        start 		: 1,
        display     : 5,
        border					: true,
        border_color			: '#fff',
        text_color  			: '#fff',
        background_color    	: 'black',	
        border_hover_color		: '#ccc',
        text_hover_color  		: '#000',
        background_hover_color	: '#fff', 
        images					: false,
        mouse					: 'press',
        onChange     			: 
        function(page){
        $('._current','#paginationdemo').removeClass('_current').hide();
        $('#p'+page).addClass('_current').show();
      }
    });
});
</script>

Giờ trong trang aspx bạn vẫn cần các Style và thư viện của bài trước. Tôi sẽ không nêu ra ở đây nữa. Bên trong thẻ body bạn cần khai báo như sau:

<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jquery.paginate.js" type="text/javascript"></script>
<div>
    <asp:Literal ID="ltlPageView" runat="server" />
</div>

Trong code C# ta viết hàm binh dữ liệu như sau:

private string DemoJqueryPaging(int currPage, int recodperpage, int Pagesize)
    {
        string strHTML = "";
        hmweb.Services.cNews mNews = new hmweb.Services.cNews();
        DataTable dtb = mNews.GetDataPaging(currPage, recodperpage, Pagesize);
        if (dtb.Rows.Count > 0)
        {
            strHTML = dtb.Rows[0]["PhanTrang"] + "";
        }
        return strHTML;
    }

Trong hàm Page_Load ta gán giá trị:
ltlPageView.Text=DemoJqueryPaging(page,10,5);

Với page là biến request. Và để truyền biến lên Parameter ta sẽ cần thay đổi đôi chút trong file jquery.paginate.js.

Bạn có thể download lại file này tại đây: http://hmweb.com.vn/demo/hmweb_jquerypaging_SQL.rar

Anh Khoa

 

  1. Huy Thông
    2011/06/14 at 3:50 pm

    hmweb.Services.cNews mNews = new hmweb.Services.cNews();
    Mình đang ko biết khai báo hmweb thì sửa thành gì cho chạy bài hả bạn. Giúp mình với nhé. Thanks you.

  1. No trackbacks yet.

Leave a Reply

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 / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: