Проблема с ajax пагинацией, в чём может быть ошибка?

Question

[jasonOk]

Ajax-пагинация, сверху идёт ряд кнопок номеров страниц, затем рядом 2 "радио" инпута-сортировки в прямом или обратном порядке, следом выводятся комментарии и после повторяется пагинация (ряд кнопок номеров страниц, затем рядом 2 "радио" инпута).
Столько фигни из-за того, что нужно когда человек нажимает на номер страницы сверху, она выделялась и снизу; + также с радио-кнопками. Знаю, что ужас, кошмар, и даже глобальная переменная iD......................
А как более рационально?

Проблема: при нажатии на последний номер страницы у пагинации 2, кидает вниз страницы; с чем это связано ума не приложу.

<script type="text/javascript">
 $(document).ready(function(){
 iD = 1; // global var
  
 
  function CL(){
       // для сортировки
      if($('#radio1').attr('checked') || $('#radio3').attr('checked')) var S = 1;
      if($('#radio2').attr('checked') || $('#radio4').attr('checked')) var S = 2;
       //

    $("#paging_button li").css({'background-color' : ''}); 
    

     if(this.id)  iD = this.id;
    
var O = document.getElementById(iD);
$(O).css({'background-color' : '#006699'});
var cla = $(O).attr('class');
     $("."+cla).css({'background-color' : '#006699'}); // изменение цвета 
    
      $("#content").load("pag/data.php?page=" + iD + "&s="+ S +"&id=<?php echo $id;?>"); // загрузка контента

    return false;
  }
  
  $(".pag1").css({'background-color' : '#006699'}); // при загрузке документа номер первой страницы сразу выделяется
 
  $("#content").load("pag/data.php?page=1&id=<?php echo $id;?>"); // загрузка комментариев
  $("#paging_button li").on("click",CL);
  
// для сортировки 
   $("#radio2").click( function() {
            if($('.radio2').attr('checked')){
                $('.radio4').attr('checked', true);
              CL();
             
            } 
       });
     $("#radio1").click( function() {
            if($('.radio1').attr('checked')){
                $('.radio3').attr('checked', true);
              CL();
            } 
       });
     $("#radio3").click( function() {
            if($('.radio3').attr('checked')){
                $('.radio1').attr('checked', true);
              CL();
            } 
       });       
     $("#radio4").click( function() {
            if($('.radio4').attr('checked')){
                $('.radio2').attr('checked', true);
              CL();
            } 
       });       
});
// для сортировки 
</script>
    
  
    <!-- Пагинация 1 -->
    <?php if($pages > 1){ ?> <div id="paging_button">
    <ul id="pagList1">
    <?php

    for($i=1; $i<=$pages; $i++)
    {
      echo '<li id="'.$i.'" class="pag'.$i.'">'.$i.'</li>';
    }?>
    </ul>
        <span class="tooltip-1" data-title="Выводить комментарии в прямом порядке" id="toltip-1">
<input type="radio" id="radio1" name="sort" class="checkbox-sort radio1" checked><label for="radio1"><i class="fa fa-sort-numeric-asc"></i></label></span>
        <span class="tooltip-1" data-title="Выводить комментарии в обратном порядке" id="toltip-2">
<input type="radio" id="radio2" name="sort" class="checkbox-sort radio2"><label for="radio2"><i class="fa fa-sort-numeric-desc"></i></label></span>
   <?php } ?>
      <!-- Пагинация 1 -->
   
<-- Контент -->
<div>
  <div id="container">    <div id="content">
    &nbsp;
    </div>
   </div>
 </div>
 <-- Контент -->

       <!-- Пагинация 2 -->
    <?php if($pages > 1){ ?>
    <ul id="pagList2">
    <?php
   
    for($i=1; $i<=$pages; $i++)
    {
      echo '<li id="'.$i.'" class="pag'.$i.'">'.$i.'</li>';
    }?>
    </ul>
      <span class="tooltip-1" data-title="Выводить комментарии в прямом порядке" id="toltip-1">
<input type="radio" id="radio3" name="sort2" class="checkbox-sort radio3" checked><label for="radio3"><i class="fa fa-sort-numeric-asc"></i></label></span>
      <span class="tooltip-1" data-title="Выводить комментарии в обратном порядке" id="toltip-2">
<input type="radio" id="radio4" name="sort2" class="checkbox-sort radio4"><label for="radio4"><i class="fa fa-sort-numeric-desc"></i></label></span>      
      
           
  </div>
  <!-- Пагинация 2 -->
<?php  } ?>

Подскажите, что можно сделать попроще и "по-человечески" и почему не работает как надо.

Comments

[Light Air]

Я бы рекомендовал использовать готовые решения типа jPage. Можно посмотреть другие плагины ("ajax jquery client-side pagination plugin"). Ну или вот к примеру