分类是有插件根据 数据条数 和每页显示条数 自动计算出来然后动态生成的翻页代码，生成的翻页代码都绑定了他们自己的事件，肯定不能实现url 那种跳转方式翻页啊。都是动态无刷新翻页的。
实例代码里：
$(document).ready(function() {$('#example').dataTable( {
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
} )
} )
表示在左上角那个 选择每页多少条数据：分为10，25，50条/页，和不分页显示全部。
你查询一下datatable.js里源代码就明白了（通过以他动态生成元素的class 和id去源代码里找就能明白他的工作原理了）
h.extend(p.ext.classes,{sTable:"dataTable",sNoFooter:"no-footer",sPageButton:"paginate_button",sPageButtonActive:"current",sPageButtonDisabled:"disabled"......至于你说的多个页面加入表格，这点没太懂。 一个页面加多个表格倒是简单就是是个粘贴复制的事情，不同的表格用不同的id，然后通过$("#id").daraTable 就可以 了
使用js创建表格//js表格 生成表格代码
//arrTh 表头信息
//arrTr 数据
var getTable = function(arrTh, arrTr){
var s = '<table class="tbData">'
s += '<tr>'
for(var i=0i<arrTh.lengthi++) {
s += '<th>' + arrTh[i] + '</th>'
}
s += '</tr>'
for(var i=0i<arrTr.lengthi++) {
s += '<tr>'
for(var j=0j<arrTr[i].lengthj++) {
s += '<td>' + arrTr[i][j] + '</td>'
}
s += '</tr>'
}
s += '</table>'
return s
}
js分页
//js分页
//el:分页容器 count:总记录数 pageStep:每页显示多少个 pageNum:第几页 fnGo:分页跳转函数
var jsPage = function(el, count, pageStep, pageNum, fnGo) {
this.getLink = function(fnGo, index, pageNum, text) {
var s = '<a href="#p' + index + '" onclick="' + fnGo + '(' + index + ')" '
if(index == pageNum) {
s += 'class="aCur" '
}
text = text || index
s += '>' + text + '</a>'
return s
}
//总页数
var pageNumAll = Math.ceil(count / pageStep)
if (pageNumAll == 1) {
divPage.innerHTML = ''
return
}
var itemNum = 5//当前页左右两边显示个数
pageNum = Math.max(pageNum, 1)
pageNum = Math.min(pageNum, pageNumAll)
var s = ''
if (pageNum >1) {
s += this.getLink(fnGo, pageNum-1, pageNum, '上一页')
} else {
s += '<span>上一页</span>'
}
var begin = 1
if (pageNum - itemNum >1) {
s += this.getLink(fnGo, 1, pageNum) + '... '
begin = pageNum - itemNum
}
var end = Math.min(pageNumAll, begin + itemNum*2)
if(end == pageNumAll - 1){
end = pageNumAll
}
for (var i = begini <= endi++) {
s += this.getLink(fnGo, i, pageNum)
}
if (end <pageNumAll) {
s += '... ' + this.getLink(fnGo, pageNumAll, pageNum)
}
if (pageNum <pageNumAll) {
s += this.getLink(fnGo, pageNum+1, pageNum, '下一页')
} else {
s += '<span>下一页</span>'
}
var divPage = document.getElementById(el)
divPage.innerHTML = s
}
js返回随机数据
//js随机内容
var jsRand = {}
//随机数字
jsRand.int = function(min,max){
return this.show('i', min, max)
}
//随机字符
jsRand.str = jsRand.string = function(min,max){
return this.show('', min, max)
}
//随机日期
jsRand.date = function(){
return this.show('d')
}
//随机金额
jsRand.money = function(min,max){
return this.show('m', min, max)
}
//随机汉字
jsRand.ch = function(min,max){
return this.show('ch', min, max)
}
jsRand.show = function(type,min,max) {
var str
if(type == 'i') {
str = this.rand(min, max)
} else if(type == 'm') {
str = '￥' + this.rand(min, max) + '.00'
} else if(type == 'd') {
str = this.rand(1990,2020) + '-'
str += this.rand(1,12,2) + '-'
str += this.rand(1,31,2) + ' '
str += this.rand(0,23,2) + ':'
str += this.rand(1,59,2)
} else {
min = min||0
max = max||10
str = ''
var len = this.rand(min, max)
for(var i=0i<leni++) {
var iChar = this.rand(48, 122)
if(type == 'ch') {
iChar = this.rand(19968, 40869)
}
var chr = String.fromCharCode(iChar)
chr = chr.replace(/&/g,"&")
.replace(/</g,"<")
.replace(/>/g,">")
.replace(/ /g," ")
.replace(/'/g,"'")
.replace(/"/g,""")
str += chr
}
}
return str
}
jsRand.rand = function(min, max, len) {
min = min||0
max = max||1000
var val = min + Math.round(Math.random() * (max-min))
if(len) {
while((''+val).length <len) {
val = '0' + val
}
}
return val
}
使用方法
function goPage(pageIndex) {
var arrTh = ['ID','名称','金额','备注','添加时间']
var arrTr = []
for(var i=0i<20i++)
{
arrTr.push([
jsRand.int(1, 1000),
jsRand.str(),
jsRand.money(),
jsRand.show('ch', 0, 20),
jsRand.date()
])
}
document.getElementById('divData').innerHTML = getTable(arrTh, arrTr)
jsPage('divPage', 800, 10, pageIndex, 'goPage')
}
goPage(1)
