实现Ajax分页

article/2025/10/20 8:59:32

    <!-- 引入jQuery的类库 -->
    <script type="text/javascript" scr="js/jquery-3.3.1.js"></script>
    <!-- 另起一个script块 -->
    <script type="text/javascript">
    //页面载入函数
    $(function(){
        //默认显示第1页
        myf('a');
    })
    //扩大作用域
    var pageIndex;
    var max;
    //写一个方法专门控制分页
    function myf(type){
        if(type=='a'){
            //首页
            pageIndex=1;
        }
        else if(type=='b'){
            //上一页
            if(pageIndex>1){
                pageIndex--;
            }
            else{
                alert("兄die,已经是第一页了嘞");
            }
        }
        else if(type=='c'){
            //下一页
            if(pageIndex<max){
                pageIndex++;
            }
            else{
                alert("兄die,已经是最后一页了嘞");
            }
        }
        else{
            //末页
            pageIndex=max;
        }
        //ajax
        $.post("page.do", {pid:pageIndex}, function(data) {
            //用*分割
            var x=data.split("*");
            //x[0]代表json格式的对象数组字符串
            //x[1]代表max值 
            //将json格式的对象数组字符串-->js的对象数组
            var ss=$.parseJSON(x[0]);
            //给max赋值
            max=parseInt(x[1]);
            var sb="<table border=\"1px\"><tr align='center'><td>商品序号</td><td>商品名称</td><td>商品图片</td></tr>";
            //循环遍历
            $.each(ss, function(i, g) {//下标,元素=对象
                sb+="<tr align='center'>";
                sb+="<td>"+g.gid+"</td>";
                sb+="<td>"+g.gname+"</td>";
                sb+="<td><img src='"+g.gpath+"'/></td>";
                sb+="</tr>";
            })
            sb+="</table>";
            sb+="["+pageIndex+"/"+max+"]";
            //给div赋值
            $("#aa").html(sb);
        })
    }
</script>

 


http://chatgpt.dhexx.cn/article/QH6LkrLU.shtml

相关文章

jquery ajax 分页 java_jquery +ajax 分页实现

