急求!!!!实现jquery datatable翻页的代码

JavaScript014

急求!!!!实现jquery datatable翻页的代码,第1张

分类是有插件根据 数据条数 和每页显示条数 自动计算出来然后动态生成的翻页代码，生成的翻页代码都绑定了他们自己的事件，肯定不能实现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)