jquery.pagination分页

慕容昊焜

2023-12-01

发现jquery的分页插件pagination后，在网上找了下，好像没找到把这个分页效果和查询数据内容结合的例子，所以就自己动手尝试下做做：

首先我们需要2个页面，pagination.aspx(展示页面)和ajaxpagination.aspx(ajax数据处理页面)还有就是我们的主角jquery.pagination.js和pagination.css。

先看pagination.aspx页面

 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>无标题页</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" href="js-css/pagination.css" />
<script type="text/javascript" src="js-css/jquery-1[1].2.6.min.js"></script>
<script type="text/javascript" src="js-css/jquery.pagination.js"> </script>
<script type="text/javascript" src="js-css/jpage.js"> </script>
     
    <script language="javascript" type="text/javascript">
        $(document).ready
        (
            function()
            {
                var pageNum = "<% =PageNum %>";
            
                 enURL = "ajaxpagination.aspx";
                if(pageNum > 0)
                {
                    loadPagination("Pagination", pageNum);
                }
            }
        );
    </script>
</head>
<body>
    
<form runat="server">
    <%--    加载分页插件--%>
        <div id="Pagination" class="pagination"></div>
        
    <%--分页内容 --%>
        <div id="Listinfo"></div>
   </form>
</body>
</html>
 

后台代码：

    protected string PageNum;
    public string connstr = "server=HAO-FNHTTF6NIZ0//SQLEXPRESS;database=so;uid=sa;pwd=123456";
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            //打开数据库表
            PageNum = OpenTable().ToString();

}

    }
    /// <summary>
    /// 读取数据库数据zongshu
    /// </summary>
    /// <returns></returns>
    public int OpenTable()
    {

        SqlConnection mycon = new SqlConnection(connstr);
        mycon.Open();
        SqlCommand mycom = new SqlCommand("select count(1) from ****", mycon);
        int count = int.Parse(mycom.ExecuteScalar().ToString());
        return count;
    }

上面代码13行的jpage.js：

// JScript 文件
var i, enURL;
//ajax事件
function ajax(type, url, data, cache, webpage)
{
$.ajax({
type: type,
url: url,
data: data,
cache: cache,
complete: function()
{
},
success: function(cont)
{
if(type == "get")
{
$("#" + webpage).html(cont);
}
else
{
webpage();
}
}
});
}
//首次加载ajax事件
function loadAjax(url, data, webpage)
{
$.ajax
(
{
type: "get",
url: url,
data: data,
success: function(cont)
{
$("#" + webpage).html(cont);
}
}
);
}
//分页按钮事件
function pageselectCallback(page_id, jq){
var page = page_id + 1;
var data;
data = "page=" + page;
ajax("get", enURL, data, false, "Listinfo");
}
function loadPagination(id, num)
{
// Create pagination element
$("#" + id).empty();
$("#" + id).pagination(
num,
{
num_edge_entries: 2,
num_display_entries: 4,
prev_text:'上一页',
next_text:'下一页',
callback: pageselectCallback
}
);
}
$(document).ready(function(){
loadAjax(enURL, null, "Listinfo");
});

我们在来看另外一个页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>无标题页</title>
</head>
<body>
<asp:Repeater ID="rpList" runat="server">
<ItemTemplate>
<%# Eval("id")%>
<%# Eval("title")%>
<%# Eval("content")%>
<hr />
</ItemTemplate>
</asp:Repeater>
</body>
</html>

后台程序：

public string connstr = "server=HAO-FNHTTF6NIZ0//SQLEXPRESS;database=so;uid=sa;pwd=123456";
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
//打开数据库表
if (Request.QueryString["page"] != null)
{
OpenTable(int.Parse(Request.QueryString["page"]));
}
else
{
OpenTable(1);
}
}
}
/// <summary>
/// 读取数据库数据构建索引
/// </summary>
/// <returns></returns>
public void OpenTable(int page)
{
SqlConnection mycon = new SqlConnection(connstr);
mycon.Open();
SqlCommand mycom = new SqlCommand("select top 10 * from **** WHERE (ID NOT IN (SELECT TOP (10*(" + page + "-1)) ID FROM so_main ))", mycon);
SqlDataAdapter da = new SqlDataAdapter(mycom);
DataTable dt = new DataTable();
da.Fill(dt);
if (dt.Rows.Count == 0)
{
Response.Write("<br />没有符合条件的数据");
}
else
{
rpList.DataSource = dt;
rpList.DataBind();
}
}

上面的方法只是我个人测试随便写的

不知道还有没有其他的好的方法，请大虾们指教下。

jquery.pagination分页

相关阅读

相关文章

相关问答

相关文档