如何修改nav-pills來限制顯示的頁數

Question

我正在嘗試使用nav-pills實現分頁系統。 由於這些nav-pills是動態創建的，因此有時只有 1 個，而有時則有 100 個（或更多）。

我正在使用bootstrap 4和Django

nav-pills數量nav-pills ，視覺沖擊力非常大。

附上照片給你一個想法：

編碼：

<ul class="nav nav-pills" id="evidence-formset-tab" role="tablist">
  {% for evidence_form in evidence_formset %}
  {% with index=forloop.counter|stringformat:'s' %}
  {% with id='evidence-form-'|add:index|add:'-tab' href='#evidence-form-'|add:index aria_controls='evidence-form-'|add:index %}
  <li class="nav-item">
    {% if not current_tab and forloop.first or current_tab == index %}
    <a class="nav-link active" id="{{ id }}" data-toggle="pill" href="{{ href }}" role="tab" aria-controls="{{ aria_controls }}" aria-selected="true">{{ forloop.counter }}</a>
    {% else %}
    <a class="nav-link" id="{{ id }}" data-toggle="pill" href="{{ href }}" role="tab" aria-controls="{{ aria_controls }}" aria-selected="false">{{ forloop.counter }}</a>
    {% endif %}
  </li>
  {% endwith %}
  {% endwith %}
  {% endfor %}
</ul>

我想得到類似於以下的結果：

Previous 1 2 3 4 5 Next

也就是說，如果用戶單擊下一步，將加載以下 5 個葯丸：

Previous 6 7 8 9 10 Next

如果用戶點擊“ Previous我們將回到之前的 5 顆葯丸：

Previous 1 2 3 4 5 Next

實現這一結果的最佳方法是什么？ 是否有用於引導程序的預定義解決方案？

UPDATE with what I've tried (2021/07/07):

views.py

paginator = Paginator(SomeFormSet, 1)
try:
    forms = paginator.page(1)
except PageNotAnInteger:
    forms = paginator.page(1)
except EmptyPage:
    forms = paginator.page(paginator.num_pages)
context['forms'] = forms

index.html ：

  {% for form in forms %}
  {% if forms.has_other_pages %}
    <ul class="nav nav-pills" id="evidence-formset-tab" role="tablist">
      {% if forms.has_previous %}
        <li><a class="nav-link active" id="evidence-form-{{ forms.previous_page_number }}-tab" data-toggle="pill" href="#evidence-form-{{ forms.previous_page_number }}" role="tab" aria-controls="{{ aria_controls }}" aria-selected="true">&laquo;</a></li>
      {% else %}
        <li class="disabled"><span>&laquo;</span></li>
      {% endif %}
      {% for i in forms.paginator.page_range %}
      <li class="nav-item"> 
        {% if forms.number == i %}
          <a class="nav-link active" id="evidence-form-{{ i }}-tab" data-toggle="pill" href="#evidence-form-{{ i }}" role="tab" aria-controls="{{ aria_controls }}" aria-selected="true">{{ i }}</a>
        {% elif i > forms.number|add:'-5' and i < forms.number|add:'5' %}
          <a class="nav-link" id="evidence-form-{{ i }}-tab" data-toggle="pill" href="#evidence-form-{{ i }}" role="tab" aria-controls="{{ aria_controls }}" aria-selected="false">{{ i }}</a>
        {% endif %}
      </li>
      {% endfor %}
      {% if forms.has_next %}
        <li><a class="nav-link" id="evidence-form-{{ forms.next_page_number }}-tab" data-toggle="pill" href="#evidence-form-{{ forms.next_page_number }}">&raquo;</a></li>
      {% else %}
        <li class="disabled"><span>&raquo;</span></li>
      {% endif %}
    </ul>
  {% endif %}
  {% endfor %}

2021/07/08 更新：

每個頁面都對應一個標簽窗格，其 ID 遵循以下模式： evidence-form-正如您在我的上一個代碼中看到的那樣。 這就是為什么我根本不能使用?page={{ page }} （或者是的，但不知何故我必須將?page={{ page }}與特定的formset ，我不知道如何）。

Answer 1

編輯 08.07.2021 - 重新格式化和重新定義的答案：

由於我的原始答案與您的問題不符，因此這里有一些其他代碼：

姜戈視圖：

