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

最新文章

  1. EF Code First Migrations数据库迁移
  2. 基于git diff进行的eslint代码检测
  3. c#-冒泡排序-算法
  4. linux之log_format
  5. auto printer 自动打字机效果
  6. [Objective-c 基础 - 3.3] @property属性详解
  7. MVC 音乐商店 第 8 部分: 购物车与 Ajax 更新
  8. c语言结构体使用方法
  9. 200_longest-palindromic-substring
  10. wamp问题:关于另个php.ini文件的”…
  11. 巩固java(一)----java与对象
  12. Shell编程(week4_day4)--技术流ken
  13. mongodb将时间作为条件查询
  14. this 的指向
  15. matlab slice
  16. Redis 安全配置
  17. cocos2d JS-(JavaScript) 基础语法间的函数方法相互调用
  18. man iptables 8
  19. 【跟我学apache-commons】【四】commons-io的使用
  20. mac下zephir第一步,安装+hello zephir!

热门文章

  1. H5中画图标签Canvas---画矩形,画线,画圆,渐变色,图形载入
  2. hive set 常用参数汇总
  3. LoRa基础
  4. Navicat 提示 Access violation at address ***(如004ECCF4) in module ‘navicat.exe’. Read of address ***(如00000048)
  5. GRE封装解封装过程
  6. Direct3D 11 Tutorial 6:Lighting_Direct3D 11 教程6:灯光
  7. [转]谈NAND Flash的底层结构和解析
  8. Python学习笔记——发邮件
  9. 【AI】神经网络基本词汇
  10. Window 产品密钥