html ajax分页,简单ajax 分页
简单分页:
效果图:
思路:
数据渲染=》数据遍历(每页显示已规定好的条数).bindList()和执行分页渲染.initPaginator()
点击分页和下一页的时候,重新请求数据渲染,对应的数据重新遍历。
代码实现:
html:
分页测试
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
* {margin: 0;padding: 0;}
.list li{display: block;}
.list li img{display: block;width:100px;}
js:
var List = {
contentId: "listContent", //渲染列表id
pageId: "pagination", //渲染分页id
pageIndex: 1, //第几页开始渲染
pageSize: 6,//每页渲染多少条数据
pageSum:0,//共多少条数据
refreshId: null
};
//data.count为总的数据条数,即共多少条数据
List.loadList = function (pageIndex) {
var ajaxRequest = function () {
$.ajax({
url: "http://123.56.196.192:2000/syxa/news-consult/2/0/1000000",
type: "GET",
// data: data,
error: function () {
// console.log(error);
},
success: function (data) {
console.log(data);
console.log(data.data.length);
if (data.count == 0) {
console.log('当前没有数据记录');
}
else {
if(pageIndex == 1){
List.initPaginator(data.count, data.data);
$('#' + List.pageId).show();
$('.pagination li[data-page="1"]').addClass('active');
$('.pagination li.page-first').removeClass('active').addClass('disabled');
}
List.bindList(pageIndex,data.count,data.data);
}
}
});
}
ajaxRequest();
};
//数据遍历
List.bindList = function (pageIndex,count,data) {
var start = (pageIndex - 1) * List.pageSize; // 数据开始点
var content = '';
for (var index = start; index < pageIndex*List.pageSize && index < data.length; index++) { //遍历第几页内容,pageIndex也页面顺序
console.log(data[index]);
content += List.getListItem(data[index]);
}
$('#' + List.contentId).html('');
$('#' + List.contentId).append(content);
};
List.getListItem = function (item) {
var content = '';
content += '
';
content += ' ';
content += '
' + item.title + '
';
content += '
';
return content;
};
//分页
List.initPaginator = function (count, data) {
var pageSize = List.pageSize;
var pageTotal = Math.ceil(count / pageSize);
var pageIndex = List.pageIndex;
List.pageSum = pageTotal;
console.log(pageTotal);
var html = "";
for (var i = pageIndex; i <= pageTotal; i++) {
html += '
' + i + '';
}
html = '
首页'
+ '
上一页'
+ html
+ '
下一页'
+ '
末页';
$('#' + List.pageId).find('ul').html(html);
};
//点击页码刷新跳数据
$('#' + List.pageId).on('click','li',function (e) {
var pageIndex=parseInt($(this).attr('data-page'));
var activeIndex=parseInt($('.pagination li.active').attr('data-page'));//当前active状态页码
$('.pagination li').removeClass('active');
if($(this).hasClass('page-prev')) {
List.loadList(activeIndex-1);
var cur=activeIndex-1;
$('.page-next,.page-last').removeClass('disabled');
$('.pagination li.page[data-page=' + cur + ']').addClass('active');
if(cur == 1){
$('.page-prev,.page-first').addClass('disabled');
$('.page-prev').attr('data-page','');
}else{
$('.page-prev').attr('data-page',activeIndex-2);
$('.page-next').attr('data-page',activeIndex);
}
}else if($(this).hasClass('page-next')){
List.loadList(activeIndex+1);
var cur=activeIndex+1;
$('.page-prev,.page-first').removeClass('disabled');
$('.pagination li.page[data-page=' + cur + ']').addClass('active');
if(cur == List.pageSum){
$('.page-next,.page-last').addClass('disabled');
$('.page-next').attr('data-page','');
}else{
$('.page-prev').attr('data-page',activeIndex);
$('.page-next').attr('data-page',activeIndex+2);
}
}else if((!$(this).hasClass('page-prev')) &&(!$(this).hasClass('page-next'))){
$(this).addClass('active');
List.loadList($(this).attr('data-page'));
}
if(!($(this).hasClass('page-first')) && !($(this).hasClass('page-prev'))&& !($(this).hasClass('page-last')) && !($(this).hasClass('page-next'))){
if(pageIndex == 1){
$('.page-prev,.page-first').addClass('disabled');
$('.page-next,.page-last').removeClass('disabled');
$('.page-next').attr('data-page','2');
}else if(pageIndex == List.pageSum){
$('.page-prev,.page-first').removeClass('disabled');
$('.page-next,.page-last').addClass('disabled');
$('.page-prev').attr('data-page',List.pageSum-1);
$('.page-next').attr('data-page','');
}else{
$('.page-prev,.page-first').removeClass('disabled');
$('.page-next,.page-last').removeClass('disabled');
$('.page-prev').attr('data-page',pageIndex-1);
$('.page-next').attr('data-page',pageIndex+1);
}
}
});
//页面初始化
$(function () {
List.loadList(List.pageIndex);
});
html ajax分页,简单ajax 分页相关推荐
- app端分页 简单的分页 java
大家好: 今天遇到一个问题自己整了一下午,好不容易整理出来,跟大家一起分享一下!样式如下: JSP页面 其中 <span style="font-size:14px;"> ...
- java如何写ajax,java,jq,ajax写分页
1.先写好html基础样式 我懒得去写css样式233,能看就行 #page { width: 20px; } id name pwd age 上一页 下一页 2.编写servlet 2.1 先写查询 ...
- django ajax 查询,Django分页和Ajax查询
在Django中,实现分页以在多个页面上显示查询项目是非常简单的.使用Ajax仅更新实际发生更改的页面位,而不是每次加载整个页面也是非常直接的.但是,当我们将两者结合在一起时,我发现它有点问题.Dja ...
- yii2 分页ajax,yii2的分页和ajax分页
要想使用Yii分页类 第一步:在控制器层加载分页类 use yii\data\Pagination; 第二步: 使用model层查询数据,并用分分页,限制每页的显示条数 $data = User::f ...
- ajax静态页面实例,AJAX实例:Ajax实现静态页面分页
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 document.getElementById('right').innerHTML='Edit'; } function save() { //保存修改 ...
- 不用ajax实现动态分页,详解ajax +jtemplate实现动态分页
jtemplate是一个基于JQuery的模板引擎插件,功能非常强大,有了她你就再不用为使用JS绑定数据集而发愁了. 主要思路,复制textarea作为模板,ajax加载json数据,添加模板,绑定数 ...
- Springmvc+mybaits 分页处理+ajax翻页
Springmvc+mybaits (分页处理+ajax翻页) (2)/** * 显示微商城模板 */ @RequestMapping(value="/scmb",method = ...
- jQuery+Ajax+PHP无刷新分页
代码需要在后台运行(包括页面index.html,ajax.php,connect.php,还有数据库food.sql) index.html <!DOCTYPE html> <ht ...
- bootstrap 表格 ajax,bootstrap-table实现ajax分页
bootstrap版本 为 3.X bootstrap-table.min.css bootstrap-table-zh-CN.min.js bootstrap-table.min.js 前端boot ...
最新文章
- Java安卓 使用视图组 布局
- RedHat5 开启telnet,ftp等服务
- 详析数字图像中高斯模糊理论及实现
- php mysql预约_php实现预约购买mysql怎样规划?
- html弹出保存文件对话框_有没有遇到过CAD文件损坏或打不开的情况?养成这个习惯很重要...
- 学习 - java位运算符
- Ubuntu 12.10 正式发布
- 机器学习之线性代数总结
- python备份发包脚本_用Python写脚本,实现完全备份和增量备份的示例
- myeclipse里html添加背景颜色,myeclipse怎么设置主题-设置myeclipse主题背景颜色的教程 - 河东软件园...
- 【实战-Linux】--搭建CA认证中心实现https取证
- 如何使Git使用我选择的编辑器进行提交?
- 计算机等级一考通2021,2021驾校一考通题库
- 用ifconfig命令,只有lo,没有eth0的解决方案
- bash shell set 命令
- keytool java_如何找到并运行keytool
- Ubuntu和win10系统(N卡)
- 集中式、分布式版本控制系统的区别
- Git 从已有分支拉出新分支
- 关于本科期间参加人工智能方向竞赛的建议