我目前有一个使用 jquery 的“加载更多”小部件，当您单击“更多”按钮时，它会显示来自数据库的更多数据。我在小部件中有数据，但我想在小部件之外提取数据（并具有相同的功能）。
现在，这是我拥有的 javascript 和 HTML：
Javascript：
<script type="text/javascript">
$(function() {
<?php $number_of_posts = 2; ?>;
<?php $_SESSION['posts_start'] = isset($_SESSION['posts_start']) ? $_SESSION['posts_start'] : $number_of_posts; ?>;
//<?php $_SESSION['posts_start'] = $_SESSION['posts_start'] ? $_SESSION['posts_start'] : $number_of_posts; ?>;
//<?php $_SESSION['posts_start'] = 2 ?>;
//var start = <?php echo $_SESSION['posts_start']; ?>;
var start = {{ Session::get('posts_start', 2) }};
var initialPosts = <?php echo Fanartist::friend_activity_json(0, $_SESSION['posts_start']); ?>;
//var initialPosts = <?php echo Fanartist::friend_activity_json(0, 2); ?>;
var desiredPosts = <?php echo $number_of_posts; ?>;
var template = '<div class="item">'
+'<img class="thumbnail pull-left" width="50px" height="50px" src="http://placehold.it/50x50" style="margin: 0px 10px 5px 0px;">'
+'<a href="#"><h4 style="margin: 5px 0px;" class="first_name"></h4></a>'
+'<p><small class="stage_name"></small></p>'
+'<div class="well well-small created_at"></div>'
+'</div>';
var widget = $('#widget'),
// Element to load the posts
content = widget.find('.content'),
// the more button
more = widget.find('.more'),
// the post counter
counter = widget.find('.badge');
// Create alerts elements (Display Success or Failure)
var alerts = {
requestEmpty : $('<div class="alert alert-info">No more data</div>'),
requestFailure : $('<div class="alert alert-error">Could not get the data. Try again!</div>')
}
var progressElement = $('<div class="progress" style="margin-bottom:0"><div class="bar"></div></div>');
var progressBar = progressElement.find('.bar');
var postHandler = function(posts){
// Set the progress bar to 100%
progressBar.css('width', '100%');
// Delay the normal more button to come back for a better effect
window.setTimeout(function(){more.html('More <span class="caret"></span>')}, 500);
// insert childrens at the end of the content element
for (post in posts){
// Clone the element
var $post = $(template).clone();
$post.attr('id', 'post-' + posts[post].ID);
$post.find('.first_name').html(posts[post].first_name);
$post.find('.last_name').html(posts[post].last_name);
$post.find('.city').html(posts[post].city);
$post.find('.gender').html(posts[post].gender);
$post.find('.stage_name').html(posts[post].stage_name);
$post.find('.created_at').html(posts[post].created_at);
content.append($post);
}
content.animate({
scrollTop: $('#post-' + posts[0].ID).offset().top + (content.scrollTop()- content.offset().top)
}, 200);
}
// place the initial posts in the page
postHandler(initialPosts);
// add the click event to the more button
more.click(function(){
// Set the progress bar to 0%
progressBar.css('width', '0%');
// remove the more button innerHTML and insert the progress bar
more.empty().append(progressElement);
// AJAX REQUEST
$.ajax({
url: "http://crowdtest.dev:8888/fans/setup_widget",
type: 'GET',
// We do not want IE to cache the result
cache: false,
data: {
'start': start,
'desiredPosts': desiredPosts
}
}).success(function (data, text) {
// parse the response (typeof data == String)
data = JSON.parse(data);
if (data.length > 0){
// Update the total number of items
start += data.length;
// Update the counter
counter.html(start);
// load items on the page
postHandler(data);
}else{
$alert = alerts.requestEmpty;
// insert the empty message
widget.prepend($alert);
// Set the progress bar to 100%
progressBar.css('width', '100%');
// Remove the more button
window.setTimeout(function(){more.remove()}, 500);
// remove the empty message after 4 seconds
window.setTimeout(function(){$alert.remove()}, 4000);
}
}).error(function (request, status, error) {
$alert = alerts.requestFailure;
// insert the failure message
widget.prepend($alert);
// Set the progress bar to 100%
progressBar.css('width', '100%');
// Delay the normal more button to come back for a better effect
window.setTimeout(function(){more.html('More <span class="caret"></span>')}, 500);
});
});
console.log(desiredPosts);
console.log(start);
console.log(initialPosts);
});
</script>
HTML：
<div id="widget">
<h4 id="widget-title">
Widget Title <span class="badge badge-info"><?php echo $_SESSION['posts_start'] ?></span>
</h4>
<div class="content" style="height: 300px; overflow: auto; margin: 0px;"></div>
<button class="more btn btn-block">
More <span class="caret"></span>
</button>
</div>
我想在小部件之外有这个功能，显示在表格中。对于特定行，我想要数据：
<tr>
<td><div class="friend_image"><img src="https://graph.facebook.com/{{ $fbid }}/picture" alt="{{$first_name}}" height="65" width="65" class="img-rounded"></div></td>
<td><div class="friend_activity"><span class="activity_text">{{$first_name}} {{$last_name}} indicated that @if($gender=='male') he @else she @endif wants <a href="/artists/{{$artist_id}}">{{$stage_name}}</a> to come to {{$city}}</span>
<br><span class="activity_subtext">{{StringEdit::getDate($created_at)}}</span>
</div>
</td>
</tr>
你知道我会怎么做吗？感谢您的帮助和建议。