ajax 动态绑定table同时实现分页

最新推荐文章于 2021-08-05 20:01:06 发布
最新推荐文章于 2021-08-05 20:01:06 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： java 文章标签： java ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BenXinx/article/details/44623315
版权
$(document).ready(function()
{
   
    $("#next").click(function(){
        
        //总页数
        var pageall =parseInt($("#lblPageCount").html());//总记录
        var number=(pageall/100>parseInt(pageall/100))?parseInt(pageall/100)+1:parseInt(pageall/100);
        var lblpage=$("#lblpage").html();
        if(parseInt(number) ==0 || parseInt(number) ==1 || parseInt(lblpage)==parseInt(number))
        {
            //alert(1);
            
        }
        else
        {
            //上一页
            $("#previous").css('color','#0000EE');
            //首页
            $("#first").css('color','#0000EE');
            //页数
            var lblpage=$("#lblpage").html();
            var page=parseInt(lblpage)+1;
            //
            $("#lblToatl").html(parseInt(lblpage)*100+1);                
            $("#lblCurent").html(parseInt(lblpage)*100+100);
            //第几页
            $("#lblpage").html(parseInt(lblpage)+1);
            var i = parseInt(lblpage)*100+1;                
        
            var whsql = $("#lblwhsql").text();
            var list=$("#lbldrplist").text();
            if(parseInt(page) == parseInt(number) )
            {
                $("#next").css('color','#999999');
                $("#last").css('color','#999999');
                $("#lblCurent").html(pageall);            
            }
            
            BindTable(whsql,list,page,i);
        }
    });
    //上一页
    $("#previous").click(function(){
        //下一页        
        var lblpage=$("#lblpage").html();
        if(parseInt(lblpage)==1)
        {}
        else
        {        
            //下一页
            $("#next").css('color','#0000EE');
            //末页
            $("#last").css('color','#0000EE');
            var page=parseInt(lblpage)-1;
            var i = parseInt(page-1)*100+1;
            $("#lblToatl").html(parseInt(page-1)*100+1);                
            $("#lblCurent").html(parseInt(page-1)*100+100);
            $("#lblpage").html(page);        
            if(page==1)
            {
                $("#previous").css('color','#999999');
                //首页
                $("#first").css('color','#999999');
                $("#lblToatl").html(1);                
                $("#lblCurent").html(100);        
                $("#lblpage").html(1);            
            }
            
            var whsql = $("#lblwhsql").text();
            var list=$("#lbldrplist").text();
            BindTable(whsql,list,page,i);
        }
    });
    //首页
    $("#first").click(function(){
        var lblpage=$("#lblpage").html();
        if(parseInt(lblpage)==1)
        {}
        else
        {
            $("#last").css('color','#0000EE');
            $("#next").css('color','#0000EE');
            $("#previous").css('color','#999999');
            $("#first").css('color','#999999');
            
            
            $("#lblToatl").html(1);                
            $("#lblCurent").html(100);        
            $("#lblpage").html(1);
            var page=1;
            var i=1;
            var whsql = $("#lblwhsql").text();
            var list=$("#lbldrplist").text();
            BindTable(whsql,list,page,i);
        }
    
    });
    //末页
    $("#last").click(function(){
        
        //总页数
        var pageall =parseInt($("#lblPageCount").html());//总记录
        var number=(pageall/100>parseInt(pageall/100))?parseInt(pageall/100)+1:parseInt(pageall/100);
        var lblpage=$("#lblpage").html();
        if(parseInt(number)==0 || parseInt(number)==1 || parseInt(lblpage)==parseInt(number))
        {
            //alert(number);
            
        }
        else
        {
            $("#next").css('color','#999999');
            $("#previous").css('color','#0000EE');
            $("#last").css('color','#999999');
            $("#first").css('color','#0000EE');
            $("#lblToatl").html(parseInt(number-1)*100+1);                
            $("#lblCurent").html(pageall);
            //第几页
            $("#lblpage").html(number);
            var i = parseInt(number-1)*100+1;
            var whsql = $("#lblwhsql").text();
            var list = $("#lbldrplist").text();
            var page = number;
            BindTable(whsql,list,page,i);
        }

    });

$("#btnSub").click(function(){                
                $("#showTop").css('display','none');
                $("#headTab").css('display','block');
                $("#divShield").css('display','none');
                $("#Pipage").css('display','block');
                //下一页
                $("#next").css('color','#0000EE');
                //末页
                $("#last").css('color','#0000EE');    
                //上一页
                $("#previous").css('color','#999999');
                //首页
                $("#first").css('color','#999999');
                
                $("#lblToatl").html(1);                
                $("#lblCurent").html(100);
                $("#lblpage").html(1);
                $("#tabRept").empty();
                var i=1;
                        var whsql="";  
                        whsql="  dTimeCenter >='" + $("#txtStart").val() + " 00:00:00" + "' and dTimeCenter<='" + $("#txtEnd").val() +" 23:59:59"+ "' ";

                       $("#lblwhsql").html(whsql);
                       $("#lbldrplist").html($("#drplist").val());
                
                 BindTable(whsql,$("#drplist").val(),1,i);                
            });

});

