如何修改 nav-pills 以限制显示的页数
Posted
技术标签:
【中文标题】如何修改 nav-pills 以限制显示的页数【英文标题】：How to modify nav-pills to limit the number of pages to display 【发布时间】：2021-09-12 04:12:09 【问题描述】：我正在尝试使用nav-pills 实现分页系统。由于这些nav-pills 是动态创建的，因此有时只有 1 个，而另一些则有 100 个（或更多）。
我正在使用bootstrap 4 & Django
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">«</a></li>
% else %
<li class="disabled"><span>«</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 ">»</a></li>
% else %
<li class="disabled"><span>»</span></li>
% endif %
</ul>
% endif %
% endfor %
2021 年 7 月 8 日更新：
每个页面对应一个标签窗格，其 id 遵循此模式：evidence-form-，正如您在我的上一个代码中看到的那样。这就是为什么我根本不能使用 ?page= page （或者是的，但不知何故我必须将 ?page= page 与特定的 formset 链接起来，我不知道如何使用）。
【问题讨论】：
您可能只想在 javascript 中执行此操作。看起来链接都是相同的，只是被索引了，所以你可以有一个相对简单的 javascript 函数和一些事件侦听器来增加上一个/下一个。这有意义/听起来可行吗？ 是的，这很有意义！是否有类似的实现来获得灵感？我已经想像这样的事情是必要的，但我也希望引导程序能够为这些情况预定义一些类。 是的，在引导程序上不确定.. 这是一个类似的好例子：codingnepalweb.com/pagination-ui-design-javascript 我去看看，谢谢。我还找到了一些插件，但我想避免安装插件并以最简约的方式进行：github.com/josecebe/twbs-pagination 【参考方案1】：终于找到了解决办法：
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的分页模块。
我确信它可以优化，但现在它可以工作，这才是最重要的。
【讨论】：
【参考方案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 %
【讨论】：
因为我首先不明白这是引导选项卡视图而不是真正的分页，他只是想将选项卡视为分页。与后端分页无关：我的第一个解决方案看起来像你的，但与他的问题不匹配【参考方案3】：编辑 08.07.2021 - 重新格式化和重新定义答案：
由于我的原始答案与您的问题不匹配，因此这里有一些其他代码：
Django 视图：
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。
初始调用：
如果你点击任何数字，看起来像这样
点击下一步后：
以后点击任何导航丸后：
【讨论】：
您能解释一下如何使用药丸使其适应提供的代码吗？我试过了，但不知怎么做不到。 改变了我的答案，因为我错过了理解你最初的问题。这将是一种为后端实现它的方法，而前端只呈现返回的页码。 刚刚用我迄今为止尝试过的内容更新了我的问题，以便您现在可以看到后端。我尝试了分页模块，但不知何故，当我单击 >> （相当于我原始问题中的 Next）时，以下 5 个页面没有加载。请你帮助我好吗？我会确定你的答案是有效的。 我会看看它并更新我的答案。让我们看看我能不能让它工作:) 添加了一个带有引导程序和 Django 分页的工作示例。其余的由您决定：) 即使您可能将我的答案标记为有效，我也不会为您实现整个代码。这只是一个概念证明，你可以如何实现它。你将不得不改进它。希望对您有所帮助，最好的问候以上是关于如何修改 nav-pills 以限制显示的页数的主要内容，如果未能解决你的问题，请参考以下文章