def testing_view(request):
    # 500 Items in Array (Your FormSet)
    objects = [('foobar_0', 0), ('foobar_1', 1), ('foobar_2', 2), ('foobar_3', 3), ('foobar_4', 4), ('foobar_5', 5),
               ('foobar_6', 6), ('foobar_7', 7), ('foobar_8', 8), ('foobar_9', 9), ('foobar_10', 10), ('foobar_11', 11),
               ('foobar_12', 12), ('foobar_13', 13), ('foobar_14', 14), ('foobar_15', 15), ('foobar_16', 16),
               ('foobar_17', 17), ('foobar_18', 18), ('foobar_19', 19), ('foobar_20', 20), ('foobar_21', 21),
               ('foobar_22', 22), ('foobar_23', 23), ('foobar_24', 24), ('foobar_25', 25), ('foobar_26', 26),
               ('foobar_27', 27), ('foobar_28', 28), ('foobar_29', 29), ('foobar_30', 30), ('foobar_31', 31),
               ('foobar_32', 32), ('foobar_33', 33), ('foobar_34', 34), ('foobar_35', 35), ('foobar_36', 36),
               ('foobar_37', 37), ('foobar_38', 38), ('foobar_39', 39), ('foobar_40', 40), ('foobar_41', 41),
               ('foobar_42', 42), ('foobar_43', 43), ('foobar_44', 44), ('foobar_45', 45), ('foobar_46', 46),
               ('foobar_47', 47), ('foobar_48', 48), ('foobar_49', 49), ('foobar_50', 50), ('foobar_51', 51),
               ('foobar_52', 52), ('foobar_53', 53), ('foobar_54', 54), ('foobar_55', 55), ('foobar_56', 56),
               ('foobar_57', 57), ('foobar_58', 58), ('foobar_59', 59), ('foobar_60', 60), ('foobar_61', 61),
               ('foobar_62', 62), ('foobar_63', 63), ('foobar_64', 64), ('foobar_65', 65), ('foobar_66', 66),
               ('foobar_67', 67), ('foobar_68', 68), ('foobar_69', 69), ('foobar_70', 70), ('foobar_71', 71),
               ('foobar_72', 72), ('foobar_73', 73), ('foobar_74', 74), ('foobar_75', 75), ('foobar_76', 76),
               ('foobar_77', 77), ('foobar_78', 78), ('foobar_79', 79), ('foobar_80', 80), ('foobar_81', 81),
               ('foobar_82', 82), ('foobar_83', 83), ('foobar_84', 84), ('foobar_85', 85), ('foobar_86', 86),
               ('foobar_87', 87), ('foobar_88', 88), ('foobar_89', 89), ('foobar_90', 90), ('foobar_91', 91),
               ('foobar_92', 92), ('foobar_93', 93), ('foobar_94', 94), ('foobar_95', 95), ('foobar_96', 96),
               ('foobar_97', 97), ('foobar_98', 98), ('foobar_99', 99), ('foobar_100', 100), ('foobar_101', 101),
               ('foobar_102', 102), ('foobar_103', 103), ('foobar_104', 104), ('foobar_105', 105), ('foobar_106', 106),
               ('foobar_107', 107), ('foobar_108', 108), ('foobar_109', 109), ('foobar_110', 110), ('foobar_111', 111),
               ('foobar_112', 112), ('foobar_113', 113), ('foobar_114', 114), ('foobar_115', 115), ('foobar_116', 116),
               ('foobar_117', 117), ('foobar_118', 118), ('foobar_119', 119), ('foobar_120', 120), ('foobar_121', 121),
               ('foobar_122', 122), ('foobar_123', 123), ('foobar_124', 124), ('foobar_125', 125), ('foobar_126', 126),
               ('foobar_127', 127), ('foobar_128', 128), ('foobar_129', 129), ('foobar_130', 130), ('foobar_131', 131),
               ('foobar_132', 132), ('foobar_133', 133), ('foobar_134', 134), ('foobar_135', 135), ('foobar_136', 136),
               ('foobar_137', 137), ('foobar_138', 138), ('foobar_139', 139), ('foobar_140', 140), ('foobar_141', 141),
               ('foobar_142', 142), ('foobar_143', 143), ('foobar_144', 144), ('foobar_145', 145), ('foobar_146', 146),
               ('foobar_147', 147), ('foobar_148', 148), ('foobar_149', 149), ('foobar_150', 150), ('foobar_151', 151),
               ('foobar_152', 152), ('foobar_153', 153), ('foobar_154', 154), ('foobar_155', 155), ('foobar_156', 156),
               ('foobar_157', 157), ('foobar_158', 158), ('foobar_159', 159), ('foobar_160', 160), ('foobar_161', 161),
               ('foobar_162', 162), ('foobar_163', 163), ('foobar_164', 164), ('foobar_165', 165), ('foobar_166', 166),
               ('foobar_167', 167), ('foobar_168', 168), ('foobar_169', 169), ('foobar_170', 170), ('foobar_171', 171),
               ('foobar_172', 172), ('foobar_173', 173), ('foobar_174', 174), ('foobar_175', 175), ('foobar_176', 176),
               ('foobar_177', 177), ('foobar_178', 178), ('foobar_179', 179), ('foobar_180', 180), ('foobar_181', 181),
               ('foobar_182', 182), ('foobar_183', 183), ('foobar_184', 184), ('foobar_185', 185), ('foobar_186', 186),
               ('foobar_187', 187), ('foobar_188', 188), ('foobar_189', 189), ('foobar_190', 190), ('foobar_191', 191),
               ('foobar_192', 192), ('foobar_193', 193), ('foobar_194', 194), ('foobar_195', 195), ('foobar_196', 196),
               ('foobar_197', 197), ('foobar_198', 198), ('foobar_199', 199), ('foobar_200', 200), ('foobar_201', 201),
               ('foobar_202', 202), ('foobar_203', 203), ('foobar_204', 204), ('foobar_205', 205), ('foobar_206', 206),
               ('foobar_207', 207), ('foobar_208', 208), ('foobar_209', 209), ('foobar_210', 210), ('foobar_211', 211),
               ('foobar_212', 212), ('foobar_213', 213), ('foobar_214', 214), ('foobar_215', 215), ('foobar_216', 216),
               ('foobar_217', 217), ('foobar_218', 218), ('foobar_219', 219), ('foobar_220', 220), ('foobar_221', 221),
               ('foobar_222', 222), ('foobar_223', 223), ('foobar_224', 224), ('foobar_225', 225), ('foobar_226', 226),
               ('foobar_227', 227), ('foobar_228', 228), ('foobar_229', 229), ('foobar_230', 230), ('foobar_231', 231),
               ('foobar_232', 232), ('foobar_233', 233), ('foobar_234', 234), ('foobar_235', 235), ('foobar_236', 236),
               ('foobar_237', 237), ('foobar_238', 238), ('foobar_239', 239), ('foobar_240', 240), ('foobar_241', 241),
               ('foobar_242', 242), ('foobar_243', 243), ('foobar_244', 244), ('foobar_245', 245), ('foobar_246', 246),
               ('foobar_247', 247), ('foobar_248', 248), ('foobar_249', 249), ('foobar_250', 250), ('foobar_251', 251),
               ('foobar_252', 252), ('foobar_253', 253), ('foobar_254', 254), ('foobar_255', 255), ('foobar_256', 256),
               ('foobar_257', 257), ('foobar_258', 258), ('foobar_259', 259), ('foobar_260', 260), ('foobar_261', 261),
               ('foobar_262', 262), ('foobar_263', 263), ('foobar_264', 264), ('foobar_265', 265), ('foobar_266', 266),
               ('foobar_267', 267), ('foobar_268', 268), ('foobar_269', 269), ('foobar_270', 270), ('foobar_271', 271),
               ('foobar_272', 272), ('foobar_273', 273), ('foobar_274', 274), ('foobar_275', 275), ('foobar_276', 276),
               ('foobar_277', 277), ('foobar_278', 278), ('foobar_279', 279), ('foobar_280', 280), ('foobar_281', 281),
               ('foobar_282', 282), ('foobar_283', 283), ('foobar_284', 284), ('foobar_285', 285), ('foobar_286', 286),
               ('foobar_287', 287), ('foobar_288', 288), ('foobar_289', 289), ('foobar_290', 290), ('foobar_291', 291),
               ('foobar_292', 292), ('foobar_293', 293), ('foobar_294', 294), ('foobar_295', 295), ('foobar_296', 296),
               ('foobar_297', 297), ('foobar_298', 298), ('foobar_299', 299), ('foobar_300', 300), ('foobar_301', 301),
               ('foobar_302', 302), ('foobar_303', 303), ('foobar_304', 304), ('foobar_305', 305), ('foobar_306', 306),
               ('foobar_307', 307), ('foobar_308', 308), ('foobar_309', 309), ('foobar_310', 310), ('foobar_311', 311),
               ('foobar_312', 312), ('foobar_313', 313), ('foobar_314', 314), ('foobar_315', 315), ('foobar_316', 316),
               ('foobar_317', 317), ('foobar_318', 318), ('foobar_319', 319), ('foobar_320', 320), ('foobar_321', 321),
               ('foobar_322', 322), ('foobar_323', 323), ('foobar_324', 324), ('foobar_325', 325), ('foobar_326', 326),
               ('foobar_327', 327), ('foobar_328', 328), ('foobar_329', 329), ('foobar_330', 330), ('foobar_331', 331),
               ('foobar_332', 332), ('foobar_333', 333), ('foobar_334', 334), ('foobar_335', 335), ('foobar_336', 336),
               ('foobar_337', 337), ('foobar_338', 338), ('foobar_339', 339), ('foobar_340', 340), ('foobar_341', 341),
               ('foobar_342', 342), ('foobar_343', 343), ('foobar_344', 344), ('foobar_345', 345), ('foobar_346', 346),
               ('foobar_347', 347), ('foobar_348', 348), ('foobar_349', 349), ('foobar_350', 350), ('foobar_351', 351),
               ('foobar_352', 352), ('foobar_353', 353), ('foobar_354', 354), ('foobar_355', 355), ('foobar_356', 356),
               ('foobar_357', 357), ('foobar_358', 358), ('foobar_359', 359), ('foobar_360', 360), ('foobar_361', 361),
               ('foobar_362', 362), ('foobar_363', 363), ('foobar_364', 364), ('foobar_365', 365), ('foobar_366', 366),
               ('foobar_367', 367), ('foobar_368', 368), ('foobar_369', 369), ('foobar_370', 370), ('foobar_371', 371),
               ('foobar_372', 372), ('foobar_373', 373), ('foobar_374', 374), ('foobar_375', 375), ('foobar_376', 376),
               ('foobar_377', 377), ('foobar_378', 378), ('foobar_379', 379), ('foobar_380', 380), ('foobar_381', 381),
               ('foobar_382', 382), ('foobar_383', 383), ('foobar_384', 384), ('foobar_385', 385), ('foobar_386', 386),
               ('foobar_387', 387), ('foobar_388', 388), ('foobar_389', 389), ('foobar_390', 390), ('foobar_391', 391),
               ('foobar_392', 392), ('foobar_393', 393), ('foobar_394', 394), ('foobar_395', 395), ('foobar_396', 396),
               ('foobar_397', 397), ('foobar_398', 398), ('foobar_399', 399), ('foobar_400', 400), ('foobar_401', 401),
               ('foobar_402', 402), ('foobar_403', 403), ('foobar_404', 404), ('foobar_405', 405), ('foobar_406', 406),
               ('foobar_407', 407), ('foobar_408', 408), ('foobar_409', 409), ('foobar_410', 410), ('foobar_411', 411),
               ('foobar_412', 412), ('foobar_413', 413), ('foobar_414', 414), ('foobar_415', 415), ('foobar_416', 416),
               ('foobar_417', 417), ('foobar_418', 418), ('foobar_419', 419), ('foobar_420', 420), ('foobar_421', 421),
               ('foobar_422', 422), ('foobar_423', 423), ('foobar_424', 424), ('foobar_425', 425), ('foobar_426', 426),
               ('foobar_427', 427), ('foobar_428', 428), ('foobar_429', 429), ('foobar_430', 430), ('foobar_431', 431),
               ('foobar_432', 432), ('foobar_433', 433), ('foobar_434', 434), ('foobar_435', 435), ('foobar_436', 436),
               ('foobar_437', 437), ('foobar_438', 438), ('foobar_439', 439), ('foobar_440', 440), ('foobar_441', 441),
               ('foobar_442', 442), ('foobar_443', 443), ('foobar_444', 444), ('foobar_445', 445), ('foobar_446', 446),
               ('foobar_447', 447), ('foobar_448', 448), ('foobar_449', 449), ('foobar_450', 450), ('foobar_451', 451),
               ('foobar_452', 452), ('foobar_453', 453), ('foobar_454', 454), ('foobar_455', 455), ('foobar_456', 456),
               ('foobar_457', 457), ('foobar_458', 458), ('foobar_459', 459), ('foobar_460', 460), ('foobar_461', 461),
               ('foobar_462', 462), ('foobar_463', 463), ('foobar_464', 464), ('foobar_465', 465), ('foobar_466', 466),
               ('foobar_467', 467), ('foobar_468', 468), ('foobar_469', 469), ('foobar_470', 470), ('foobar_471', 471),
               ('foobar_472', 472), ('foobar_473', 473), ('foobar_474', 474), ('foobar_475', 475), ('foobar_476', 476),
               ('foobar_477', 477), ('foobar_478', 478), ('foobar_479', 479), ('foobar_480', 480), ('foobar_481', 481),
               ('foobar_482', 482), ('foobar_483', 483), ('foobar_484', 484), ('foobar_485', 485), ('foobar_486', 486),
               ('foobar_487', 487), ('foobar_488', 488), ('foobar_489', 489), ('foobar_490', 490), ('foobar_491', 491),
               ('foobar_492', 492), ('foobar_493', 493), ('foobar_494', 494), ('foobar_495', 495), ('foobar_496', 496),
               ('foobar_497', 497), ('foobar_498', 498), ('foobar_499', 499)]
    return render(request, "testing.html", context={"total_elements": len(objects), "qs": objects})

