JPagination分页插件的使用（ASP.NET中使用）

最新推荐文章于 2022-09-02 19:43:07 发布

weixin_34348805

最新推荐文章于 2022-09-02 19:43:07 发布

阅读量130

点赞数

文章标签： json xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/vichin/p/6951191.html

版权

前台代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="JqPaginator.Index" %>

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JPagination分页插件demo</title>
    <link href="CSS/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="CSS/style.css" rel="stylesheet" />/*这是插件的的样式*/
    <script src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>/*引用jquery脚本*/
    <script src="Scripts/jquery.paginate.js" type="text/javascript"></script>/*引用插件*/
    <script src="Scripts/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
    <h1>
        JPagination分页插件demo</h1>
    <table id="TB" class="table table-bordered table-striped table-hover">
        <tr id="TR">
            <th>
                行号
            </th>
            <th>
                SOP名字
            </th>
            <th>
                操作人
            </th>
            <th>
                操作时间
            </th>
        </tr>
    </table>
    <div id="paginator">
    </div>
    <input type="hidden" name="name" value="" id="input_getCount" />
    <script type="text/javascript">
        $(function () {
            getData(1); //初次运行，需要把第一页的数据放到页面显示，第一次加载完脚本之后，不会自动执行插件的onChange方法，所以需要认为的加载一次数据
            $("#paginator").paginate({
                count: getCount(),//getCount方法可以获取到数据的总页数
                start: 1,
                display: 7,
                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) {
                    getData(page);
                }
            });


        });
        function getCount() {
            var count = "";
            $.ajax({
                async: false,
                type: "post",
                url: "Handler1.ashx?action=getCount",
                data: {},
                success: function (result) {                    
                    count = result;
                }
            });
            return count;
        }
        function getData(page_index) {
            var new_content = "";
            $.ajax({
                type: "post",
                url: "Handler1.ashx?action=getData",
                data: { page: page_index },
                success: function (result) {
                    var content = eval(result);
                    for (var i = 0; i < content.length; i++) {
                        if (new_content.length == 0) {
                            new_content = "<tr><td>" + content[i]["NUM"] + "</td><td>" + content[i]["SOP"] + "</td><td>" + content[i]["NAME"] + "</td><td>" + content[i]["DATE"] + "</td></tr>";
                        } else {
                            new_content = new_content + "<tr><td>" + content[i]["NUM"] + "</td><td>" + content[i]["SOP"] + "</td><td>" + content[i]["NAME"] + "</td><td>" + content[i]["DATE"] + "</td></tr>";
                        }
                    }
                    $("#TR").empty().append(new_content); //装载对应分页的内容
                }
            });
        }
    </script>
</body>
</html>

在 jquery.paginate.js 这个文件中有一些默认的设定，比如说，每页显示的数量、页码的数量、首页、尾页按钮显示的文字……都可以在里面进行默认设置的更改

通过一般处理程序，请求后台数据，getCount会返回数据的总页数，getData会返回详细的数据（以JSON字符串的形式返回）

下面一段是后台代码，可以忽略不看。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using System.Text;

namespace JqPaginator
{
    /// <summary>
    /// Handler1 的摘要说明
    /// </summary>
    public class Handler1 : IHttpHandler
    {
        private static readonly string connStr = "Data Source=VICHIN-PC;Initial Catalog=MyTest;Integrated Security=True";
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string StrAction = context.Request.QueryString["action"];
            switch (StrAction)
            {
                case "getCount":
                    getCount(context);
                    break;
                case "getData":
                    getData(context);
                    break;
            }
            context.Response.End();
        }
        private void getData(HttpContext context)
        {
            string page_Str = context.Request["page"];
            int page = Convert.ToInt32(page_Str);
            int firstNum = page * 10 - 9;
            int secondNum = page * 10;
            string getData_Str = @"select A.NUM,A.SOP,A.NAME,A.[DATE] from (select ROW_NUMBER() OVER(order by NO asc) as NUM,SOP,NAME,[DATE] from dbo.SMTSOP_DELETE_RECORD) as A where A.NUM between " + firstNum + " and " + secondNum + "";
            DataTable getData_DT = Query(getData_Str);
            if (getData_DT.Rows.Count > 0)
            {
                context.Response.Write(DataTable2Json(getData_DT));
            }
        }
        private void getCount(HttpContext context)
        {
            string getCount_Str = "select COUNT(NO) as NumCount from dbo.SMTSOP_DELETE_RECORD";
            DataTable Count_DT = Query(getCount_Str);
            if (Count_DT.Rows.Count > 0)
            {
                int count = Convert.ToInt32(Count_DT.Rows[0][0].ToString());
                int j = count % 10;
                int k = count / 10;
                if (j != 0)
                    context.Response.Write((k + 1).ToString());
                else
                {
                    context.Response.Write(k.ToString());
                }
            }
        }
        public static string DataTable2Json(DataTable dt)
        {
            StringBuilder SB = new StringBuilder();
            SB.Append("[");
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                SB.Append("{");
                for (int j = 0; j < dt.Columns.Count; j++)
                {
                    SB.Append("\"");
                    SB.Append(dt.Columns[j].ColumnName);
                    SB.Append("\":\"");
                    SB.Append(dt.Rows[i][j].ToString());
                    SB.Append("\",");
                }
                SB.Remove(SB.Length - 1, 1);
                SB.Append("},");
            }
            if (dt.Rows.Count > 0)
            {
                SB.Remove(SB.Length - 1, 1);
            }
            SB.Append("]");
            return SB.ToString();
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
        public static DataTable Query(string sqlStr) //创建一个表集合,名字为GetData
        {
            SqlConnection conn = new SqlConnection(connStr);
            conn.Open();
            try
            {
                SqlCommand comm = new SqlCommand(sqlStr, conn);
                SqlDataAdapter da = new SqlDataAdapter(comm);
                DataTable dt = new DataTable();
                da.Fill(dt);
                return dt;
            }
            catch (Exception ex)
            {
                throw ex;
            }
            finally
            {
                conn.Close();
            }
        }
    }
}