ajax用三层写的无刷新效果的分页功能

最新推荐文章于 2020-01-08 18:02:34 发布
最新推荐文章于 2020-01-08 18:02:34 发布
阅读量736 收藏
点赞数
分类专栏： Ajax自我学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxfzgg/article/details/10200539
版权

前台：

<!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>
    <title></title>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
   <script type="text/javascript">
       $(function () {
           var pageindex = 1;
           var pagesize = 10;
           var lastpageindex = 1;
           /*如果将代码封装成一个函数，那么除非显示调用(loaddata())，否则函数中的代码不会执行
           根据传递的页码和每页显示的记录数量获取数据
           */
           function loaddata() {
               $.ajax({
                   type: "post",
                   contentType: "application/json",
                   url: "WebService1.asmx/GetListAjax",
                   data: "{pagesize:" + pagesize + ",pageindex:" + pageindex + "}",
                   success: function (result) {
                       var strtable = '<table>';
                       strtable += '<tr><td>编号</td><td>标题</td><td>内容</td><td>创建时间</td></tr>';
                       for (var i = 0; i < result.d.length; i++) {
                           strtable += '<tr>';
                           strtable += '<td>' + result.d[i].Id + '</td>';

                           strtable += '<td>' + result.d[i].NewsTitle + '</td>';

                           strtable += '<td>' + result.d[i].NewsContent + '</td>';

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

           //根据传递到后台的每页显示的记录数量来获取最大的页码(就是一共有多少页)
           $.ajax({
               type: "post",
               contentType: "application/json",
               url: "WebService1.asmx/GetLastPageindex",
               data: "{pagesize:" + pagesize + "}",
               success: function (result) {
                   lastpageindex = result.d;
               }
           })

           //显式调用函数，在页面初次加载时加载第一页数据
           loaddata();
           //下一页
           $('a:eq(2)').click(function () {
               //alert("ddd");
               if (pageindex < lastpageindex) {
                   pageindex++;
                   loaddata();
               }

           })
           //上一页
           $('a:eq(1)').click(function () {
               if (pageindex > 1) {
                   pageindex--;
                   loaddata();
               }
           })
           //第一页
           $('a:first').click(function () {
               pageindex = 1;
               loaddata();
           })
           //最后一页
           $('a:eq(3)').click(function () {
               pageindex = lastpageindex;
               loaddata();
           })
           $('a:last').click(function () {
               pageindex = $('#txtPageindex').val();
               loaddata();
           })
       })

   
    </script>
</head>

<body>
<div id="mydiv">
</div>
<div><a href="#">第一页</a><a href="#">上一页</a><a href="javascript:void(0);">下一页</a><a href="#">最后一页</a><input
        id="txtPageindex" type="text" /><a href="#">Go</a></div>
</body>
</html>
WebService1.asmx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;
using System.Text;
using WebApplication1;
using System.Data.Common;
using System.Data.SqlClient;

namespace Gridviewfenye
{
    /// <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<Model.T_News1> GetListAjax(int pagesize, int pageindex)
        {
            BLL.T_News1 bnews = new BLL.T_News1();
            DataTable dt = bnews.GetListDataTable(pagesize, pageindex);

            List<Model.T_News1> list = new List<Model.T_News1>();
            int Id;
            string newstitle = "";
            string newscontent = "";
            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"]);

                Model.T_News1 news = new Model.T_News1()
                {
                    
                    Id = Id,
                    NewsTitle = newstitle,
                    NewsContent = newscontent,
                    CreateTime = createtime
                };
                list.Add(news);
            }
            return list;
        }//数据加载
        [WebMethod]
        public int GetLastPageindex(int pagesize)
        {
            BLL.T_News1 bnews = new BLL.T_News1();
            int totalcount = bnews.GetRecordCount("");
            if (totalcount % pagesize == 0)
            {
                return totalcount / pagesize;
            }
            else
            {
                return totalcount / pagesize + 1;
            }
        }///得到总共的记录条数


        private string BinProvice()
        {
           DataTable dt=  SqlHelper.ExecuteDataTable("select * from province");
           SqlDataAdapter adapter = new SqlDataAdapter();
           adapter.Fill(dt);
           return dt.ToString();
        }

    }    
}
DAL:
 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);
        }
DbHelperSQL.cs
   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
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用三层实现分页利用ajax实现无刷新的效果
刘晓飞
05-22 628
前台： http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">                   $(function () {            var pageindex = 1;            var pagesize = 10;
Ajax实现分页一
Joy
08-24 510
这里要实现分页，我们的思路是从后台开始，先从数据库获取数据开始，那么首先我们要准备SQL语句select code,name,layer from area;这里我们查出了所有的数据 通过select count(1) from area;查出所有的数据，发现在area表里面一共有742717条数据，如果我们每页显示10条数据，那么就需要查出前十条数据 这里如果获取到前十条的数据，那么就需要借助
ajax分页
weixin_34364071的博客
01-30 62
<input type="button" onclick="but(this,0)" value="首页"><input type="button" onclick="but(this,1)" value="上一页"><span>当前页：<span style="color: #ff1a1e" class="page_"><?php echo ...
三层架构实现分页查询
crx666的博客
12-22 1502
public IList GetPage(CustomerSearchVO vo, int pageIndex, int pageSize, out int totalCount)         {             IList list = new List();             Customer customer = null;             string w
三层架构crud和分页及无刷新分页
04-10
综上所述，这个项目涉及到的IT知识点主要包括：三层架构的设计模式、前端Ajax技术实现的无刷新分页和CRUD操作、后端的业务逻辑处理以及数据访问。这样的设计既保证了系统的模块化，又提供了高效的用户交互体验。
AJAX和三层架构实现分页功能具体思路及代码
10-27
总结起来，这个示例展示了如何结合AJAX和三层架构来实现一个动态的、无刷新的分页功能。AJAX使得页面能够在后台加载新的数据，而三层架构则提供了良好的结构和职责分离，使得代码易于维护和扩展。对于初学者来说，这...
asp.net 三层架构 ajax局部刷新gridview
04-16
在提供的压缩包文件中，"liutizhong-5392309-asp.net_ajax_局部刷新_1618515014"可能包含了一个示例项目，演示如何在ASP.NET三层架构下实现AJAX局部刷新的GridView。这个项目可能包含了.aspx页面、后台代码文件、...
MVC3.0 无刷新 AJAX 分页 MvcPager
04-08
在MVC3.0环境下，使用MvcPager能实现无刷新分页效果，使用户在浏览大量数据时更加流畅。 **一、MvcPager的安装与配置** 1. 安装：可以通过NuGet包管理器来安装MvcPager，输入命令`Install-PackageMvcPager`即可...
Ajax_三层增删改_分页
08-08
综上所述，这个项目展示了如何使用Ajax、三层架构和jQuery实现一个具有增删改、批量删除和分页功能的Web应用，并利用SQL和存储过程进行数据库操作。这种设计模式和开发技术在现代Web开发中非常常见，对于理解和实践...
Django 前后端数据传输、ajax、分页器
weixin_34356138的博客
06-14 221
返回ORM目录Django ORM 内容目录： 一、MTV与MVC模式 二、多对多表三种创建方式 三、前后端传输数据 四、Ajax ​ 五、批量插入数据 六、自定义分页器 一、MTV与MVC模式 MTV模型 Django就是基于MTV模型的框架，其中: M:模型层 models.py T:templates V:视图层 views MVC模型...
前后端分离分页
xu704742366的博客
01-08 1340
https://www.jb51.net/article/171404.htm
使用 row_number 进行sqlserver分页
weixin_30954607的博客
06-07 82
例子： select top 5* from (SELECT ROW_NUMBER() OVER(ORDER BY ID ASC) AS rowid,* FROM CustomerInfo) c where c.rowid > ((2-1)*5) 解说： 这种写法效率比not in 那种更高，并且出错率更低，代码看起来更加简短 转载于:https://www.cnblogs.com/...
SQL Server 存储过程的分页方案比拼
热门推荐
李洪根的blog－专注软件开发技术
09-14 5万+
SQL Server 存储过程的分页，这个问题已经讨论过几年了，很多朋友在问我，所以在此发表一下我的观点建立表：CREATE TABLE [TestTable] ( [ID] [int] IDENTITY (1, 1) NOT NULL , [FirstName] [nvarchar] (100) COLLATE Chinese_PRC_CI_AS NULL , [LastName] [nva
ajax js分页算法分析
zhangw428的专栏
04-01 1473
显示效果：[页面总数小于等于10，全部显示，当前页特殊显示]上一页  1   2   3   4   5   6   7   8   9   10   下一页     [页面总数大于10，部分显示，当前页特殊显示]上一页  1   2   3   …   20   下一页       [当前页面为首页时，上一页不可用]上一页  1   2   3   4    …   20   下一页上一页 
利用ajax技术实现通用分页，在jsp页面呈现
mr_tangshuai的博客
09-16 3666
ajax可以直接用html静态页面异步加载数据，而标签库必须依赖jsp文件需要同步加载，用户体验相对来说肯定是ajax会好些。
ajax前后端分离，页面之间传值
探索ing
10-26 9581
在前后端分离书写中难免会遇到一个list页面点击修改操作需要传值的问题，那么我们如何进行传值和在列一个页面进行接受参数与后台交互呢？ 下面书写一个修改操作的传值 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Project&lt;/titl..
AJAX与SQL Server（一）
「 刘一哥与GIS的故事」
04-20 4415
本实例演示利用Ajax技术，通过asp文件，从SQL Server数据库中读取数据。 1、新建一个网站。 2、在网站目录下新建一个txt文档，改名为datasource.asp，内容为： <% response.expires=-1 sql="SELECT * FROM " sql=sql & request.querystring("q") Set conn = Server.C
四种方式实现SQLServer 分页查询
weixin_34113237的博客
12-16 566
SQLServer 的数据分页: 假设现在有这样的一张表：CREATE TABLE test(id int primary key not null identity,names varchar(20))然后向里面插入大约1000条数据，进行分页测试假设页数是10，现在要拿出第5页的内容，查询语句如下：--10代表分页的大小select top 10 *from testwhere id n...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值