//分页
        function BindTable(whsql,list,page,i)//whsql 传递的查询条件 list我需要的一个传值 page是页数   1第几页用来绑定的  后台分页只需要page
        {
            $("#loading").css('display','inline-block');
            $("#dtab").css('display','none');
            $("#divtab").css('display','inline-block');
            $("#tabRept").empty();
                $.ajax({  
                    type:"post",//请求方式                      
                    url: encodeURI(encodeURI("pageReportName?iType=8&whsql="+whsql+"&drplist="+list+"&page="+page)),                
                     success:function(data)
                     {
                         var jsonstr=eval("("+data+")");
                         $("#lblPageCount").html(jsonstr[0].total);
                         
                         var pageall =parseInt(jsonstr[0].total);//总记录
                        var number=(pageall/100>parseInt(pageall/100))?parseInt(pageall/100)+1:parseInt(pageall/100);
                         $("#lblALLpage").html(number);
                         
                         var jsonData=jsonstr[0].rows;
                         if(parseInt(list)==0)
                         {
                             $("#tbo").css('display','none');
                             $("#tabRept").append("<tr><td style=\"width:40px\">&nbsp;</td><td style=\"width:120px\">&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td style=\"width:130px\">&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>");
                             for(var key in jsonData)
                             {
                                 $("#tabRept").append("<tr><td style=\"width:40px\">"+i+"&nbsp;</td><td style=\"width:120px\">" + jsonData[key].CUSERNAME + "&nbsp;</td><td>" + jsonData[key].CHOSTNAME + "&nbsp;</td><td>" + jsonData[key].CUNITNAME + "&nbsp;</td><td>" + jsonData[key].CDEPTNAME + "&nbsp;</td><td  style=\"width:130px\">" + jsonData[key].CHOSTUSER + "&nbsp;</td><td>" + jsonData[key].ALARMS + "&nbsp;</td><td>" + jsonData[key].DTIMELOCAL + "&nbsp;</td><td>" + jsonData[key].DTIMECENTER + "&nbsp;</td><td>" + jsonData[key].STYLE + "&nbsp;</td><td>" + jsonData[key].CPOLDIP + "&nbsp;</td><td>" + jsonData[key].CPNEWIP + "&nbsp;</td></tr>");   
                                 i++;
                             }
                         }
                         else
                         {
                             $("#tbo").css('display','block');
                             $("#tabRept").append("<tr><td style=\"width:40px\">&nbsp;</td><td style=\"width:120px\">&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td style=\"width:130px\">&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>");
                             for(var key in jsonData)
                             {
                                 $("#tabRept").append("<tr><td style=\"width:40px\">"+i+"&nbsp;</td><td style=\"width:120px\">" + jsonData[key].CUSERNAME + "&nbsp;</td><td>" + jsonData[key].CHOSTNAME + "&nbsp;</td><td>" + jsonData[key].CUNITNAME + "&nbsp;</td><td>" + jsonData[key].CDEPTNAME + "&nbsp;</td><td  style=\"width:130px\">" + jsonData[key].CHOSTUSER + "&nbsp;</td><td>" + jsonData[key].ALARMS + "&nbsp;</td><td>" + jsonData[key].DTIMELOCAL + "&nbsp;</td><td>" + jsonData[key].DTIMECENTER + "&nbsp;</td><td>" + jsonData[key].STYLE + "&nbsp;</td><td>" + jsonData[key].CPOLDIP + "&nbsp;</td><td>" + jsonData[key].CPNEWIP + "&nbsp;</td><td>" + jsonData[key].CCSIP + "&nbsp;</td></tr>");   
                                 i++;
                             }
                             $("#tbo").removeAttr("style");
                             
                         }
                         $("#loading").css('display','none');
                        $("#dtab").css('display','inline-block');
                        $("#divtab").css('display','none');
                     }
             });
        }



----------------------------------------------以上js----------------------------

--界面--

