拜托，我有一个分页问题。这是我的Ajax Jquery加载我的客户端视图。除了分页外，它的效果非常好。如果我尝试直接在视图中添加，分页显示但是从服务器自动加载值，它将不会显示分页
function authors(){
$('.loader').css('opacity', '1');
var request = $.ajax({
url: mainurl,
type: "POST",
dataType: 'json',
data:{"apikey":"emple_app@2016","id":"all"},
async:true
})
request.done(function(myresult){
var tableview="";
for (var i=0;i < myresult.data.length; i++){
var id = myresult.data[i].id; // to reference the id
var file_name = myresult.data[i].file_name;
var file_title = myresult.data[i].file_title;
var author = myresult.data[i].author;
var paper = myresult.data[i].paper;
var focus = myresult.data[i].focus;
var year =myresult.data[i].year;
var down= "mainurl/uploads/"+file_name;
tableview += "<tbody>"+
"<tr>"+
"<td>"+file_title+"</td>"+
"<td>"+author+"</td>"+
"<td>"+focus+"</td>"+
"<td>"+paper+"</td>"+
"<td>"+year+"</td>"+
"<td>"+ "<a href='" +down+"'>"+ "<i class='fa fa-cloud-download'></i>"+"</td>"+
"</tr>"+
"</tbody>"
}
$('#tableData').append(tableview);
request.always(function(){
$('.loader').css('opacity', '0');
})
}
客户视图
<div id="journalHolder">
<div class="tabler" >
<input type="text" id="search" placeholder=" live search" />
<hr/>
<table id="tableData" class="table table-bordered table-striped">
<thead>
<tr>
<th>Journal Title</th>
<th>Author</th>
<th>Focus</th>
<th>Paper</th>
<th>Year</th>
<th>Download</th>
</tr>
</thead>
</table>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#tableData').paging({limit:5});
});
});
</script>
分页代码
(function($) {
$(function() {
$.widget("zpd.paging", {
options: {
limit: 5,
rowDisplayStyle: 'block',
activePage: 0,
rows: []
},
_create: function() {
var rows = $("tbody", this.element).children();
this.options.rows = rows;
this.options.rowDisplayStyle = rows.css('display');
var nav = this._getNavBar();
this.element.after(nav);
this.showPage(0);
},
_getNavBar: function() {
var rows = this.options.rows;
var nav = $('<div>', {class: 'paging-nav'});
for (var i = 0; i < Math.ceil(rows.length / this.options.limit); i++) {
this._on($('<a>', {
href: '#',
text: (i + 1),
"data-page": (i)
}).appendTo(nav),
{click: "pageClickHandler"});
}
//create previous link
this._on($('<a>', {
href: '#',
text: '<<',
"data-direction": -1
}).prependTo(nav),
{click: "pageStepHandler"});
//create next link
this._on($('<a>', {
href: '#',
text: '>>',
"data-direction": +1
}).appendTo(nav),
{click: "pageStepHandler"});
return nav;
},
showPage: function(pageNum) {
var num = pageNum * 1; //it has to be numeric
this.options.activePage = num;
var rows = this.options.rows;
var limit = this.options.limit;
for (var i = 0; i < rows.length; i++) {
if (i >= limit * num && i < limit * (num + 1)) {
$(rows[i]).css('display', this.options.rowDisplayStyle);
} else {
$(rows[i]).css('display', 'none');
}
}
},
pageClickHandler: function(event) {
event.preventDefault();
$(event.target).siblings().attr('class', "");
$(event.target).attr('class', "selected-page");
var pageNum = $(event.target).attr('data-page');
this.showPage(pageNum);
},
pageStepHandler: function(event) {
event.preventDefault();
//get the direction and ensure it's numeric
var dir = $(event.target).attr('data-direction') * 1;
var pageNum = this.options.activePage + dir;
//if we're in limit, trigger the requested pages link
if (pageNum >= 0 && pageNum < this.options.rows.length) {
$("a[data-page=" + pageNum + "]", $(event.target).parent()).click();
}
}
});
});
})(jQuery);
答案 0 :(得分：0)
我使用相同的分页代码遇到了同样的问题。
这可能不是最好的解决方案，但我最终做的是每次从服务器接收新数据时删除并重新创建表。
这是我在HTML中声明表格的方式：
<div class="right_col" role="main">
<table id="dataTable" class="table">
<thead>
<tr id="dataTableRow">
<th>Status</th>
<th>Email</th>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Gender</th>
<th>City</th>
<th>Title</th>
<th>Company</th>
<th>Phone Number</th>
<th>Social Networks</th>
</tr>
</thead>
<tbody class="member" id="table_details">
</tbody>
</table>
</div>
每次从服务器收到新数据时，都会调用此函数：
function updateTable(json) {
// First, we remove the table and the paging from the DOM
$('#dataTable').remove();
$('.paging-nav').remove();
// Then we recreate it
$('.right_col').append('<table id="dataTable" class="table"><thead><tr id="dataTableRow"><th>Status</th><th>Email</th><th>First Name</th><th>Last Name</th><th>Age</th><th>Gender</th><th>City</th><th>Title</th><th>Company</th><th>Phone Number</th><th>Social Networks</th></tr></thead><tbody class="member" id="table_details"></tbody></table>');
// We fill rows with the dynamic data from the json and append it to the table the same way you do
...
// Finally, we call the paging function again
$('#dataTable').paging({
limit: 10,
rowDisplayStyle: 'block',
activePage: 0,
rows: []
});
PS：顺便说一句，在_getNavBar函数中，你应该替换
this._on($('<a>', {
href: '#',
text: (i + 1),
"data-page": (i)
与
this._on($('<a>', {
href: '#',
text: (i + 1),
"data-page": (i),
"class": i == 0 ? "selected-page" : ""
这样，首次启动页面时，第一页将包含“selected-page”类。