我正在尝试使用此代码附加从数据库返回的数据：这是将数据从数据库传递到 jquery 脚本的 PHP 脚本：
$conn->setAttribute(PDO::ATTR_EMULATE_PREPARES,false);
$conn->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
$conn->exec("SET CHARACTER SET utf8");
if(isset($_POST['pageLimit']) && !empty($_POST['pageLimit']))
{
$pageLimit=$_POST['pageLimit'];
}
else
{
$pageLimit='0';
}
$pageLimit=$pageLimit;
$per_page=10;
$stmt=$conn->//query;
$stmt->bindparam(':pageLimit',$pageLimit);
$stmt->bindparam(':per_page',$per_page);
$stmt->execute(array($pageLimit,$per_page));
$count=$stmt->rowCount();
// echo $count;
$HTML='';
if($count>0){
while($row=$stmt->fetch()){
$HTML.='<tr><td>';
$HTML.=$row["PROJECT_ID"];
$HTML.='</td><td>';
$HTML.=$row["Project_Title"];
$HTML.='</td><td>';
$HTML.=$row["PI_Name"];
$HTML.='</td><td>';
$HTML.=$row["Start_Date"];
$HTML.='</td><td>';
$HTML.=$row["End_Date"];
$HTML.='</td></tr>';
}
$loadCount=$pageLimit+$per_page;
if($count>=$per_page){
$HTML.='<div class="load_more_link">';
$HTML.='<input type="button" class="button" value="Load More"
onclick=loadData("'.$loadCount.'")>';
}
}
else{
$HTML='No data';
}
echo $HTML;
?>
下面是我需要显示数据的主页
<html>
<head>
<script src="/javascript/jquery-1.10.2.min.js"></script>
<script src="/javascript/jquery-ui-1.10.3.custom.js"></script>
<script src="/javascript/jquery.tablesorter.js"></script>
<script src="/javascript/jquery.tablesorter.widgets.js"></script>
<script>
$(function() {
$(".tablesorter")
.tablesorter({
theme : 'blue',
// this is the default setting
cssChildRow: "tablesorter-childRow",
// initialize zebra and filter widgets
widgets: ["zebra", "filter","stickyHeaders"],
widgetOptions: {
// include child row content while filtering, if true
filter_childRows : true,
// class name applied to filter row and each input
filter_cssFilter : 'tablesorter-filter',
// search from beginning
filter_startsWith : false,
// Set this option to false to make the searches case sensitive
filter_ignoreCase : true
}
});
// hide child rows
$('.tablesorter-childRow td').hide();
// Toggle child row content (td), not hiding the row since we are using rowspan
// Using delegate because the pager plugin rebuilds the table after each page change
// "delegate" works in jQuery 1.4.2+; use "live" back to v1.3; for older jQuery - SOL
$('.tablesorter').delegate('.toggle', 'click' ,function(){
// use "nextUntil" to toggle multiple child rows
// toggle table cells instead of the row
$(this).closest('tr').nextUntil('tr:not(.tablesorter-childRow)').find('td').toggle();
return false;
});
// Toggle widgetFilterChildRows option
$('button.toggle-option').click(function(){
var c = $('.tablesorter')[0].config.widgetOptions,
o = !c.filter_childRows;
c.filter_childRows = o;
$('.state').html(o.toString());
// update filter; include false parameter to force a new search
$('input.tablesorter-filter').trigger('search', false);
return false;
});
});
</script>
</head>
<table id="tablesorter-demo" class="tablesorter">
<thead>
<tr>
<th>Record Id</th>
<th>Title</th>
<th>PI Name</th>
<th>Project Start Date</th>
<th>Project End Date</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript">
function loadData(pageLimit){
$(".flash").show();
var dataString = 'pageLimit='+ pageLimit;
$.ajax({
type: "POST",
url: "collaborations_paging_test.php",
data: dataString,
cache: false,
success: function(result){
$(".flash").hide();
$(".load_more_link").addClass('noneLink');
var outResult = $(result);
$("#tablesorter-demo >tbody:last").append($('<tr>').append($('<td>').append(result).append($('</td>').append($('</tr>')))));
}
});
}
loadData('0');
</script>
</html>
我成功地检索数据并显示它，但它只显示在一列上。我想按下加载更多按钮并获取 10 多行数据，但在我的情况下，它似乎在列中显示所有 10 条记录，并将其放在单个单元格中。我无法在其他列中输入数据。似乎查询数据库的php脚本中的标签“”没有任何区别。我也关注了这个页面http://tablesorter.com/docs/example-empty-table.html#
但它不起作用。Javascript 对我来说相对较新，我仍然在学习一些东西，所以请多多包涵。