<div id="headTab">  
            <div id="dtab">
                <table id="tabRept" cellpadding="0" cellspacing="0" style="table-layout:fixed;">
                    <tr>
                        <th style="width:40px">&nbsp;</th>
                        <th style="width:120px">责任人</th>
                        <th>主机名</th>
                        <th>单位名称</th>
                        
                        <th>部门名称</th>
                        <th style="width:130px">当前用户名</th>
                        <th>报警等级</th>
                        <th>本地时间</th>
                        
                        <th>中心时间</th>
                        <th>审计类型</th>
                        <th>原IP</th>
                        <th>新IP</th>
                        <th ID="tbo">子中心IP</th>
                    </tr>
                </table>
            </div>
        <div id="loading">正在加载中，请稍后...</div>
    </div>
    <div id="Pipage" >
        <div id="Pileft">
            <a id="first" href="javascript:void(0);">[首页]</a>
            <a id="previous" href="javascript:void(0);">[上一页]</a>
            <a id="next" href="javascript:void(0);">[下一页]</a>
            <a id="last" href="javascript:void(0);">[末页]</a>
        </div>
        <div id="Piright">
            第<lable id="lblpage">1</lable>页，显示<label id="lblToatl">1</label>到<label id="lblCurent">100</label>
            ，共<lable id="lblALLpage">1</lable>页<label id="lblPageCount">0</label>条记录
        </div>        
    </div>



---------因为要固定表头，表th固定表头的写法，这中分页方式可参考比较特殊慎用---------





