精华内容
下载资源
问答
  • 主要为大家详细介绍了layUI实现前端分页和后端分页,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 前端分页与后端分页

    2020-12-11 18:07:02
    前端分页与后端分页

    页面列表或者表格等对数据进行展示就需要用到分页的效果了。
    分页可以分为前端分页和后端分页;
    后端分页是页面中点击分页按钮(移动端是页面滚到底部),将页码(pageIndex)、每页数量(pageSize)等数据传给后端请求数据,每次点击只需要请求固定条数返回数据,前端展示到页面上以完成交互;
    前端分页就是先获取全部数据,数据少了还好,如果数据很大,获取数据的时间就会比较长;所以对于数据量大的操作,一般都采用后端分页的操作更合适。

    如有错误或不足,欢迎各位大佬评论指正。

    展开全文
  • datatable组件后端分页.pdf
  • layUI 前端分页和后端分页

    千次阅读 2019-06-14 11:40:53
    layUI 前端分页和后端分页 layui后端分页: function pagination(curr,gwayId,mlity,ePart) { $(".manage_ys_list").html('加载中...'); let dd={ conditions: { gatewayId:gwayId, searchText:"", ...

    layUI 前端分页和后端分页

    layui后端分页:
    function pagination(curr,gwayId,mlity,ePart) {
      $(".manage_ys_list").html('加载中...');
      let dd={
             conditions: {
             gatewayId:gwayId,
             searchText:"",
             pageSize:15,
             pageIndex:curr-1
             },
             identity:{
             "userName":userName1,
             "sessionId":sessionId1,
             "token":token2
             }
            }
    
        $.ajax({
    type:"POST",
    dataType: 'json',
    url:UserListPaged, 
    data:dd,
    headers:{ 'X-Requested-With': 'XMLHttpRequest' }, 
    success:function(data){ 
       
      let total=data.data.recordCount;
      let pageCount=data.data.pageCount;
      let pageSize=data.data.pageSize;
      if(data.data.recordCount>=0){ 
        let dataHtml = '';
                 for(var i=0;i<data.data.result.length;i++){
                   
                            dataHtml += '<tr><td>'+data.data.result[i].gatewayId+'</td><td>'+data.data.result[i].userId+
                            '</td><td>'+data.data.result[i].realName+'</td><td>'+data.data.result[i].sex+'</td><td>'+data.data.result[i].workUnit+
                            '</td><td>'+data.data.result[i].phoneNo+'</td><td>'+data.data.result[i].isAdmin+
                            '</td><td><a title="" class="btn btn-sm btn-info text-white manage_ys_xg" gatewayId="'+
                            data.data.result[i].gatewayId+'" userId="'+data.data.result[i].userId+
                            '" realName="'+data.data.result[i].realName+'" sex="'+data.data.result[i].sex+
                            '" age="'+data.data.result[i].age+'" birthday="'+data.data.result[i].birthday+
                            '" workUnit="'+data.data.result[i].workUnit+'" phoneNo="'+data.data.result[i].phoneNo+
                            '" isAdmin="'+data.data.result[i].isAdmin+'">修改</a><a href="#" title="" class="btn btn-warning text-white btn-sm man_ys_shanc" gatewayId="'+
                            data.data.result[i].gatewayId+'" userId="'+data.data.result[i].userId+'">删除</a></td></tr>'          
                        }
                        $(".manage_ys_list").html(dataHtml);
                }else{
                 $(".manage_ys_list").html('<li>暂无数据</li>');
               }
             
             //显示分页
             layui.use(['laypage', 'layer'], function(){
                         var laypage = layui.laypage
                         ,layer = layui.layer;
             laypage.render({
               elem: 'page' //注意,这里的 test1 是 ID,不用加 # 号
                       ,count: total//数据总数,从服务端得到
                       ,limit: 15//每页显示条数
                       ,curr: curr || 1 //当前页
    
             
             ,pages: pageCount, //通过后台拿到的总页数
             
             skip: true,
             jump: function (obj, first) { //触发分页后的回调
             if (!first) { //点击跳页触发函数自身,并传递当前页:obj.curr
             pagination(obj.curr,gwayId,mlity,ePart);
    dqym=obj.curr;
             }
             }
             });
             });
    
             $('#page').append('<p class="p_tj">共<i style="color:red;">' + total +
               '</i>条数据,每页显示'+pageSize +'条</p>');
             
             },
             complete: function () {
             //请求完成的处理
             },
             error: function () {
             //请求出错处理
             }
    });
    }
    pagination(1);
    
    
    //前端分页
             function pagination(curr,gwayId,userN) {
            	$(".man_zy_list").html('加载中...');
            	let dd={
    				  		  conditions: {
    				         	    		gatewayId:gwayId,
    										userName:userN
    				    				  },      
    						  identity:{
    	  								userName:userName1,
    							      	sessionId:sessionId1,
    							     	token:token2
    						   }
    				};
    				let dataHtml = [];
                console.log("dd1212",dd);
    		$.ajax({
                                type:"POST",
                                dataType: 'json',
                                url:UserResourceList,      
                                data:dd,
                                headers:{ 'X-Requested-With': 'XMLHttpRequest' },              
                                success:function(data){ 
                                	
                                	 var total=data.data.length;
                                	
                                	if(data.resultCode==0){ 
                               		        
    						                for(var i=0;i<data.data.length;i++){
    						                	
    												dataHtml[i] = '<tr><td>'+data.data[i].userResourceId+'</td><td><input checked="checked" type="checkbox" class="" value="" checked="'+data.data[i].modality+
    												
    												'</td><td><a title="" class="btn btn-sm btn-info manage_zy_kfw text-white">可访问资源</a><a title="" class="btn btn-sm btn-info manage_zy_xg text-white"  userId="'+data.data.result[i].userId+
    												'">删除</a></td></tr>'
    												
    												 		    	
    										}
    										if(curr==1){
                                         var ss11=dataHtml.concat().splice(0, 15);   
                                         $(".man_zy_list").html(ss11);
                                        }
    
                                            //显示分页
    				                    layui.use(['laypage', 'layer'], function(){
    										  var laypage = layui.laypage
    
    										  ,layer = layui.layer;
    										  
    				                    laypage.render({
    				                    	elem: 'page' //注意,这里的 test1 是 ID,不用加 # 号
    									    ,count: total//数据总数,从服务端得到
    									    ,limit: 15//每页显示条数
    									    ,curr: curr || 1 //当前页
    
    				                        
    				                        ,pages:total % 15==0 ? total/15 : Math.floor(total/15)+1,//根据记录条数,计算页数, //通过后台拿到的总页数
    				                        
    				                        skip: true,
    				                        jump: function (obj, first) { 
    				                        //触发分页后的回调
    				                        
    				                            if (!first) { //点击跳页触发函数自身,并传递当前页:obj.curr
    				                               
    				                                var ss=dataHtml.concat().splice((obj.curr||1)*15-15, 15);
    				                                
    										        $(".man_zy_list").html(ss);
    										     
    				                            }
                                            
    				                        }
    
    
    				                    });
    
    				                    });
    
                                        
    				                    $('#page').append('<p class="p_tj">共<i style="color:red;">' + total +
    				                    	'</i>条数据,每页显示'+15 +'条</p>');
    
     
             						}else{
    				                    	$(".man_zy_list").html('<li>暂无数据</li>');
    				                    	
    				                    	}
    
    
    				                },
    				                complete: function () {
    				                    //请求完成的处理
    				                },
    				                error: function () {
    				                    //请求出错处理
    				                }
                });
            }
            pagination(1,'','');
    
    展开全文
  • 前端分页和后端分页

    万次阅读 2017-07-19 20:04:28
    前端分页和后端分页区别

    前端分页

    前端分页一般用于数据量较小的情况,一次请求把数据全部从后端请求回来。下面是vue-element-ui的分页组件写法:

    <div class="block">
        <span class="demonstration">完整功能</span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="activePage"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="sizePerPage"
          layout="total, sizes, prev, pager, next, jumper"
          :total="contactsInfo.length">
        </el-pagination>
      </div>
      <script>
      export default {
        methods: {
          handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.activePage = 1;
          },
          handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
          }
        },
        data() {
          return {
            activePage: 4
          };
        }
      }

    分页
    需要注意的是:

    • 当前页展示的数据与总数据的关系
    let show = this.contactsInfo.slice(this.sizePerPage * (this.activePage - 1), this.sizePerPage * (this.activePage));
    • 当每页条数改变时,当前页设置为首页。防止每页条数变大时,当前页时不存在的页数。

    后端分页

    后端分页适用于数据量偏大时的情况,减小请求传输压力。前端需要将每页条数和当前页传给后端,后端根据条件查询出数据再传给前端,包括总条数、当前页、每页多少条数据等。

    • 前端显示的当前页和每页多少条数据由后端传回的数据决定,否则出现改变前端参数,还未发请求时,页码的错乱。
    • 当改变每页多少条时,当前页参数置为首页。

    vue-element-ui分页组件
    react-bootstrap分页组件

    展开全文
  • 主要为大家详细介绍了laypage+SpringMVC实现后端分页,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了bootstrap-table后端分页功能,结合完整实例形式分析了bootstrap-table后端请求、数据分页功能具体步骤与实现技巧,需要的朋友可以参考下
  • Springboot使用PageHelper实现后端分页.pdf
  • 主要介绍了DjangoWeb使用Datatable进行后端分页的实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 使用datatables的一些总结后端分页在一开始的迭代中,使用的是默认的前端分页,但这个肯定性能是不行的,而后改为后端分页时,遇到的一些坑。也许是我看文档不够仔细,datatables的文档看的我有些痛苦。在结合例子和...

    使用datatables的一些总结

    后端分页

    在一开始的迭代中,使用的是默认的前端分页,但这个肯定性能是不行的,而后改为后端分页时,遇到的一些坑。

    a2c5912dfb82ebd9ea5aa6ad7e892943.png

    也许是我看文档不够仔细,datatables的文档看的我有些痛苦。在结合例子和度娘的情况下,捣鼓出来了

    // 实例化ajax方法,实现后端分页

    $.fn.dataTable.ajax = function(options) {

    var conf = $.extend({

    method: 'GET',

    }, options);

    return function(request, drawCallback, settings) {

    var param = {};

    param.size = request.length;//页面显示记录条数,在页面显示每页显示多少项的时候

    param.start = request.start;//开始的记录序号

    param.page = (request.start / request.length);//当前页码

    $.extend(param, request)

    $.extend(param, conf.data)

    delete param.columns; // 移除列

    settings.jqXHR = $.ajax({

    type: conf.method,

    url: conf.url,

    data: param,

    success: function(data) {

    var params = {};

    params.draw = param.draw; // 一定注意这个draw

    params.recordsTotal = data.page.totalElements; // 数据总数

    params.recordsFiltered = data.page.totalElements;// 过滤后的总数,我这里和总数一致

    params.data = data._embedded[conf.dataSrc];

    drawCallback(params);

    }

    })

    }

    }

    复制代码

    这里要说下这个draw参数,之前没有在意这个参数,导致请求了第二页的数据,表格不刷新,还是第一页的数据,文档上的说明是:前端请求时带draw参数,返回时后端一并返回,防止ajax异步导致数据返回不对应的问题。

    接下来就是使用这个方法去创建表格

    $("#tickets").DataTable({

    serverSide: true, // 设置为后端分页

    ajax: $.fn.dataTable.ajax({

    url: '/api/demands',

    data: { size: 10},

    dataSrc: 'demands',

    }),

    columns: [...],

    });

    复制代码

    展开全文
  • django后端分页

    2019-07-04 10:25:09
    后端分页函数 from django.core.paginator import Paginator, EmptyPage import datetime from django.core import serializers import json def page_to(Qset, page, page_size, fields=()): # 创建分页对象 ...
  • 【vue+elementUI】分页(后端分页+前端分页)

    千次阅读 多人点赞 2019-09-06 14:47:41
    后端分页,顾名思义,后端做好分页,你把要请求的页数和条数发送给他,他返回给前端,再渲染到页面上~结合elementUI的话,后端还需要把数据的总条数,即total作为一个字段返回,前端才能做分页嗷! 下面上大概的代码...
  • java实现后端分页

    千次阅读 2019-06-26 14:43:25
    java实现后端分页 通过分页工具类(Page)来实现,具体参考代码参见下面链接. https://www.cnblogs.com/lixiang1993/p/7360404.html mapper.xml文件中的分页查询语句如下: 一、Mysql使用limit分页 select * from stu ...
  • 此案例基于 基于element-ui的 动态列分页表格组件(动态控制表格列的显隐),增加了后端分页的功能。 实现思路: 后端分页就是前端传递页码和每页条数两个参数到后台进行查询,返回的数据仅仅包含当前页的数据。...
  • Datatables后端分页

    千次阅读 2017-05-31 10:06:41
    通过以下的js代码,在action或者controller中接受参数主要是起始页和页大小,然后进行后端分页代码就可以了。JS dataTables初始化函数如下:
  • datatables后端分页

    2019-09-29 20:41:32
    0x01 缘由 平时较少涉及前端,这次本以为模板中有表单,分页跳转搜索功能都比较齐全,可以高枕无忧,但是细看模板中的分页跳转是不需要与后台交互的,数据一次性写在前端,...所以合理采用的还是后端分页 ...
  • 分页查询:前端分页和后端分页

    千次阅读 2018-12-17 17:06:28
    后端分页: 查询出指定条数的数据,在SQL中使用limit size, size * (num - 1) 起始条数 ,终止条数 前端分页: 查询出所有条数,然后利用list的函数分隔  //设置分页查询得到数据  if(crl.size()&gt;=...
  • datatables后端分页 搜索 参考文档 http://datatables.club/manual/install.html https://www.kancloud.cn/manual/thinkphp5/ 引入Javascript / CSS (CDN) 添加如下 HTML 代码 初始化Datatables PHP <!...
  • el-table前端分页和后端分页的实现

    千次阅读 2020-09-28 21:38:28
    【原文链接】 elementUI实现...后端分页:因为是后端分页,前端在每点击一次分页时,便向后台请求一次数据。其实就是避免前端一次性从数据库获取大量数据 前端分页 tableData.slice((currentPage-1)*PageSize,curren
  • 后端分页查询SQL笔记

    2021-02-01 10:41:32
    后端分页查询SQL笔记 SELECT * FROM ( SELECT A.*, ROWNUM RN FROM (SELECT * FROM SGWPDM_INTERFACE_LOG) A WHERE ROWNUM <= 40 ) WHERE RN >= 21 截图如下:
  • APP后端分页设计

    千次阅读 2019-01-14 15:32:14
    APP后端分页设计 移动端套用传统分页的缺点 目前数据分页一般分为两种类型:传统网站比较常见的电梯式分页布局及移动端比较常见的流式分页布局。 电梯式分页布局在传统网站中非常常见,比如百度、淘宝: 它...
  • 文章目录系列文章可分页表格组件功能列表使用案例相关...其实在第三篇文章(后端分页表格组件)的组件就已经是一个基本完善的分页表格组件了(自我感觉良好)。 下面列举下其功能: 功能列表 兼容 <el-table&...
  • Java如何实现后端分页

    千次阅读 2017-04-19 21:31:02
    工具:myeclipse ,数据库:Oracle ,jar包:classes12.jar 实现的功能:对客户的增删改查,展示客户列表,一页显示十条...2,后端分页技术 3,ajax前后台交互 代码如下: /** *客户接口类 */ public interface
  • 后端分页:需要我们把页码 请求条数发送给后端 后端根据条件每次返回对应的条数 前端分页 <el-table :data="tableDatas.slice((currentPage-1)*PageSize,currentPage*PageSize)" style="width: 100%"&...
  • 之前写过一篇博客,当时对element ui框架还不太了解,分页组件...由于工作上的需要,写了很多表格,因此对于分页有了新的理解,在这里重新总结一下,用 element ui 自带的分页组件实现前端分页和后端分页。 首先我...
  • 后端分页查询总结

    千次阅读 2018-07-31 16:35:09
    分页查询可通过不同方式去进行,下面简单做了一下比较: 客户端分页  优点:减少了客户端和服务器交互的次数,客户端进行数据缓存,提高了... 后端分页(介于1、2之间) 优点:在1、2之间达到了平衡,既减少了...
  • layui与后端分页

    千次阅读 2018-11-24 10:44:21
    使用layui与后端分页要点前台jscontroller层service 实现类如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 36,440
精华内容 14,576
关键字:

后端怎么分页