選項卡面板的所有分頁都在 js/html 中完成

HTML

<div class="row">
        <div class="col-12">
            <div class="card-header">
                <ul class="nav nav-pills" id="evidence-formset-tab" role="tablist">
                </ul>
            </div>
            <div class="card">
                <div class="tab-content" id=evidence-formset-tabContent">
                    {% for q in qs %}
                        <div class="tab-pane {% if forloop.first %}active{% endif %}" id="tab-{{ q.1 }}"
                             role="tabpanel">{{ q.0 }}</div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

在這里，我們只生成一個帶有 id 的空導航列表，以及要顯示的所有帶有表單集內容的面板 div。

function generate_page_array(page_number, nav_pills_range) {
            let start = 0
            if ((page_number % nav_pills_range) == 0) {
                start = Math.floor((page_number - 1) / nav_pills_range) * nav_pills_range
            } else {
                start = Math.floor(page_number / nav_pills_range) * nav_pills_range
            }
            let end = nav_pills_range + start + 1
            let temp = []
            for (let i = start + 1; i < end; ++i) {
                temp.push(i)
            }
            return temp
        }

        function generate_pagination(page) {
            const max_entries = {{ total_elements|safe }};
            const menu = document.querySelector("#evidence-formset-tab")
            menu.innerHTML = ''
            const tmp_array = generate_page_array(page, 5);
            const prev = page > 5
            const next = page <= max_entries - 5
            if (prev) {
                menu.insertAdjacentHTML('beforeend', `
                 <li class="nav-item">
                        <a onclick="generate_pagination(${page - 5})" class="nav-link">Prev</a>
                    </li>`)
            }
            tmp_array.forEach((e)=>{
                menu.insertAdjacentHTML('beforeend', `
                 <li class="nav-item">
                        <a href="#tab-${e}" class="nav-link" data-toggle="tab">${e}</a>
                    </li>`)
            })

            if (next) {
                menu.insertAdjacentHTML('beforeend', `
                 <li class="nav-item">
                        <a onclick="generate_pagination(${page + 5})" class="nav-link">Next</a>
                    </li>`)
            }
            console.log(prev, tmp_array, next)

        }

        window.onload = function () {
            generate_pagination(1);
        }