JasonHix
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【看板】ajax动态获取后台传来json数据，加载到页面表格中
德仔
09-05 1362
近期需要在汽车产品车间开发几个看板，其中一个看板需要动态加载表格。通过ajax动态获取webapi传过来的json数据，加载表格。
ajax实现表格分页功能
m0_46233451的博客
05-19 527
一.数据库分页查询 1.mysql分页查询 select * from table limit a,b a:下标，从0开始 b:长度 mysql> select * from stu limit 0,10; +----+--------+-----------------------------------------+------------+ | id | name | address | birthday | +----
java jquery分页查询_jQuery实现分页功能（含ajax请求、后台数据、附完整demo）
weixin_27729671的博客
02-19 556
需求分析1)需要首页，末页功能2)有点击查看上一页，下一页功能3)页码到当前可视页码最后一页刷新页面实现思路也是分为三部分处理1)点击首页，末页直接显示第一页或者最后一页内容，当前页面为第1页或者最后一页。隐藏首页或者末页按钮。demo 显示截图首页状态 和 末页状态代码执行结果截图2)点击可视页码截图3)点击上一页或者下一页，，需要刷新页码状态时截图，昨天表示当前页码为7，右图是点击上一页，刷新...
ajax的分页分页请求,通过ajax来分页
肥猫钓鱼
12-01 553
这里面通过自定义标签实现的,因为项目没有采用jsp模板而是用的freemarker,做次记录,方便 以后使用巩固 birthday.html中嵌套的share.html页面 自定义分页标签：AjaxPagerDirectiveModel 以及生成分页的样式的工具类：AjaxPagerHtmlBuilder 自定义查询数据标签：CommentListTag---BaseFre...
html ajax分页,ajax动态加载页面（分页）
weixin_42299679的博客
06-20 312
ajax请求控制层返回的页面append到相应的标签中。@RequestMapping("/ajaxFindProjectByCodition")public String ajaxFindProjectByCodition(@RequestParam(value="projectIndustry",defaultValue="-1") Integer projectIndustry,@Reque...
Ajax方式渲染分页
qianduankangkang的博客
05-11 223
Ajax方式渲染分页 分页效果： 直接上代码 注：要引入require.js插件 HTML段：模块.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con...
ajax 实现网页异步数据替换
Armin
03-17 1480
今天做了下网页数据的处理（效果如下）：点击上面的分类 ，下面的数据将根据筛选发生替换（jquery+ajax+symfony+twig+css） 效果 代码如下： jquery+ajax: //trainingcontainer click $('.trainingcontainer').on('click', function(){ $('.ajax-click-ev
JS代码实现table数据分页效果
10-22
JavaScript部分通过jQuery的事件绑定和`slice()`方法实现了分页功能。 ```javascript $(function() { var $table = $('table'); // 获取表格对象 var currentPage = 1; // 设置当前页默认值为1 var pageSize = 3...
用table绑定数据，实现分页功能
01-14
本教程将详细讲解如何利用表格（Table）绑定数据并实现分页功能。我们将重点关注以下几个核心知识点： 1. **HTML Table**： HTML中的`<table>`元素用于创建表格，它由`<tr>`（行）、`<th>`（表头）和`<td>`（数据...
基于Jquery实现表格动态分页实现代码共7页.pdf.z
10-31
JQuery，作为一款强大的JavaScript库，提供了丰富的API和工具，使得基于Jquery实现表格动态分页变得简单易行。本篇将深入探讨如何利用Jquery实现这一功能。 首先，动态分页的核心在于数据的加载和展示。在Jquery中...
JS实现table表格数据排序功能(可支持动态数据+分页效果)
11-22
这个场景中，我们讨论的是如何用JavaScript实现一个表格的动态数据排序，并且支持分页，主要涉及到以下知识点： 1. **HTML表格**: HTML中的`<table>`元素用于创建表格，`<tr>`表示表格行，`<td>`表示表格单元格。在...
关于ajax异步请求后台数据进行动态分页
东方不败的好朋友的博客
07-28 1万+
ajax请求后台拿到json类型的数据后，可以在它的success回调方法中进行动态分页，也就是表格重绘，此时，我们需要得到的数据包括：查询得到的数据、数据总条数、总页数、当前页数，其中前三条可在后台获取，对于当前页数，需要从前端获取点击页数再通过请求传递给后台，后台做完相应处理后再传回给前端。 请看如下例子：/** * * @param page 当前页 */
前端通过Ajax请求从后台返回数据到页面显示，实现分页功能
热门推荐
qq_34582884的博客
05-15 1万+
本文纯属自己平时编代码时的总结，一来以便自己使用，二来和大家交流交流 后端controller代码 JsonMessage jsonMessage = new JsonMessage(); //经过一些处理将数据存储在map中 MapString,Object> map = new HashMapString,Object>(); //list中放返回的数据 map.put("list",
html动态生成表格源码,使用AJAX动态生成table表格数据
weixin_42298378的博客
06-05 931
《使用AJAX动态生成table表格数据》【1】使用jquery-Ajax动态生成表格数据【2】使用jQuery.pagination.js和pagination.css生成分页栏效果：json数据为假数据，由一个data.json和data1.json 等组成。写多个json主要体现，点击分页栏，数据变化。第一步：下载并导入js和css 文件。需要三个文件：jquery-1.8.3.min.js...
jquery ajax数据分页显示,基于Jquery+Ajax+Json实现分页显示
weixin_39864682的博客
08-05 437
1.后台action产生json数据。List blackList = blackService.getBlackInfoList(mobileNum, gatewayid, startDate, endDate);int totalRows = blackList.size();StringBuffer sb = new StringBuffer();sb.append("{\"totalCou...
html通过Ajax异步交互实现分页
a347635191的博客
07-03 1609
模拟百度分页（前5后4） 定义一个页面的JavaBean，作为数据传输对象（DTO） public class PageBean<T> { private int totalCount; //总记录数 private int totalPage; //总页数 private int currentPage;//当前页码 private int pa...
ajax获取所有数据之后分页
sunshine_xtt的博客
07-24 2454
由于项目需求，所以需要在前端进行分页。由于本人技术有限，做了好久好久才做出来，尝试了用bootstrap分页插件，结果尝试失败，最后还是用jQuery写了。希望可以帮到更多的人吧…… 分页效果 只是为了测试写的表格，样式有点丑就凑活看吧。总共16条数据，每页显示10条。 分页代码 1.引入所需要的jQuery文件和bootstrap文件 <link rel="styleshe...
ajax动态加载页面（分页）
10-20 637
@RequestMapping("/ajaxFindProjectByCodition") public String ajaxFindProjectByCodition(@RequestParam(value="projectIndustry",defaultValue="-1") Integer projectIndustry, @RequestParam(value="projectSt
前端ajax分页
siyi_blog的博客
12-11 815
在一个html页面中面临多个表格且有多个分页时可用到下面介绍的方法。 思路：首先定义一个数组，在数组中以对象形式存放每个表格的接口的地址（url）以及你所要用到的参数，每个对象对应每个表格，每个表格定义一个有序的 id ，序号从0开始，第一个就刚好对应第一个数组对象，以此类推。然后写一个公共方法，确定你要传的参数，我这里传了三个参数（代表哪一个表格，代表是否下一页，代表首页或尾页的页码），然后写...
html ajax分页操作实现
最新发布
09-24
5. 给分页导航条的每个页码按钮绑定点击事件，在事件处理函数中重新发起 Ajax 请求获取对应页码的数据并渲染到容器元素中。 6. 在页面加载完成时，初始化分页导航条并加载第一页的数据。 下面是一个简单的 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值