jQuery PAGINATION 分页插件学习笔记

来源：互联网发布：农村淘宝的官网编辑：程序博客网时间：2024/05/21 08:52

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                });         }