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

  • 相关阅读:
    centos 编码问题 编码转换 cd到对应目录 执行 中文解压
    centos 编码问题 编码转换 cd到对应目录 执行 中文解压
    centos 编码问题 编码转换 cd到对应目录 执行 中文解压
    Android MVP 十分钟入门!
    Android MVP 十分钟入门!
    Android MVP 十分钟入门!
    Android MVP 十分钟入门!
    mysql备份及恢复
    mysql备份及恢复
    mysql备份及恢复
  • 原文地址:https://www.cnblogs.com/lmy213/p/2741086.html
Copyright © 2011-2022 走看看