根據您的描述生成導航葯丸的 javascript。

初始呼叫：

如果您單擊任何數字，看起來像這樣

點擊下一步后：

以后點擊任何導航葯丸后：

Answer 2

我認為您不需要使用大量 Javascript 來配置它。

你為什么不為當前頁面發送一個 URL GET 參數，然后計算你接下來需要發送的頁面數。

你可能可以做這樣的事情：

paginator = Paginator(SomeFormSet, 1)

try:
    page = int(request.GET.get('page', 1))
except:
    page = 1

try:
    forms = paginator.page(page)
except PageNotAnInteger:
    forms = paginator.page(1)
except EmptyPage:
    forms = paginator.page(paginator.num_pages)

current_page = forms.number - 1

max_pages = len(paginator.page_range)

number_of_pages_to_display = 5

start_page_new = current_page - number_of_pages_to_display if current_page >= number_of_pages_to_display else 0
end_page_new = current_page + number_of_pages_to_display if current_page <= max_pages - number_of_pages_to_display else max_pages

page_range = list(paginator.page_range)[start_page_new:end_page_new]

context['forms'] = forms

return render(request, 'example.html', {
        'forms': forms,
        'page_range': page_range,
    })

或者對於短路解決方案，您還可以使用一定范圍的當前 forloop.counter：

