封装与后台交互且分页的函数（利用jquery）

以你之姓@ 2022-06-07 14:15 171阅读 0赞

这里我把请求封装成一个对象，使用post传递。其实使用get方式传递，在url上当作参数传递方式更为简单。思路相同，只是传递方式不同。

function connect(request){ 
                $.ajax('question/find',{
                    'data':request,
                    'method':'POST',
                    'content-Type':'application/json',
                    success:function(data){ 
                        //分页显示函数封装
                        getPage(1);
                        function getPage(beginRow){ 
                            $('tbody').empty();
                            var totalRows = 0;
                            data.forEach(function(item,index){ 
                                totalRows = index+1;
                            });
                            var nowRow = 4;
                            $('.goPage span').remove();
                            data.forEach(function(item,index){ 
                                //分页显示
                                $('.goPage span').remove();
                                var endRow = beginRow+(nowRow-1);
                                $('.goPage').append('<span>共有'+totalRows+'条记录</span>');
                                var totalPage = Math.ceil(totalRows/nowRow);
                                var nowPage = (beginRow+(nowRow-1))/nowRow;//当前页数
                                $('.goPage').append(' <span>当前在第'+nowPage+'页</span>');
                                if(item.type == '单选' ||item.type == '多选'){
                                    var flag = item.name.indexOf('A');
                                    name = item.name.slice(0,flag);
                                }else{
                                    name = item.name;
                                }
                                if(beginRow<=(index+1)&&(index+1)<=endRow){
                                    var newTr = $('<tr>'
                                        +'<td><input type="checkbox" value="'+item.id+'"></td>'
                                        +'<td>'+name+'</td>'
                                        +'<td>'+item.type+'</td>'
                                        +'<td>'+item.credit+'</td>'
                                        +'<td>'+item.difficulty+'</td>'
                                        +'<td>'+item.knowledge+'</td>'
                                        +'<td>'+item.direction+'</td>'
                                        +'</tr>');
                                    $('tbody').append(newTr);
                                }
                                if(nowPage == 1){
                                    $('.goPage').append('<span>首页</span>');
                                    $('.goPage').append('<span>上一页</span>');
                                }else{
                                    $('.goPage').append('<span style="color:blue">首页</span>');
                                    $('.goPage').append('<span style="color:blue">上一页</span>');
                                }
                                if(nowPage == totalPage){
                                    $('.goPage').append('<span>下一页</span>');
                                    $('.goPage').append('<span>尾页</span>');
                                }else{
                                    $('.goPage').append('<span style="color:blue">下一页</span>');
                                    $('.goPage').append('<span style="color:blue">尾页</span>');
                                }
                                $('.goPage span').eq(2).on('click',function(){ 
                                    getPage(1);
                                });
                                $('.goPage span').eq(3).on('click',function(){ 
                                    getPage(beginRow-nowRow);
                                });
                                $('.goPage span').eq(4).on('click',function(){ 
                                    getPage(beginRow+nowRow);
                                });
                                $('.goPage span').eq(5).on('click',function(){ 
                                    getPage((totalPage-1)*nowRow+1);
                                }); 
                            })
                        } 
                    }
                })
            }

其中，request为请求体，即请求后台数据所需要发送的数据。  
我是用的span标签当作按钮，所以有个bug就是到了最后一页和第一页时点击还是会继续累加或者减。大神可以给我修改意见，谢谢！

//传递筛选条件
            var tx;
            var direction;
            var knowledge;
            var hard;
            var request = {};
            //加载获取题库
            connect(request);

此为调用分页函数所传递的参数。其中每页条数等数据可以自行修改。

发表评论取消回复

表情：

评论列表（有 0 条评论，171人围观）

还没有评论，来说两句吧...

相关阅读

相关利用OVER开窗函数分页

在SQL Server中，利用SQL进行分页的方法也有很多，今天要总结的是SQL Server 2005中引入的OVER开窗口函数，然后利用开窗函数进行分页。示例代码如下：

冷不防/ 2024年04月11日 13:22/ 0 赞/ 64 阅读

相关利用jQuery给表格添加分页效果

1. 新建一个Table，添加十行数据 <table cellspacing="0"> <thead> <tr> <t

水深无声/ 2022年07月14日 15:52/ 0 赞/ 201 阅读

相关利用jQuery给表格添加分页效果

1. 新建一个Table，添加十行数据 <table cellspacing="0"> <thead> <tr> <t

短命女/ 2022年07月14日 15:52/ 0 赞/ 312 阅读

相关 jquery dataTable 后台加载数据并分页

使用 dataTable后台加载数据并分页。网上版本很多，但很多都是不能用或者不详细的，这里是已经验证过的。引用 js文件 <scr

深藏阁楼爱情的钟/ 2022年07月13日 06:45/ 0 赞/ 243 阅读

相关 easyUI前端分页与后台分页总结

分页往往是依附于数据表格的，所以我们就使用的是easyui的datagrid组件，来开启pagination分页组件，为了方便，我们使用[js][]实现。

浅浅的花香味﹌/ 2022年06月10日 11:29/ 0 赞/ 295 阅读

相关封装与后台交互且分页的函数（利用jquery）

这里我把请求封装成一个对象，使用post传递。其实使用get方式传递，在url上当作参数传递方式更为简单。思路相同，只是传递方式不同。 function connec

以你之姓@/ 2022年06月07日 14:15/ 0 赞/ 172 阅读

相关 JQuery以及highchart与后台数据交互

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd"> <html debug=

川长思鸟来/ 2022年05月21日 01:55/ 0 赞/ 192 阅读

相关 JQuery以及highchart与后台数据交互

public String getDetailStatisticData(String city, String district, String ind

ゝ一纸荒年。/ 2022年05月21日 01:54/ 0 赞/ 231 阅读

相关分页封装

public class Page { private Integer currentPage;//当前页 private int pa

分手后的思念是犯贱/ 2022年05月20日 10:44/ 0 赞/ 269 阅读

相关 ES6 fetch函数与后台交互

最近在学习react-native,遇到调用后端接口的问题.看了看官方文档,推荐使用es6的fetch来与后端进行交互,在网上找了一些资料.在这里整理,方便以后查询. 1.R

约定不等于承诺〃/ 2021年06月24日 15:58/ 0 赞/ 389 阅读