jQuery PAGINATION 分页插件学习笔记

最新推荐文章于 2022-09-11 22:47:39 发布

原创最新推荐文章于 2022-09-11 22:47:39 发布 · 置顶 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #xmlhttprequest #function #json #string #stylesheet

ASP.NET 专栏收录该内容

32 篇文章

订阅专栏

这篇博客介绍了如何使用jQuery Pagination分页插件。首先，提供了插件的下载地址和使用说明文档链接，接着讲解了在网站中引入JS和CSS文件的步骤，最后提到了数据转换为JSON格式的方法。

Pagination分页插件下载地址 : http://plugins.jquery.com/project/pagination

使用说明文档：https://github.com/gbirke/jquery_pagination#readme

首先新建一个网站，并且添加js和css文件夹，并载入相关文件
Pagination js css 下载：http://plugins.jquery.com/project/pagination
jquery下载：http://jquery.com/

<head runat="server">
    <title></title>
    <link href="css/pagination.css" rel="stylesheet" type="text/css" />

    <script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>

    <script src="js/jquery.pagination.js" type="text/javascript"></script>

</head>

在这里通过json数据格式进行数据传输，所以需要一个json Helper将我们获取的数据转换成json格式数据，
json.net下载地址：http://json.codeplex.com/Release/ProjectReleases.aspx

将数据转换为Json格式方法：

public static string DataTableToJSON(DataTable dt, string tableName)
        {
            StringBuilder sb = new StringBuilder();
            StringWriter sw = new StringWriter(sb);

            using (JsonWriter jw = new JsonTextWriter(sw))
            {
                JsonSerializer jsria = new JsonSerializer();
                jw.WriteStartObject();
                jw.WritePropertyName(tableName);
                jw.WriteStartArray();
                foreach(DataRow dr in dt.Rows)
                {
                    jw.WriteStartObject();
                    foreach (DataColumn dc in dt.Columns)
                    {
                        jw.WritePropertyName(dc.ColumnName);
                        jsria.Serialize(jw, dr[dc].ToString());
                    }
                    jw.WriteEndObject();
                }
                jw.WriteEndArray();
                jw.WriteEndObject();
                jw.Close();
            }
            sw.Close();
            return sb.ToString();
        }

创建一个一般处理程序文件，处理请求

 public void ProcessRequest(HttpContext context)
        {
            //不让浏览器缓存
            context.Response.Buffer = true;
            context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);
            context.Response.AddHeader("pragma", "no-cache");
            context.Response.AddHeader("cache-control", "");
            context.Response.CacheControl = "no-cache";
            context.Response.ContentType = "text/plain";

            int page;
            int size=20;
            //int.TryParse(context.Request.QueryString["page"],out page);  GET方法传递
            int.TryParse(context.Request.Form["page"],out page);  //POST方法传递
            string data=DataTableToJson.DataTableToJSON(GetTable(page,size),"Customers");
            context.Response.Write(data);
        }


        public DataTable GetTable(int page, int size)
        {
            string cnnstr = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["Northwind"].ConnectionString;
            string cmdText = "select * from (select *, row_number() over( order by CustomerID desc) as row from Customers ) t where row >= " + ((page) * size+1) + " and row <" + ((page+1) * size);
            DataTable dt = new DataTable();
            SqlConnection cnn = new SqlConnection(cnnstr);
            using (cnn)
            {
                SqlCommand cmd = new SqlCommand(cmdText,cnn);
                cnn.Open();
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                da.Fill(dt);
            }
            return dt;
        }

页面Ajax调用：

    $().ready(function(){
            Initial(0);
        });
    
        function pageselectCallback(page_id, jq) {
            Initial(page_id);
        };
    
        function Initial(page) {
           var tbody = "";
            $.ajax({                
                type: "POST",
                dataType: "json",
                url: "DataSupply.ashx",
                data: "page=" + page,
                error:function(XmlHttpRequest,textStatus, errorThrown){alert(XmlHttpRequest);alert(textStatus);alert(errorThrown);},
                success: function(json) {
                   $("#customers tr:gt(0)").remove();
                    var datac = json.Customers;              
                    $.each(datac, function(index, data) {
                        var str ="";
                        str = "<tr><td>" + data.CustomerID + "</td><td>" + data.CompanyName + "</td><td>" + data.ContactName + "</td><td>" + data.ContactTitle + "</td></tr>";
                        tbody += str;
                    });
                    $("#customers").append(tbody);
                }
            });
            
            $("#pagination").pagination(<%=totalCount %>,{
                    items_per_page:20,
                    current_page:page,
                    next_text:">>",
                    prev_text:"<<",
                    num_edge_entries:2,
                    callback:pageselectCallback
                }); 
        }