Javascript 限制分页时的项目数

我这里有我的代码，如何将这10个按钮限制为至少4个按钮？我只是个编程新手

我的JavaScript：

$('.butt').on('click', function () {

      var duration = 0;
      var old_num = $(this).parent().find('.active-btn').val();
      var new_num = $(this).val();

      if (new_num > old_num) {

        $('#page' + old_num).toggle('slide', {
          duration,
          direction: 'left',
            complete: function () {

              $('#btn_page' + old_num).removeClass('active-btn');
              $('#page' + old_num).clearQueue();
              $('#page' + old_num).removeClass('active-page');

              $('#page' + new_num).addClass('active-page');
              $('#btn_page' + new_num).addClass('active-btn');

              $('#page' + new_num).toggle('slide', {
                duration,
                direction: 'right'
              });
            }
        });

HTML:

1
2
3
4
5
6
7
8
9
10

“如何将这10个按钮限制为至少4个按钮？”-请回答您的问题以澄清这意味着什么。您是说您想获取任意数量的输入数据，并将其分成最多四页（带四个按钮），还是希望像

[1][2][3][4][next]

？或（同时，显示的JS似乎缺少函数的结尾。）为什么不在html中添加4个按钮呢？对不起，我的问题是，我的意思是显示看起来像[prev][1][2][3][4][next]，因为在我的程序中有数百个页面。

<ul class="btn-group pagination" id="btn-group">
<br>
    <li class="btn butt active-btn" type="button" id="btn_page1"  value="1"> 1 </li>
    <li class="btn butt" type="button" id="btn_page2"  value="2"> 2</li>
    <li class="btn butt" type="button" id="btn_page3"  value="3"> 3 </li>
    <li class="btn butt" type="button" id="btn_page4"  value="4"> 4</li>
    <li class="btn butt" type="button" id="btn_page5"  value="5"> 5</li>
    <li class="btn butt" type="button" id="btn_page6"  value="6"> 6 </li>
    <li class="btn butt" type="button" id="btn_page7"  value="7"> 7</li>
    <li class="btn butt" type="button" id="btn_page8"  value="8"> 8</li>
    <li class="btn butt" type="button" id="btn_page9"  value="9"> 9 </li>
    <li class="btn butt" type="button" id="btn_page10"  value="10"> 10</li>  
</ul>