Paging content published by jQuery PHP without refreshing (Fckeditor)_php tips

This article will use jQuery, combined with PHP, to paginate the content published by Fckeditor and achieve page switching without refreshing.
This article assumes that you are a WEB developer, have knowledge of jQuery and PHP, and are familiar with the configuration and use of Fckeditor.
Fckeditor editor has a function button to insert a page break. Clicking this button will insert a page break in the content area, as shown in the red box below:

The html code generated corresponding to the

page break is:

<div style="page-break-after: always"><span style="display: none"> </span></div> 

Our actual application situation is as follows: the content published through the Fckeditor editor in the background is submitted to the database, the frontend obtains the published content through PHP link to the database, and then splits the long content and performs paging.
PHP
The method of PHP dividing content is as follows:

function pageBreak($content){ 
 $content = $content; 
 $pattern = "/<div style=\"page-break-after: always\"><span style=\"display: none\"> 
<\/span><\/div>/"; 
 $strSplit = preg_split($pattern, $content, -1, PREG_SPLIT_NO_EMPTY); 
 $count = count($strSplit); 
 $outStr = ""; 
 $i  = 1; 
 
 if ($count > 1 ) { 
  $outStr = "<div id='page_break'>"; 
  foreach($strSplit as $value) { 
   if ($i <= 1) { 
    $outStr .= "<div id='page_$i'>$value</div>"; 
   } else { 
    $outStr .= "<div id='page_$i' class='collapse'>$value</div>"; 
   } 
   $i++; 
  } 
 
  $outStr .= "<div class='num'>"; 
  for ($i = 1; $i <= $count; $i++) { 
   $outStr .= "<li>$i</li>"; 
  } 
  $outStr .= "</div></div>"; 
  return $outStr; 
 } else { 
  return $content; 
 } 
}

As you can see, the $pattern in the above code is the page break code generated by the Fckeditor editor. Then PHP compares the content through the preg_split() function, and uses the separator as the dividing point to split the content into multiple pages_. And generate paging navigation buttons. When using it, just call pageBreak($content).
CSS
We use CSS to present the style of the paging button. Of course, you can modify these CSS to customize the appearance you want.

#page_break {} 
#page_break .collapse {display: none;} 
#page_break .num {padding: 10px 0;text-align: center;} 
#page_break .num li{display: inline; margin: 0 2px;padding: 3px 5px;border:1px solid #abcee4; 
background-color: #fff;color: #369;text-align: center;cursor: pointer;overflow: hidden;} 
#page_break .num li.on{background-color: #369;color: #fff;font-weight: bold;} 

jQuery

$(function(){ 
 $('#page_break .num li:first').addClass('on'); 
 
 $('#page_break .num li').click(function(){ 
  //隐藏所有页内容 
  $("#page_break div[id^='page_']").hide(); 
 
  //显示当前页内容。 
  if ($(this).hasClass('on')) { 
   $('#page_break #page_' + $(this).text()).show(); 
  } else { 
   $('#page_break .num li').removeClass('on'); 
   $(this).addClass('on'); 
   $('#page_break #page_' + $(this).text()).fadeIn('normal'); 
  } 
 }); 
}); 

We use jQuery to set the first page of the paging navigation button to the current state, and then click the paging button to switch the button's state and display the content of the corresponding page.
By the way, the title of the article talks about no refresh. In fact, this is not the no refresh effect of Ajax, but the display and hiding of page content controlled by jQuery. The page content is read and loaded at one time.

There are many articles about jquery non-refresh pagination. You can search for previous articles, which may provide greater inspiration.