zoukankan      html  css  js  c++  java
  • asp.net Jquery+json 实现无刷新分页

    两个页面

    1.TestJson.aspx 展示页面

    主要js和引用的js

    <link href="../Styles/FundCrm.css" rel="stylesheet" type="text/css" />
        <script src="../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            var IndexPage = 0;//第几页0开始
            var PageSize = 20;//每页显示多少条数据
            var RowCount = 0;//当前多少条数据
            var TotalCount = 0;//一共多少条数据
            function GetData() {
                $(".divTable").html("<br/><br/><br/><br/><br/><br/><br/><br/><br/><img src=\"../Images/loading.gif\" /><br/>正在加载......<br/><br/><br/><br/><br/>");
                $.getJSON("GetDataByJson.aspx?action=GetJson&index=" + IndexPage + "&PageSize=" + PageSize + "&time=" + Math.random(),
                    function (data) {
                        TotalCount = data[0].count; //一共多少条数据
                        var dataJson = data[0].Json;
                        RowCount = dataJson.length;
                        var table = "<table border=\"1\" cellpadding=\"0\" cellspacing=\"0\">";
                        table += "<tr>";
                        table += "<td>客户ID</td>";
                        table += "<td>客户姓名</td>";
                        table += "</tr>";
                        for (var i = 0; i < dataJson.length; i++) {
                            table += "<tr>";
                            table += "<td>";
                            table += dataJson[i].AccountId;
                            table += "</td>";
                            table += "<td>";
                            table += dataJson[i].Name;
                            table += "</td>";
                            table += "</tr>";
                        }
                        table += "</table>";
                        $(".divTable").html(table);
                        SetPage();
                    }
                );
            }
            $(document).ready(function () {
                GetData();
            });
            //设置分页
            function SetPage() {
                if (IndexPage == 0) {
                    $("#ibtn_prev").attr("disabled", "disabled"); //上一页
                    $("#ibtn_frist").attr("disabled", "disabled"); //首页
                } else {
                    $("#ibtn_prev").attr("disabled", ""); //上一页
                    $("#ibtn_frist").attr("disabled", ""); //首页
                }
                $("#lb_pager").text(IndexPage + 1);
                var start = IndexPage * PageSize + 1;
                var end = 0;
                if (RowCount == PageSize) {
                    end = start - 1 + PageSize;
                } else {
                    end = start - 1 + RowCount;
                }
                $("#lb_record").html(start + " - " + end);
                $("#lb_total").text(TotalCount);
            }
            //点击下一页
            function ClickNextPage() {
                IndexPage++;
                GetData();
                return false;
            }
            //点击上一页
            function ClickUpPage() {
                IndexPage--;
                GetData();
                return false;
            }
            //点击首页
            function ClickFirstPage() {
                IndexPage = 0;
                GetData();
                return false;
            }
        </script>

    页面内容:

    <div class="divTable" style="text-align:center;">
        </div>
        <div class="gridview_table">
            <table style=" 100%;" border="0" cellpadding="0" cellspacing="0" class="pager">
                <tr>
                    <td class="left">
                        <span id="lb_record">1 - 1</span> 条(共 <span id="lb_total">1</span>条)
                    </td>
                    <td class="right">
                        <div style=" 18px; padding-top: 3px">
                            <input type="image" onclick="return ClickNextPage()" name="ibtn_next" id="ibtn_next" title="下一页"
                                class="aspNetDisabled" src="../Images/btn_pager_next.gif" /></div><%--disabled="disabled"--%>
                        <div style=" auto;">
                            第 <span id="lb_pager">1</span> 页</div>
                        <div style=" 18px; padding-top: 3px">
                            <input type="image" onclick="return ClickUpPage()" name="ibtn_prev" id="ibtn_prev" title="上一页"
                                class="aspNetDisabled" src="../Images/btn_pager_prev.gif" style=" 9px" /></div>
                        <div style=" 18px; padding-top: 3px">
                            <input type="image" onclick="return ClickFirstPage()" name="ibtn_frist" id="ibtn_frist" title="第一页"
                                class="aspNetDisabled" src="../Images/btn_pager_frist.gif" /></div>
                    </td>
                </tr>
            </table>
        </div>

    2.后台数据页面 GetDataByJson.aspx 一般都是写在hander里面

    全部后台CS代码,aspx页面不需要任何代码:

    public partial class GetDataByJson : System.Web.UI.Page
        {
            int PageIndex = 0;
            int PageSize = 20;
            protected void Page_Load(object sender, EventArgs e)
            {
                string action = Request.QueryString["action"];
                if(!string.IsNullOrEmpty(Request.QueryString["index"]))
                    PageIndex = Convert.ToInt32(Request.QueryString["index"]);
                if (!string.IsNullOrEmpty(Request.QueryString["PageSize"]))
                    PageSize = Convert.ToInt32(Request.QueryString["PageSize"]);
                if (action == "GetJson")
                {
                    GetJson();
                }
            }
            /// <summary>
            /// 获取json数据
            /// </summary>
            /// <returns></returns>
            public void GetJson()
            {
                StringBuilder sbSql = new StringBuilder();
                sbSql.Append("select b.* from Account acc ");
                sbSql.Append("inner join( ");
                sbSql.Append("select * from( ");
                sbSql.Append("select ROW_NUMBER() over(Order by Name) rownum,Name,AccountId from Account ");
                sbSql.Append(")a ");
                sbSql.Append(string.Format("where a.rownum between {0} and {1} ", (PageSize * PageIndex + 1), PageSize *
    (PageIndex + 1)));
                sbSql.Append(")b on acc.AccountId=b.AccountId");
                DbHelperSQL.connectionString = PubConstant.GetConnectionString("SqlConnectionString");
                DataSet ds = AreCrm.DBUtility.DbHelperSQL.Query(sbSql.ToString());
                string json = ToJson(ds.Tables[0]);
                sbSql = new StringBuilder();
                sbSql.Append("select count(AccountId) count from Account ");
                DbHelperSQL.connectionString = PubConstant.GetConnectionString("SqlConnectionString");
                ds = AreCrm.DBUtility.DbHelperSQL.Query(sbSql.ToString());
                json = "[{\"count\":\"" + ds.Tables[0].Rows[0][0] + "\",\"Json\":" + json + "}]";
                Response.Write(json);
                Response.End();
            }
            /// <summary>
            /// 一共多少条数据
            /// </summary>
            /// <returns></returns>
            public void GetCount()
            {
                StringBuilder sbSql = new StringBuilder();
                sbSql.Append("select count(AccountId) count from Account ");
                DbHelperSQL.connectionString = PubConstant.GetConnectionString("SqlConnectionString");
                DataSet ds = AreCrm.DBUtility.DbHelperSQL.Query(sbSql.ToString());
                string json = ToJson(ds.Tables[0]);
                Response.Write(json);
                Response.End();
            }
            /// <summary>     
            /// dataTable转换成Json格式     
            /// </summary>     
            /// <param name="dt"></param>     
            /// <returns></returns>     
            public static string ToJson(DataTable dt)
            {
                StringBuilder jsonBuilder = new StringBuilder();
                jsonBuilder.Append("[");
                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    jsonBuilder.Append("{");
                    for (int j = 0; j < dt.Columns.Count; j++)
                    {
                        jsonBuilder.Append("\"");
                        jsonBuilder.Append(dt.Columns[j].ColumnName);
                        jsonBuilder.Append("\":\"");
                        jsonBuilder.Append(dt.Rows[i][j].ToString());
                        jsonBuilder.Append("\",");
                    }
                    jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
                    jsonBuilder.Append("},");
                }
                jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
                jsonBuilder.Append("]");
                return jsonBuilder.ToString();
            }
        }

  • 相关阅读:
    Mac连接远程Linux管理文件(samba)
    centos6 防火墙iptables操作整理
    安装postgresql
    linux CentOS6.5 yum安装mysql 5.6
    centos--git搭建之Gogs安装
    查看mysql 默认端口号和修改端口号
    centos之mysql安装配置使用
    流媒体服务器SRS部署
    redis配置文件参数说明
    redis 安装
  • 原文地址:https://www.cnblogs.com/lmy213/p/2741086.html
Copyright © 2011-2022 走看看