jQuery를 사용하여 페이지 분할 된 청크로 콘텐츠를 분할하는 방법은 무엇입니까?

Question

페이지 매김을 사용하여 콘텐츠를 청크로 분할합니다 (다음, 이전, 현재 버튼 있음).

데이터를 페이지 매김으로 표시하고 싶습니다. 즉, 한 페이지에 500 자만 넣고 싶습니다. 예제 나는 div (일부 데이터 보유)에서 데이터를 페이지 매김 (다음, 이전 단추 사용 불가능)으로 표시하려고합니다. 사용자가 첫 번째 버튼을 클릭하면 처음 500 문자 만 표시되고, 이전 문자는 비활성화되며 다음 버튼을 클릭하면 다음 500 문자가 표시됩니다 (이전 문자는 활성화 됨). 이제 사용자는 다음 또는 이전 500자를 검사 할 수 있습니다.

클릭하면 현재 단추가 모든 콘텐츠를 표시합니다. 본인은 본 http://jsfiddle.net/naveennsit/aD4EF/5/

alert($("#test").html()); 
alert($("#test").html().length); 
var currentpage = 0; 
var str = new Array(); 
var len = $("#test").html().length; 
/*for(var i = 0; var = len; i++){ 

    str[i] = $("#test").html().substr(0, 500); 
}*/ 

$("#first").click(function() { 
    alert("first"); 
    var text = $("#test").html().substr(0, 500); 
    alert(text); 
    $("#test").empty(); 
    $("#test").val(text); // First time it is not working ? 

}); 
$("#nxt").click(function() { 
    alert("nxt"); 
}); 

$("#pre").click(function() { 
    alert("pre"); 
}); 

Answer 1

처럼 사용할 500 문자를 표시하지 않습니다이 사용하고 때 다음은 코드의 작동 구현입니다.

정규식을 사용하여 텍스트를 500 자 블록으로 분할합니다 (실제로는 문장의 끝에서 500 번째 문자가 나올 때마다 다음 정오를 찾습니다).

그런 다음이 블록들 각각을 div으로 감 쌉니다.

이러한 div는 숨겨지고 표시되는 div에 따라 표시됩니다.

버튼은 jQuery를 이송 기능 first(), last(), next(), prev()을 사용 div를 통해 통과.

자바 스크립트

var contentBlocks = $('#content').text().replace(/.{500}\S*\.\s+/g, '$&@').split(/\.\s+@/); 
var contentBlocksLength = contentBlocks.length; 
$('#content').html(''); 

$.each(contentBlocks, function(index, value) { 
    $('#content').append($('<div class="textBlock">' + value + ((index != contentBlocksLength - 1) ? '.' : '') + '</div>')); 
}); 

$('#content .textBlock').first().addClass('active'); 

$('#first').on('click', function() { 
    $('#content .textBlock.active').removeClass('active'); 
    $('#content .textBlock').first().addClass('active'); 
}); 

$('#next').on('click', function() { 
    if (!$('#content .textBlock.active').is(':last-child')) { 
     var $nextTextBlock = $('#content .textBlock.active').next('.textBlock'); 
     $('#content .textBlock.active').removeClass('active'); 
     $nextTextBlock.addClass('active'); 
    } 
}); 

$('#previous').on('click', function() { 
    if (!$('#content .textBlock.active').is(':first-child')) { 
     var $previousTextBlock = $('#content .textBlock.active').prev('.textBlock'); 
     $('#content .textBlock.active').removeClass('active'); 
     $previousTextBlock.addClass('active'); 
    } 
}); 

$('#last').on('click', function() { 
    $('#content .textBlock.active').removeClass('active'); 
    $('#content .textBlock').last().addClass('active'); 
}); 

$('#all').on('click', function() { 
    $('#content .textBlock').addClass('active'); 
}); 

CSS

#content .textBlock { 
    display: none; 
} 
#content .textBlock.active { 
    display: block; 
} 

HTML

<button id="first">First</button> 
<button id="previous">Previous</button> 
<button id="next">Next</button> 
<button id="last">Last</button> 
<button id="all">All</button> 
<div id="content">Ricky Thomas Ponting, AO (born 19 December 1974), nicknamed Punter, is an Australian cricketer, and former captain of the Australia national cricket team between 2004 and 2011 in Test cricket and 2002 and 2011 in One Day International cricket. He is a specialist right-handed batsman, slips and close catching fielder, as well as a very occasional bowler. He represents the Tasmanian Tigers in Australian domestic cricket, the Hobart Hurricanes in the Big Bash League, and played in the Indian Premier League with the Kolkata Knight Riders in 2008. He is widely considered by many to be one of the best batsmen of the modern era, along with Sachin Tendulkar of India and Brian Lara of the West Indies. On 1 December 2006, he reached the highest rating achieved by a Test batsman in the last 50 years. Ponting made his first-class debut for Tasmania in November 1992, when just 17 years and 337 days old, becoming the youngest Tasmanian to play in a Sheffield Shield match. However, he had to wait until 1995 before making his One Day International (ODI) debut, during a quadrangular tournament in New Zealand in a match against South Africa. His Test debut followed shortly after, when selected for the first Test of the 1995 home series against Sri Lanka in Perth, in which he scored 96. He lost his place in the national team several times in the period before early-1999, due to lack of form and discipline, before becoming One Day International captain in early-2002 and Test captain in early-2004. After being involved in over 160 Tests and 370 ODIs, Ponting is Australia's leading run-scorer in Test and ODI cricket. He is one of only four players (along with Sachin Tendulkar, Rahul Dravid and Jacques Kallis) in history to have scored 13,000 Test runs. Statistically, he is one of the most successful captains of all time, with 48 victories in 77 Tests between 2004 and 31 December 2010, while as a player he is also the only cricketer in history to be involved in 100 Test victories.[1] On 29 November 2012 Ponting announced his retirement from Test cricket, the day before he would play in the Perth Test against South Africa. This was his 168th and last Test appearance,[2] equalling the Australian record held by Steve Waugh.[3][4] Ricky Ponting retired on 3 December 2012 with a Test batting average of 51.85.[5] He continued to play cricket around the world. In February 2013 it was announced that he would be captaining the Mumbai Indians team in the Indian Premier League.[6] and in March 2013 he was announced as the first international franchise player for the Caribbean Premier League.[7] Later that month it was revealed by Ponting that this would be his last season playing cricket, as at the end of the competition he would be retiring from all forms of the game.[8] In his final first class innings for Surrey against Notts he hit an unbeaten 169 bringing up a total of 82 first class 100s in an illustrious county career.</div> 

Demo