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

最新推荐文章于 2021-06-20 23:50:43 发布
最新推荐文章于 2021-06-20 23:50:43 发布
阅读量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 1352
近期需要在汽车产品车间开发几个看板，其中一个看板需要动态加载表格。通过ajax动态获取webapi传过来的json数据，加载表格。
ajax实现表格分页功能
m0_46233451的博客
05-19 518
一.数据库分页查询 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 554
需求分析1)需要首页，末页功能2)有点击查看上一页，下一页功能3)页码到当前可视页码最后一页刷新页面实现思路也是分为三部分处理1)点击首页，末页直接显示第一页或者最后一页内容，当前页面为第1页或者最后一页。隐藏首页或者末页按钮。demo 显示截图首页状态 和 末页状态代码执行结果截图2)点击可视页码截图3)点击上一页或者下一页，，需要刷新页码状态时截图，昨天表示当前页码为7，右图是点击上一页，刷新...
html ajax分页,ajax动态加载页面（分页）
weixin_42299679的博客
06-20 310
ajax请求控制层返回的页面append到相应的标签中。@RequestMapping("/ajaxFindProjectByCodition")public String ajaxFindProjectByCodition(@RequestParam(value="projectIndustry",defaultValue="-1") Integer projectIndustry,@Reque...
ajax的分页分页请求,通过ajax来分页
肥猫钓鱼
12-01 548
这里面通过自定义标签实现的,因为项目没有采用jsp模板而是用的freemarker,做次记录,方便 以后使用巩固 birthday.html中嵌套的share.html页面 自定义分页标签：AjaxPagerDirectiveModel 以及生成分页的样式的工具类：AjaxPagerHtmlBuilder 自定义查询数据标签：CommentListTag---BaseFre...
Ajax方式渲染分页
qianduankangkang的博客
05-11 221
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 1478
今天做了下网页数据的处理（效果如下）：点击上面的分类 ，下面的数据将根据筛选发生替换（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动态生成table表格数据
热门推荐
qq1164014750
06-18 3万+
《使用AJAX动态生成table表格数据》 【1】使用jquery-Ajax动态生成表格数据 【2】使用jquery.pagination.js和pagination.css生成分页栏 效果： json数据为假数据，由一个data.json和data1.json 等组成。写多个json主要体现，点击分页栏，数据变化。 第一步：下载并导入js和css
前端通过Ajax请求从后台返回数据到页面显示，实现分页功能
qq_34582884的博客
05-15 1万+
本文纯属自己平时编代码时的总结，一来以便自己使用，二来和大家交流交流 后端controller代码 JsonMessage jsonMessage = new JsonMessage(); //经过一些处理将数据存储在map中 MapString,Object> map = new HashMapString,Object>(); //list中放返回的数据 map.put("list",
表格分页--JSON数据模拟Ajax数据源（原创）
anphygvyti09102的博客
05-09 115
将之前表格分页重写，现在这个插件一页中最多只显示10个页码，而且看起来的效果也挺好的，我还采用了JSON数据模拟了Ajax的处理后动态生成表格。下面是代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格...
利用分页插件对Ajax请求到后台数据进行分页
Chauncymaster的博客
05-06 7142
1.在学习过程中，积累和思考是必须的，所以我还是选择用博客一边记录一边学习 一款简单的分页插件下载地址： 插件下载地址 解压之后分别把.css文件和.js文件导入相应的项目文件夹中，并且在页面中进行路径引入，确保无误。 具体做法前台： 分页：` <table id="mytable"></table> <ul class="page" id="page"></ul>`
js 表格分页，ajax请求后台数据前台分页
weixin_30305735的博客
05-18 373
$(function(){ var url="后台给的地址"; var shuju=document.getElementById("shuju"); console.log(shuju); var lc=$("#lc").val(); var zy=$("#zy").val(); var ys=$("#ys").val(); va...
关于ajax异步请求后台数据进行动态分页
东方不败的好朋友的博客
07-28 1万+
ajax请求后台拿到json类型的数据后，可以在它的success回调方法中进行动态分页，也就是表格重绘，此时，我们需要得到的数据包括：查询得到的数据、数据总条数、总页数、当前页数，其中前三条可在后台获取，对于当前页数，需要从前端获取点击页数再通过请求传递给后台，后台做完相应处理后再传回给前端。 请看如下例子：/** * * @param page 当前页 */
html动态生成表格源码,使用AJAX动态生成table表格数据
weixin_42298378的博客
06-05 927
《使用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...
分页功能实现之通过ajax实现表单内容刷新
weixin_33769207的博客
05-18 285
拿代码来说话 我们的需求就是点击翻页功能，实现表格内容局部刷新且能够翻到对应的页面上，不明白？ 那么就看看下面的图，需要达到的效果如下所示： 现在要实现的功能就是把红线框起来的表单内容 在点击翻页的时候 只刷新这个表单的内容，其他的内容不变。这就是我们要的目的，为啥要这么做？有1个原因： 局部刷新不会影响我们日期选择框内的内容。如果是整个页面刷新，那么刷新之后那个日期选择框就是为空了。 需求...
html ajax分页操作实现
最新发布
09-24
5. 给分页导航条的每个页码按钮绑定点击事件，在事件处理函数中重新发起 Ajax 请求获取对应页码的数据并渲染到容器元素中。 6. 在页面加载完成时，初始化分页导航条并加载第一页的数据。 下面是一个简单的 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值