5
Benim ASP.NET MVC 3 uygulamasında benim forum yapmak için Jquery'nin pagination eklentisini kullanmak istiyorum ...Jquery sayfalama ve geçmiş eklentilerini birlikte kullanmanın en etkili yolu
Bu yüzden, Ajax ile tüm sayfa değişikliklerini yapmak ve tarayıcının arkası için history eklentisini kullanmak istiyorum. sonraki düğmeler ...
Bunun için en verimli javascript/jquery kodu nedir?
Bu kodu ay önce yazmıştım, ama şimdi çirkin görünüyor ...
$(document).ready(function() {
$.history.init(function (hash) {
if (hash != "") {
NavigateToPage(hash.substring(0,hash.indexOf("page")),hash.substring(hash.lastIndexOf("_")+1));
} else {
if(firstTimeOpen==true){
firstTimeOpen=false;
}
else
{
window.location.replace("/Forum");
}
}
});
$(".more-button").click(function() {
currentForumId=$("#pagination-td").parent().prev().attr("id").substring(5);
$.history.load($(this).parents("tr").attr("id").substring(5)+"page_1");
});
});
function NavigateToPage(forumId,page) {
lastForumId=currentForumId;
currentForumId=forumId;
var elem=$("#forum"+forumId);
var elemStr="#forum"+forumId;
if($("#pagination-td").parent().prev().attr("id").substring(5)!=forumId)
{
forumChanged=true;
MakeChanges(elem,page);
}
else
{
if($(".pagination").html()==null)
{
if(elem.find("a").attr("id")>@MyProject.Constants.THREAD_COUNT)
{
$("#pagination-td").pagination(elem.find("a").attr("id"), {
items_per_page: @MyProject.Constants.THREAD_COUNT,
callback: handlePaginationClick
});
}
}
}
$.get('/Forum/ForumThreads', { id: forumId, beginNumber: page - 1, count: @MyProject.Constants.THREAD_COUNT }, function (data) {
RemoveElements(elem.prev(), @MyProject.Constants.THREAD_COUNT);
elem.before(data);
elem.hide();
$("tr:not("+elemStr+"):hidden").show(300);
});
CorrectPagination(page);
}
function RemoveElements(element)
{
if (element.hasClass("forum-desc")) return false;
var prevElement=element.prev();
element.remove();
RemoveElements(prevElement);
}
function MakeChanges(elem,page)
{
var element=elem.prev();
if(forumChanged==true)
{
$.get('/Forum/ForumThreads', { id: lastForumId, beginNumber:0, count: @MyProject.Constants.THREAD_VISIBLE_COUNT }, function (data) {
RemoveElements($("#pagination-td").parent().prev().prev());
$("#pagination-td").parent().prev().before(data);
$("#pagination-td").parent().prev().hide();
$("#pagination-td").parent().remove();
elem.after('<tr style="display:none"><td id="pagination-td" colspan="3" style="border-bottom:none;"></td></tr>');
if(elem.find("a").attr("id")> @MyProject.Constants.THREAD_COUNT)
{
$("#pagination-td").pagination(elem.find("a").attr("id"), {
items_per_page: @MyProject.Constants.THREAD_COUNT,
callback: handlePaginationClick
});
}
$("tr:hidden").show(300);
CorrectPagination(page);
$("#pagination-td").parent().prev().hide();
});
}
}
function handlePaginationClick(new_page_index,pagination_container)
{
$.history.load(currentForumId+"page_"+(new_page_index+1));
return false;
}
function CorrectPagination(page) {
$(".pagination span.current:not(.prev):not(.next)").replaceWith('<a href="#">' + $(".pagination span.current:not(.prev):not(.next)").html() + '</a>');
$(".pagination a:not(.prev):not(.next)").eq(page - 1).replaceWith('<span class="current">' + $(".pagination a:not(.prev):not(.next)").eq(page - 1).html() + "</span>");
if ($(".pagination span.current:not(.prev):not(.next)").next().html() == "Next") {
$(".pagination span.prev").replaceWith('<a class="prev" href="#">Prev</a>');
$(".pagination a.next").replaceWith('<span class="current next">Next</span>');
}
else {
if ($(".pagination span.current:not(.prev):not(.next)").prev().html() == "Prev") {
$(".pagination a.prev").replaceWith('<span class="current prev" >Prev</span>');
$(".pagination span.next").replaceWith('<a class="next" href="#">Next</a>');
}
else {
$(".pagination span.prev").replaceWith('<a class="prev" href="#">Prev</a>');
$(".pagination span.next").replaceWith('<a class="next" href="#">Next</a>');
}
}
}
Sayfanın başındaki forum konuları ve bir pagination (active thread) kullanıyorum. diğer daha fazla düğme, geçerli iş parçacığı bu iş parçacığı ile değiştirilir.
Yani html'de bu
<table id="forum-table" class="border-top">
@foreach (var forum in Model)
{
<tr class="forum-desc">
<td class="forum-name" colspan="4"><a class="label-h4 purple" href="/Forum/Forums/@forum.Key.Forum.Id">@forum.Key.Forum.Name</a>
@if (forum.Key.Forum.Description != null)
{
<span> - </span>
<span>@forum.Key.Forum.Description</span>
}</td>
</tr>
for(int index = 0; index < forum.Value.Count; index++)
{
<tr>
<td class="thread-pic"><img src="/img/forum/thread-icon.png" alt="" /></td>
<td class="thread-name">
<a href="/Forum/Thread/@forum.Value[index].Thread.Id" class="blue linked">@forum.Value[index].Thread.Title</a>
</td>
<td class="thread-post-count">
<span>Posts:</span>@forum.Value[index].PostCount
</td>
<td class="thread-information">
<span>by </span><a class="blue" href="/Home/UserProfile/@forum.Value[index].LastPostUserName">@forum.Value[index].LastPostUserName</a> <br />
@if (forum.Value[index].LastPostDate != DateTime.MinValue)
{
@forum.Value[index].LastPostDate
}
</td>
</tr>
}
if (forum.Key.ThreadCount > @MyProject.Constants.THREAD_VISIBLE_COUNT)
{
<tr id="[email protected](forum.Key.Forum.Id)">
<td class="more-td">
<a href="javascript:void" class="blue linked more-button" id="@forum.Key.ThreadCount">more</a>
</td>
</tr>
}
if (forum.Key.Forum.Id == Model.Keys.FirstOrDefault().Forum.Id)
{
<tr style="display:none">
<td id="pagination-td" colspan="3" style="border-bottom:none;"></td>
</tr>
}
if (forum.Key.ThreadCount == 0)
{
<tr>
<td colspan="4"><span>No threads available in this forum</span></td>
</tr>
}
}
</table>
var Bu yüzden bu iki eklentiyi karıştırmak için en kısa (verimli) javascript/jquery kodu istiyorum.
Şimdiye kadar denediğiniz kodu, tartışma için ortak bir temel oluşturmamız ve nasıl geliştirilebileceğini (gerekirse) görebilmeniz için gönderebilir misiniz? –
Evet, tabiki şu anda sorumu düzenleyeceğim))) –
Sadece sorumu düzenledim ... –