Posts are not being displayed correctly when I use Endless Pagination

_microposts.html.erb

<% for micropost in @microposts %>
<tr>
	<td class="tdeux">
		<div class="head1"><%= image_tag("#{ micropost.to_guys ? "guys" : "girl" }-head.png") %></div>
	</td>
	<td valign="top">
		<p class="peopleposts"><%= link_to micropost.content, page_path(micropost) %></p>
	</td>
	<td class="td2">
		<div class="share1">
			<%= tweet_button(:via => "hmdy", :url => "http://localhost:3000/pages/#{micropost.id}", :text => "#{@micropost.content}", :lang => "en", :related => "helpmedateyou",  :count => "none") %>
		</div>
	</td>
</tr>
<% end %>

Explanation.txt

controller >
 - pages
 - microposts
model >
 - micropost
views >
 - microposts> 
 - pages>
     - _microposts.html.erb
     - index.html.erb
     - index.js.erb



This is how the contents are supposed to be displayed:
http://hmdy.herokuapp.com/

index.html.erb

<!-- BEGINNING of CONTAINER here-->
<div id="container">
	<div id="separator"><p>What People Are Saying</p></div>
		<div id="section">
			<table>
				<thead>
					<tr>
				   	  <th><h2>Who?</h2></th>
				   	  <th><h2>What they said?</h2></th>
				   	  <th><h2></h2></th>
					<tr/>
				</thead>
				<div id="microposts">
					<tbody>
						<%= render @microposts%>			
					</tbody>
				</div>	
			</table>
		<%= will_paginate @microposts %>
		<div id="empty"></div>
	</div>	
</div>


<!-- END of CONTAINER here-->

index.js.erb

$('#microposts').append('<%= j render(@microposts) %>)');
$('.pagination').replaceWith('<%= j will_paginate(@render) %>');

pages.js.coffee

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/


# $('#inputtext').limit('140','#charsLeft');

jQuery ->
  $(window).scroll ->
    if $(window).scrollTop() > $(document).height() - $(window).height() - 50
      $.getScript($('.pagination .next_page').attr('href'))