AJAX实现无刷新分页(三层\存储过程\WebService\AJAX\Jquery)

最新推荐文章于 2022-11-09 11:30:12 发布

成长的小码农

最新推荐文章于 2022-11-09 11:30:12 发布

阅读量1k

点赞数

分类专栏： AJAX

本文链接：https://blog.csdn.net/zhs954838550/article/details/8957521

版权

AJAX 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

前台html页

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    table
    {
        border:1px solid #333;
        }
        table td
        {
            border:1px solid #333;
            }
    </style>
    <script src="Jquery1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var pageindex = 1;
            var pagesize = 10;
            var lastpageindex = 1;
            function fenye() {
                $.ajax({
                    type: "post",
                    contentType: "application/json",
                    url: "WebService1.asmx/GetListAjax",
                    data: "{pagesize:" + pagesize + ",pageindex:" + pageindex + "}",
                    success: function (result) {
                        //alert(result.d[0].NewsTitle);
                        var sb1 = '<table>';
                        sb1 += "<tr><td>编号</td><td>标题</td><td>内容</td><td>创建时间</td></tr>";
                        for (var i = 0; i < result.d.length; i++) {

                            sb1 += '<tr>';
                            sb1 += '<td>' + result.d[i].Id + '</td>';
                            sb1 += '<td>' + result.d[i].NewsTitle + '</td>';
                            sb1 += '<td>' + result.d[i].NewsContent + '</td>';
                            sb1 += '<td>' + result.d[i].CreateTime + '</td>';
                            sb1 += '<tr>';
                        }
                        sb1 += '</table>';
                        $('#mydiv').html(sb1);
                    }
                })

}

            $.ajax({
                type: "post",
                contentType: "application/json",
                url: "WebService1.asmx/pageindexcount",
                data: "{pagesize:" + pagesize + "}",
                success: function (result) {

                    lastpageindex = result.d;
                }
            })
            fenye();
            $('a:eq(0)').click(function () {
                pageindex = 1;
                fenye();
            })
            $('a:eq(1)').click(function () {
                if (pageindex > 1) {
                    pageindex--;
                    fenye();
                }

            })
            $('a:eq(2)').click(function () {
                if (pageindex < lastpageindex) {
                    pageindex++;
                    fenye();
                }

            })
            $('a:eq(3)').click(function () {
                pageindex = lastpageindex;
                fenye();
            })
            $('a:eq(4)').click(function () {
                pageindex = $('#txtpageindex').val();
                fenye();
            })

        })

    </script>
</head>
<body>
<div id="mydiv"></div>
<div>
<a href="#">第一页</a>
<a href="#">上一页</a>
<a href="#">下一页</a>
<a href="#">最后一页</a>
<input type="text" id="txtpageindex"/>
<a href="#">GO</a>
</div>
</body>
</html>

WebService代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;

namespace 分页
{
    /// <summary>
    /// WebService1 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
     [System.Web.Script.Services.ScriptService]
    public class WebService1 : System.Web.Services.WebService
    {

        [WebMethod]
        public string HelloWorld()
        {
            return "Hello World";
        }
        [WebMethod]
        public List<WebAJAX.Model.T_News1> GetListAjax(int pagesize,int pageindex)
        {
            WebAJAX.BLL.T_News1 bnews = new WebAJAX.BLL.T_News1();
            DataTable dt = bnews.GetListDataTable(pagesize, pageindex);
            List<WebAJAX.Model.T_News1> list = new List<WebAJAX.Model.T_News1>();
            int id;
            string newscontent = "";
            string newstitle = "";
            DateTime createtime;
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                id = Convert.ToInt32(dt.Rows[i]["Id"]);
                newstitle = dt.Rows[i]["NewsTitle"].ToString();
                newscontent = dt.Rows[i]["NewsContent"].ToString();
                createtime = Convert.ToDateTime(dt.Rows[i]["CreateTime"]);
                WebAJAX.Model.T_News1 news = new WebAJAX.Model.T_News1();
                {
                    news.Id = id;
                    news.NewsTitle = newstitle;
                    news.NewsContent = newscontent;
                    news.CreateTime = createtime;
                };
                list.Add(news);
            }
            return list;

        }
        [WebMethod]
        public int pageindexcount(int pagesize)
        {
            var lastpageindex = 1 ;
            WebAJAX.BLL.T_News1 pagecount = new WebAJAX.BLL.T_News1();
            var lastpage = pagecount.GetRecordCount("");
            if (lastpage % pagesize == 0)
            {
                lastpageindex = lastpage / pagesize;
            }
            else
            {
                lastpageindex = lastpage / pagesize + 1;
            }
            return lastpageindex;
        }
    }
}

存储过程代码

create Proc pro_fenye
@pagesize int,
@pageindex int
as
select * from(select ROW_NUMBER() over(order by Id) as rownumber,Id,NewsTitle,SUBSTRING(NewsContent,0,20)as NewsContent,CreateTime from T_News1) T
where rownumber>(@pageindex-1)*@pagesize and rownumber<=@pagesize*@pageindex
go

手写三层代码

BLL

//分页方法
        public DataTable GetListDataTable(int pagesize, int pageindex)
        {
            return dal.GetListDataTable(pagesize,pageindex);
        }

DAL

<summary>
   分页获取数据列表
   </summary>*/
  public DataTable GetListDataTable(int PageSize,int PageIndex)
  {
   SqlParameter[] parameters = {
     new SqlParameter("@PageSize", SqlDbType.Int),
     new SqlParameter("@PageIndex", SqlDbType.Int)
     };

   parameters[0].Value = PageSize;
   parameters[1].Value = PageIndex;

return DbHelperSQL.RunProcedureDataTable("pro_fenye", parameters);
}

sqlhelper

//分页执行存储过程返回DataTable
        public static DataTable RunProcedureDataTable(string storedProcName, IDataParameter[] parameters)
        {
            using (SqlConnection connection = new SqlConnection(connectionString))
            {
                DataTable dt = new DataTable();
                connection.Open();
                SqlDataAdapter sqlDA = new SqlDataAdapter();
                sqlDA.SelectCommand = BuildQueryCommand(connection, storedProcName, parameters);
                sqlDA.Fill(dt);
                connection.Close();
                return dt;
            }
        }

成长的小码农

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AJAX实现无刷新分页(三层\存储过程\WebService\AJAX\Jquery)

前台html页http://www.w3.org/1999/xhtml"> table { border:1px solid #333; } table td { border:1px solid #333; }
复制链接

扫一扫