java ajax无刷分页_asp.net+ajax+json来实现无刷新分页功能
現(xiàn)在做網(wǎng)站就是盡可能的提高用戶體驗(yàn),用戶瀏覽網(wǎng)站盡可能不要刷新,響應(yīng)速度盡可能的快,就是加載速度不好,也要告訴用戶你已經(jīng)很努力的在加載了(loading.....),下面來看看如何實(shí)現(xiàn)此功能
USE [WineShop]
GO
/****** Object: StoredProcedure [dbo].[GetRecordFromPage2005] Script Date: 06/26/2012 13:52:11 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE PROCEDURE [dbo].[GetRecordFromPage2005]
@fieldlist nvarchar(200) = '*',
@datasrc nvarchar(200),
@filter nvarchar(200) = '',
@orderBy nvarchar(200),
@pageNum int = 1,
@pageSize int = NULL
AS
SET NOCOUNT ON
DECLARE
@STMT nvarchar(max) -- SQL to execute
,@recct int -- total # of records (for GridView paging interface)
IF LTRIM(RTRIM(@filter)) = '' SET @filter = '1 = 1'
IF @pageSize IS NULL BEGIN
SET @STMT = 'SELECT ' + @fieldlist +
'FROM ' + @datasrc +
'WHERE ' + @filter +
'ORDER BY ' + @orderBy
EXEC (@STMT) -- return requested records
END ELSE BEGIN
SET @STMT = 'SELECT @recct = COUNT(*)
FROM ' + @datasrc + '
WHERE ' + @filter
EXEC sp_executeSQL @STMT, @params = N'@recct INT OUTPUT', @recct = @recct OUTPUT
--SELECT @recct AS recct -- return the total # of records
DECLARE
@lbound int,
@ubound int
SET @pageNum = ABS(@pageNum)
SET @pageSize = ABS(@pageSize)
IF @pageNum < 1 SET @pageNum = 1
IF @pageSize < 1 SET @pageSize = 1
SET @lbound = ((@pageNum - 1) * @pageSize)
SET @ubound = @lbound + @pageSize + 1
IF @lbound >= @recct BEGIN
SET @ubound = @recct + 1
SET @lbound = @ubound - (@pageSize + 1) -- return the last page of records if -- no records would be on the
-- specified page
END
SET @STMT = 'SELECT ' + @fieldlist + '
FROM (
SELECT ROW_NUMBER() OVER(ORDER BY ' + @orderBy + ') AS row, *
FROM ' + @datasrc + '
WHERE ' + @filter + '
) AS tbl
WHERE
row > ' + CONVERT(varchar(9), @lbound) + ' AND
row < ' + CONVERT(varchar(9), @ubound)
EXEC (@STMT) -- return requested records
END
上面的分頁的存儲(chǔ)過程
后臺(tái)方法我們應(yīng)該如何調(diào)用呢
存儲(chǔ)過程參數(shù)說明:
fieldlist:你要顯示的字段,datasrc:表名,filter:過濾條件,orderBy:排序,pageNum:頁數(shù),pagesize:每頁顯示幾條記錄
public static IList WineCommentQueryAll(int pageindex, string orderfiled)
{
using (SqlConnection cn = new SqlConnection(SQLHelp.Conn))
{
cn.Open();
string sql = "GetRecordFromPage2005";
SqlCommand cmd = new SqlCommand(sql, cn);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@fieldlist", "commentid,commentuser,commenttext,commenttime");
cmd.Parameters.AddWithValue("@datasrc", "tb_WineComment");
cmd.Parameters.AddWithValue("@filter", " ");
cmd.Parameters.AddWithValue("@orderBy", orderfiled);
cmd.Parameters.AddWithValue("@pageNum", pageindex);
cmd.Parameters.AddWithValue("@pagesize", 5);
SqlDataReader dr = cmd.ExecuteReader();
IList list = new List();
while (dr.Read())
{
WineComment wc = new WineComment();
if (dr["CommentID"] != DBNull.Value)
{
wc.CommentID = (int)dr["CommentID"];
}
if (dr["CommentUser"] != DBNull.Value)
{
wc.CommentUser = (string)dr["CommentUser"];
}
if (dr["CommentText"] != DBNull.Value)
{
wc.CommentText = (string)dr["CommentText"];
}
if (dr["CommentTime"] != DBNull.Value)
{
//wc.CommentTime = (DateTime)dr["CommentTime"];
wc.CommentTime = ((DateTime)dr["CommentTime"]).ToString("yyyy-MM-dd HH:mm:ss");
}
list.Add(wc);
}
dr.Close();
return list;
}
}
前臺(tái)頁面的js代碼首先要引用
$().ready(function() {
InitWineComment(0);
});
function pageselectCallback(page_id, jq) {
InitWineComment(page_id);
}
function InitWineComment(pageindx)
{
var tbody = "";
$.ajax({
type: "GET",
dataType:"json",???//返回的格式
url:"handler/handler.ashx",??//處理的頁面
data: { action: "GetComments", p: (pageindx+1)},??//附帶的參數(shù)
beforeSend:function(){$("#divload").show();$("#Pagination").hide();},
complete:function(){$("#divload").hide();$("#Pagination").show()},
success:function(json) {
$("#comment tr:gt(0)").remove();
$.each(json, function(index, array) {//解析json
var trs = "";
trs += "
" + ((index+1)+5*(pageindx-0))+ ""?? +array['CommentUser'] + "" + array['CommentText'] +??????????????????????? ""+array['CommentTime']?????????????????????? +??????????????????????? "";tbody += trs;
});
$("#comment").append(tbody);
$("#comment tr:gt(0):odd").attr("class", "odd");
$("#comment tr:gt(0):even").attr("class", "enen");
$("#comment tr:gt(0)").hover(function(){
$(this).addClass('mouseover');
},function(){
$(this).removeClass('mouseover');
});
}});
$("#Pagination").pagination(, {//pagecount為評(píng)論的總條數(shù)
callback: pageselectCallback, //頁數(shù)改變觸發(fā)的事件
prev_text: '上一頁',
next_text: '下一頁',
items_per_page:5,? //每頁顯示5條
num_display_entries:6,
current_page:pageindx,? //當(dāng)前頁
num_edge_entries:2
});
}
Handler.ashx處理頁面的代碼為
case "GetComments":
int pi=int.Parse(context.Request.QueryString["p"].ToString());
string isorder = "commentid desc";
if (pi == 0)
pi = 1;
IList comment= WineCommentManager.WineCommentQueryAll(pi,isorder);
Content = JavaScriptConvert.SerializeObject(comment);
break;
context.Response.Write(Content);
前臺(tái)頁面的html的代碼很簡(jiǎn)單
網(wǎng)友評(píng)論
運(yùn)行效果如下:
總結(jié)
以上是生活随笔為你收集整理的java ajax无刷分页_asp.net+ajax+json来实现无刷新分页功能的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: java web日期_java-web—
- 下一篇: 父类卡子类卡java_Java中关于子类