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="width: 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="width: 18px; padding-top: 3px">                        <input type="image" οnclick="return ClickNextPage()" name="ibtn_next" id="ibtn_next" title="下一页"                            class="aspNetDisabled" src="../Images/btn_pager_next.gif" /></div><%--disabled="disabled"--%>                    <div style="width: auto;">                        第 <span id="lb_pager">1</span> 页</div>                    <div style="width: 18px; padding-top: 3px">                        <input type="image" οnclick="return ClickUpPage()" name="ibtn_prev" id="ibtn_prev" title="上一页"                            class="aspNetDisabled" src="../Images/btn_pager_prev.gif" style="width: 9px" /></div>                    <div style="width: 18px; padding-top: 3px">                        <input type="image" οnclick="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();        }    }

转载于:https://www.cnblogs.com/lmy213/archive/2012/10/26/2741086.html

相关资源：asp.net jquery无刷新分页插件(jquery.pagination.js)