分页 a{text-decoration: none} .content{width:1000px;margin:0 auto;padding-top:50px;} .left-col{float:left;width:700px} .right-col{float:right;width:300px} table{width:100%} table{border-collapse:collapse;border-spacing: 0} table tr{border:1px solid #ccc;he…

ajax分页插件哪个好用,分享精心挑选的12款优秀jQuery Ajax分页插件和教程

Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高&#xff0c;如今借助优秀的 jQuery 框架很容易实现各种基于 Ajax 技术实现的功能。我们一起来看看下面这些优秀的分页插件。1.Client-side jQuery pagination plugin : jPages jPages是一款非常不错的客户端分页插件&…

tp5的ajax搜索后分页,修改TP5的分页类使之Ajax分页有效

Thinkphp 5.1采用Ajax分页后&#xff0c;首页自然不是问题&#xff0c;但是后续的页面链接仍然指向原地址&#xff1b;虽然可以取回数据&#xff0c;但是没有样式的渲染——因为此时的页面只有“一部分”本身就没有CSS样式&#xff01; 解决的办法有很多&#xff0c;比如重新创…

DataTables PHP AJAX 分页

DataTables 是一个 jQuery 插件&#xff0c;可以更轻松地在网页上添加分页。 只需要添加记录列表&#xff0c;它就会自动调整数据并创建具有搜索和排序功能的分页。 有一些选项可用于实现AJAX 分页。 在本教程中&#xff0c;我将展示如何使用 PHP 在 DataTables 中实现 AJAX …

html ajax分页,简单ajax 分页

简单分页&#xff1a; 效果图&#xff1a; 思路&#xff1a; 数据渲染》数据遍历(每页显示已规定好的条数).bindList()和执行分页渲染.initPaginator() 点击分页和下一页的时候&#xff0c;重新请求数据渲染&#xff0c;对应的数据重新遍历。 代码实现&#xff1a; html:分页测…

Ajax做分页

用这种ajax做分页的方法比较简单&#xff0c;把代码直接复制就可以&#xff0c;然后根据实际更改一下里面的参数。 1.设置分页显示显示的样式&#xff0c;显示效果如下。 <style type"text/css"> *{ margin:0px auto; padding:0px; font-family:"微软雅黑…

ajax实现分页操作

利用ajax请求数据的特点&#xff0c;来实现分页操作。 主要是利用ajax进行后端分页&#xff0c;当点击对应的页数&#xff0c;ajax请求数据库对应的数据&#xff0c;后端分页可以降低前端请求数据的压力&#xff0c;页面渲染起来比较流畅。 根据后台请求的数据&#xff0c;来创…

XUnit测试框架-Python unittest

选择 语言选择 本次个人作业我选择的语言是Python,了解学习Python有一段时间了但是一直没有练习&#xff0c;所以这次玩蛇&#xff0c;使用的版本是Python3.6。 开发工具选择 我选择的IDE是Pycharm,个人认为Pycharm是一款不错的Py开发工具&#xff0c;用起来得心应手&#xff0…

单元测试-xUnit

单元测试-xUnit Assert常用方法 名称描述Eqalexpected.result)断言结果与期望值相等。该方法的重载版本用于比较不同的类型和集合。该方法的另一种版本接受一个额外参数该对象实现了用于比较对象的IEqualityComparer接口NotEqual(expected,result)断言结果不等于期望值True(r…

xUnit安装及注意事项

前言 对于单元测试&#xff0c;想必大家都已再熟悉不过了&#xff0c;同时单元测试的重要性也越发突出&#xff0c;在招聘中也特别强调单元测试&#xff0c;但是对于微软内置的单元测试还是太过于繁琐&#xff0c;于是都在寻找一种简洁并且更加轻量的测试工具。用的最多的莫过于…

Xunit.net 单元测试学习——按顺序测试

最近一直在提高编码的质量&#xff0c;为了保证质量&#xff0c;必须有一套趁手的兵器&#xff0c;Xunit.Net 就是如此霸气的利器。 怎么编写单元测试 怎么会有如此低级的疑问呢&#xff1f;因为从接触单元测试&#xff0c;到使用上&#xff0c;真的不是一个简单的心路历程&am…

单元测试-xUnit总结

xUnit总结 什么是xUnit xUnit.net是针对.NET Framework的免费&#xff0c;开源&#xff0c;以社区为中心的单元测试工具。 自动化测试的优点 可以频繁的进行测试可以在任何时间进行测试&#xff0c;也可以按计划定时进行&#xff0c;例如&#xff1a;可以在半夜进行自动化测…

单元测试之 Xunit

&#xfeff;&#xfeff; 单元测试项目中引入 xunit.dll 1. 有类 Common&#xff0c;中有方法 Divide(int a, int b)&#xff0c;代码如下 public class Common {public int Divide(int a, int b){if (b 0)return 0;return a / b;} } 2. 在单元测试项目中为方法 Divide 写单元…

使用 xunit 编写测试代码

使用 xunit 编写测试代码 Intro xunit 是 .NET 里使用非常广泛的一个测试框架&#xff0c;有很多测试项目都是在使用 xunit 作为测试框架&#xff0c;不仅仅有很多开源项目在使用&#xff0c;很多微软的项目也在使用 xunit 来作为测试框架。 Get Started 在 xunit 中不需要标记…

C#_Unit Testing 一(xUnit)

一、前言 在VS中新建一个xunit的项目&#xff0c;该项目中已经自动安装了一些Nuget包&#xff0c;其中一个关键的就是xunit&#xff0c;https://xunit.net/。 同时&#xff0c;在同一个解决方案下我们也新建了一个类库&#xff0c;这个类库就是需要被测试的。这里提一点&…

在.NET开发中的单元测试工具之(2)——xUnit.Net

在上一篇《在.NET开发中的单元测试工具之(1)——NUnit》中讲述了如何使用NUnit在.NET开发中进行单元测试以及NUnit的一些缺点&#xff0c;今天将讲述如何使用xUnit.Net来进行单元测试。 xUnit.Net介绍 xUnit.net的创造者的创造者是Jim Newkirk和Brad Wilson从包括NUnit及其它单…

单元测试中Assert详解-xUnit

前一篇&#xff1a;详谈单元测试-xUnit 简介 Assert 是基于代码的返回值、对象的最终状态、事件是否发生等情况来评估测试的结果。Assert 的结果可能是 Pass 或者 Fail。如果所有的 Asserts 都通过了&#xff0c;那么整个测试就通过了。如果任何 Asserts 失败了&#xff0c;那…

xUnit-Moq框架

基于上一次的单元测试-xUnit进行 Models文件夹 Staff类修改为&#xff1a; public class Staff { public int Id { get; set; } public string Name { get; set; } public string State { get; set; } public int Age { get; set; } } 创建一个IRepository接口…

xUnit.net入门

xUnit.net是一个免费的、开源的、以社区为中心的.net框架单元测试工具。 本文在Win10Visual Studio2022-Preview下&#xff0c;创建一个简单的.Net Framework4.8的xUnit.net测试项目。 1、新建项目 打开VS2022&#xff0c;新建项目&#xff0c;弹出“创建新项目”窗口&#…

xUnit总结--学习笔记

xUnit.net是针对.NET Framework的免费&#xff0c;开源&#xff0c;以社区为中心的单元测试工具。 自动化测试的优点# 可以频繁的进行测试可以在任何时间进行测试&#xff0c;也可以按计划定时进行&#xff0c;例如&#xff1a;可以在半夜进行自动化测试比人工测试速度快可以更…