如何使用javascript / jquery为动态生成的表应用分页 [英] How to apply paging for a dynamic generated table using javascript/jquery

问题描述

我无法理解如何为动态生成的表格应用分页是我的代码



$ .ajax（{

类型：'GET'，

url：services.settings.dailydata，

数据：inviteId_ = + inviteId +，



成功：功能（数据）{





var位置=数据;



var tr;



for（var i = 0 ; i< Location.length; i ++）{



tr = tr +;

tr = tr ++位置[i] .item +;

tr = tr ++位置[i] .itemname +;

tr = tr ++位置[i] .itemprice.toFixed（2）+;

tr = tr ++ Location [i] .Unit +;





tr = tr +;





};

document.getElementById（'stc_d'）。style.display =block;

document.getElementById（'tbl_data'）。innerHTML =+

++++

+ tr +

< th> itemprice

item	itemname	单位

;







}，

错误：函数（e）{



navigator.notification.alert（ 请输入有效的详细信息）;



}

}）;



所以任何人都可以告诉我如何以及在哪里实现分页？



我尝试过：



$（'td'，'table'）。each（function（i）{

$（this）.text（i + 1）;

} ）; $







$（'table.paginated'）。each（function（）{

var currentPage = 0;

var numPerPage = 10;

var $ table = $（this）;

$ table.bind（'repaginate'，function（）{

$ table.find（'tbody tr'）。hide（）。slice（currentPage * numPerPage，（currentPage + 1）* numPerPage） .show（）;

}）;

$ table.trigger（'repaginate'）;

var numRows = $ table.find（ 'tbody tr'）。长度;

var numPages = Math.ceil（numRows / numPerPage）;

var $ pager = $（'

I unable to understand how to apply a paging for a dynamically generated table below is my code

$.ajax({
type: 'GET',
url: services.settings.dailydata,
data: "inviteId_=" + inviteId + "",

success: function (data) {


var Location = data;

var tr;

for (var i = 0; i < Location.length; i++) {

tr = tr + "";
tr = tr + "" + Location[i].item + "";
tr = tr + "" + Location[i].itemname + "";
tr = tr + "" + Location[i].itemprice.toFixed(2) + "";
tr = tr + "" + Location[i].Unit + "";


tr = tr + "";


};
document.getElementById('stc_d').style.display = "block";
document.getElementById('tbl_data').innerHTML = "" + ""
+ "" + "" + ""+ ""
+ tr +

"

item	itemname	itemprice	Unit

";



},
error: function (e) {

navigator.notification.alert('Please enter valid details');

}
});

so can any one tell me how and where to implement paging ?

What I have tried:

$('td', 'table').each(function(i) {
$(this).text(i + 1);
});



$('table.paginated').each(function() {
var currentPage = 0;
var numPerPage = 10;
var $table = $(this);
$table.bind('repaginate', function() {
$table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
});
$table.trigger('repaginate');
var numRows = $table.find('tbody tr').length;
var numPages = Math.ceil(numRows / numPerPage);
var $pager = $('

'）;

for（var page = 0;页面< NUMPAGES;页面++）{

$（' '）。text（page + 1）.bind（'click'，{

newPage：page

}，函数（事件）{

currentPage = event.data ['newPage'];

$ table .trigger（'repaginate'）;

$（this）.addClass（'active'）。siblings（）。removeClass（'active'）;

}）。 appendTo（$ pager）.addClass（'clickable'）;

}

$ pager.insertBefore（$ table）.find（'span.page-number：first' ）.addClass（'active'）;

}）;



i试图在我的文件中实现这个场景但是它没有用完

');
for (var page = 0; page < numPages; page++) {
$('').text(page + 1).bind('click', {
newPage: page
}, function(event) {
currentPage = event.data['newPage'];
$table.trigger('repaginate');
$(this).addClass('active').siblings().removeClass('active');
}).appendTo($pager).addClass('clickable');
}
$pager.insertBefore($table).find('span.page-number:first').addClass('active');
});

i tried to implement this scenario in my file but it is not working out

推荐答案

.ajax（{

类型：'GET'，

url：services.settings.dailydata ，

数据：inviteId_ =+ inviteId +，



成功：功能（数据）{





var位置= d ata;



var tr;



for（var i = 0;我< Location.length; i ++）{



tr = tr +;

tr = tr ++ Location [i] .item + ;

tr = tr ++ Location [i] .itemname +;

tr = tr ++ Location [i] .itemprice.toFixed（ 2）+;

tr = tr ++位置[i]。单位+;





tr = tr +;





};

document.getElementById（ 'stc_d'）。style.display =block;

document.getElementById（'tbl_data'）。innerHTML =+

++ ++

+ tr +



< th> item

itemname	itemprice	单位

;







}，

错误：功能（e）{



navigator.notification.alert（'请输入有效的详细信息'）;



}

}）;



所以任何人都可以告诉我如何以及在哪里实现分页？



我尝试过：

.ajax({
type: 'GET',
url: services.settings.dailydata,
data: "inviteId_=" + inviteId + "",

success: function (data) {


var Location = data;

var tr;

for (var i = 0; i < Location.length; i++) {

tr = tr + "";
tr = tr + "" + Location[i].item + "";
tr = tr + "" + Location[i].itemname + "";
tr = tr + "" + Location[i].itemprice.toFixed(2) + "";
tr = tr + "" + Location[i].Unit + "";


tr = tr + "";


};
document.getElementById('stc_d').style.display = "block";
document.getElementById('tbl_data').innerHTML = "" + ""
+ "" + "" + ""+ ""
+ tr +

"

item	itemname	itemprice	Unit

";



},
error: function (e) {

navigator.notification.alert('Please enter valid details');

}
});

so can any one tell me how and where to implement paging ?

What I have tried:

（'td'，'table' ）.each（function（i）{

('td', 'table').each(function(i) {

（this）.text（i + 1）;

}）;

(this).text(i + 1);
});

这篇关于如何使用javascript / jquery为动态生成的表应用分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！