{% page_obj.has_previous %}
<a class="page-link" href="?page=1" aria-label="Previous">
{% endif %}

{% for n in page_obj.paginator.page_range %}
{% if page_obj.number == n %}

ACTIVE TAB HERE

{% elif n > page_obj.number|add:'-5' and n < page_obj.number|add:'5' %}

ONLY 5 ITEMS DISPLAYED

{% endif %}
{% endfor %}

{% if page_obj.has_next %}
page next link
{% endif %}

Answer 3

最后我找到了一個解決方案：

javascript部分：

function nextPages(){

  var maxPages = "{{evidence_formset|length}}";
  const container = document.querySelector("#evidence-formset-tab");
  const matches = container.querySelectorAll("li > a");
  var nextPagesArray = [];
  var htmlstring = "";
  var nextButton = "<button type='button' class='btn btn-link' onclick='nextPages()'>Next</button>";
  var prevButton = "<button type='button' class='btn btn-link' onclick='prevPages()'>Previous</button>";
  for (var i = 0; i < matches.length; i++) {
    nextPagesArray.push(parseInt(matches[i].textContent)+5);
  }

  for (let i = 0; i < nextPagesArray.length; i++) {
    if (nextPagesArray[i] <= maxPages) {
      htmlstring += "<li class='nav-item'><a class='nav-link' id='evidence-form-'"+nextPagesArray[i]+" data-toggle='pill' href='#evidence-form-"+nextPagesArray[i]+"' role='tab' aria-controls='evidence-form-"+nextPagesArray[i]+"' aria-selected='false'>"+nextPagesArray[i]+" </a></li>";
    }
  }



  if (htmlstring != "") {
    htmlstring = prevButton + htmlstring + nextButton;
    document.getElementById("evidence-formset-tab").innerHTML = htmlstring;
  }


}

