分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

bootstrap-paginator + ajax 实现动态翻页功能

发布时间:2023-09-06 01:42责任编辑:白小东关键词:暂无标签

1、下载http://plugins.jquery.com/bootstrap-paginator/

2、引用<script src="/static/bootstrap/js/bootstrap-paginator.min.js"></script>

3、首先定义一个html标签ul用以显示分页<ul style="margin: 0;" id="bp-3-Paginator-sm"></ul>

4、定义一个公共的js方法用来控制分页信息

//显示分页信息function pageInfo(totalNum, page_size, currentPage){ ???//分页显示数据 ???var options = { ???????size ?????????????????: "small",//设置显示大小 ???????bootstrapMajorVersion : 3, ???????currentPage ??????????: currentPage||1,//设置当前页,默认起始页为第一页 ???????numberOfPages ????????: 5,//每次展示多少页 ???????totalPages ???????????: Math.ceil(totalNum/page_size),//总页数 ???????alignment ????????????: "left",//显示位置 ???????useBootstrapTooltip ??: false,//是否显示tip提示框 ???????itemTexts: function (type, page, current) {//如下的代码是将页眉显示的中文显示我们自定义的中文。 ???????????switch (type) { ???????????????case "first" : return "首页"; ???????????????case "prev" ?: return "上一页"; ???????????????case "next" ?: return "下一页"; ???????????????case "last" ?: return "末页"; ???????????????case "page" ?: return page; ???????????} ???????}, ???????onPageClicked: function(e,originalEvent,type,page){//点击页数时,触发该方法 ???????????var page_size = $("#page_size").val(); ???????????test(page_size, page);//调用ajax方法,如果这里还需要校验查询条件的话,可以写个单独的js方法,在此处调用该方法,在校验方法中去调用ajax方法 ???????}, ?????}; ???$(‘#bp-3-Paginator-sm‘).bootstrapPaginator(options);}

5、页面加载的时候显示方式

$(function() { ???pageInfo(totalNum, page_size, 1);//默认显示第一页});

6、ajax方式显示

function test(page_size, page_index){ ???$.ajax({ ???????url:"",//请求URL ???????type:‘GET‘, //请求方法 ???????data:{"param1" : value1},//请求参数 ???????dataType:"json", //返回的数据格式:json/xml/html/script/jsonp/text ???????beforeSend:function(xhr){ ???????????//请求之前要做的事情,此操作的结果不会影响下面方法的执行 ???????}, ???????success:function(data,textStatus,jqXHR){ ???????????//请求成功要做的事情
???????????//关于总数据多少,每页显示多少数据,总工多少页,这些数据在这边更新 ???????????pageInfo(data.totalNum, page_size, page_index) ???????????return false; ???????}, ???????error:function(xhr,textStatus){ ???????????//请求异常做的事情 ???????????return false; ???????}, ???????complete:function(){ ???????????//最后要做的事情 ???}});}

  

bootstrap-paginator + ajax 实现动态翻页功能

原文地址:https://www.cnblogs.com/gangdou/p/8445034.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved