前端paging分页,前端设置每页多少条和当前页面的索引,传给后端,数据显示出来
2024-08-24 15:40:01
1.首先引入jquery
2.在引入paging.css和paging.js 这2个我存在百度云上:
链接:https://pan.baidu.com/s/1SPxlBkkx-pNAtLuRLifEag
提取码:pwr4
3.根据后台接口获取数据的总条数,由于我是tab切换。每个tab都需要分页,所以我把分页的函数提成一个公共的函数
var records = category.varient.records; //tab1总行数
var records1 = category.molecularprofiles.records;//tab2总行数
var records2 = category.evidence.records;//tab3总行数 //公共分页函数
function publicPage(x, y, z,d) { x是命名,y是div分页的id,z是总条数,d是调取函数的名字
var x = new Paging();
x.init({
target: y,
pagesize: 50, //每页的条数
count: z,
current: 1,
//toolbar: true,
callback: function (pagecount, size) {
if (pagecount > 1) {
d(pagecount, size);
} }
})
} publicPage('page', $('#pageTool'), records, varients);
publicPage('page1', $('#pageTool1'), records1, Molecularprofiles);
publicPage('page2', $('#pageTool2'), records2, Evidence);
下面列出一个函数的分页例子
//varient 分页
function varients(pagecount, size) {
$.ajax({
url: '/KnowledgeBase/KnowledgeBase/GetVariantsByGeneID',
data: {
geneID: attrParam,
PageIndex: pagecount,
PageSize: size,
},
dataType: 'JSON',
async: true,
success: function (data) {
records = data.data.records;
if (data.state == "success") {
var rowp = data.data.rows;
var strHtml = "";
for (var i = 0; i < rowp.length; i++) {
if (i % 2 == 0) {
strHtml += " <tr role='row' class='odd'>";
} else {
strHtml += " <tr role='row' class='even'>";
}
strHtml += " <td class='sorting_1'>";
strHtml += " <a href='javascript:;' class='btn btn-default btn-gene-variant' onclick=geneVariant()>" + rowp[i].Variant + "</a>";
strHtml += " </td>";
strHtml += " <td>" + rowp[i].Impact + "</td>";
strHtml += " <td>" + rowp[i].ProteinEffect + "</td>";
strHtml += " <td>" + rowp[i].Description + "</td>";
strHtml += " <td>" + rowp[i].DrugResistance + "</td>";
strHtml += " </tr>"; }
$("#varients").html("")
$("#varients").html(strHtml);//将数据增加到页面中
} }
})
}
把每页的数据循环出来。
大功告成!
分页的图片demo:
如果实在还是不懂,网上下载了一个例子,可参考,百度云地址:
链接:https://pan.baidu.com/s/19t3bfHv0C2KW0yjVEmycMg
提取码:ilij
最新文章
- EF Code First Migrations数据库迁移
- 基于git diff进行的eslint代码检测
- c#-冒泡排序-算法
- linux之log_format
- auto printer 自动打字机效果
- [Objective-c 基础 - 3.3] @property属性详解
- MVC 音乐商店 第 8 部分: 购物车与 Ajax 更新
- c语言结构体使用方法
- 200_longest-palindromic-substring
- wamp问题:关于另个php.ini文件的”…
- 巩固java(一)----java与对象
- Shell编程(week4_day4)--技术流ken
- mongodb将时间作为条件查询
- this 的指向
- matlab slice
- Redis 安全配置
- cocos2d JS-(JavaScript) 基础语法间的函数方法相互调用
- man iptables 8
- 【跟我学apache-commons】【四】commons-io的使用
- mac下zephir第一步,安装+hello zephir!
热门文章
- H5中画图标签Canvas---画矩形,画线,画圆,渐变色,图形载入
- hive set 常用参数汇总
- LoRa基础
- Navicat 提示 Access violation at address ***(如004ECCF4) in module ‘navicat.exe’. Read of address ***(如00000048)
- GRE封装解封装过程
- Direct3D 11 Tutorial 6:Lighting_Direct3D 11 教程6:灯光
- [转]谈NAND Flash的底层结构和解析
- Python学习笔记——发邮件
- 【AI】神经网络基本词汇
- Window 产品密钥