function prevPages(){

var minPage = 1;
var maxPages = parseInt("{{evidence_formset|length}}");
const container = document.querySelector("#evidence-formset-tab");
const matches = container.querySelectorAll("li > a");
var prevPagesArray = [];
var pageSubSets = [];
var htmlstring = "";
var nextButton = "<button type='button' class='btn btn-link' onclick='nextPages()'>Next</button>";
var prevButton = "<button type='button' class='btn btn-link' onclick='prevPages()'>Previous</button>";
var arrayPages = [];

for (var i = minPage; i <= maxPages; i++) {
  arrayPages.push(i);
}

var i,j, chunk = 5;
for (i = 0,j = arrayPages.length; i < j; i += chunk) {
    pageSubSets.push(arrayPages.slice(i, i + chunk));
}


for (var k = 0; k < matches.length; k++) {
  if(pageSubSets[pageSubSets.length-1].includes(parseInt(matches[k].textContent))){
    prevPagesArray = pageSubSets[pageSubSets.length-2];
    break;
  }
  else {
    prevPagesArray.push(parseInt(matches[k].textContent)-5);
  }
}

html部分：

  <ul class="nav nav-pills" id="evidence-formset-tab" role="tablist">
    <button type="button" class="btn btn-link" onclick="prevPages()">Previous</button>
    {% for evidence_form in evidence_formset %}
    {% with index=forloop.counter|stringformat:'s' %}
    {% with id='evidence-form-'|add:index|add:'-tab' href='#evidence-form-'|add:index aria_controls='evidence-form-'|add:index %}
    {% if forloop.counter < 6 %}
    <li class="nav-item">
      {% if not current_tab and forloop.first or current_tab == index %}
      <a class="nav-link active" id="{{ id }}" data-toggle="pill" href="{{ href }}" role="tab" aria-controls="{{ aria_controls }}" aria-selected="true">{{ forloop.counter }}</a>
      {% else %}
      <a class="nav-link" id="{{ id }}" data-toggle="pill" href="{{ href }}" role="tab" aria-controls="{{ aria_controls }}" aria-selected="false">{{ forloop.counter }}</a>
      {% endif %}
    </li>
    {% endif %}
    {% endwith %}
    {% endwith %}
    {% endfor %}
    <button type="button" class="btn btn-link" onclick="nextPages()">Next</button>
  </ul>

最后的解決方案純粹是用javascript，沒有必要使用django的分頁模塊。

我相信它可以優化，但現在它可以工作，這才是最重要的。