Pug与Datatables分页及排序失效求助：11条数据仅显示单页

我一眼就看出你的Pug代码里的表格结构存在几个关键问题，这正是导致DataTables分页和排序功能失效的核心原因——DataTables对HTML表格的层级结构要求非常严格，必须遵循标准的<table>→<thead>（含单个<tr>）→<tbody>（所有数据行统一存放）的规范。

具体问题拆解： #

• 重复嵌套的<table>标签：你先写了一个无标识的table，接着又嵌套了table#cbs-table，这会生成无效的嵌套表格结构，导致DataTables无法正确识别目标表格。
• <thead>结构错误：你在each row in jobsHeader循环里每次都生成一个<tr>，这会让<thead>里出现多个表头行，而DataTables只认单个表头行，所有表头单元格(<th>)都应该放在这个行内。
• <tbody>位置错误：你把tbody放在了each row in slaJobs循环内部，这会让每一条数据都生成独立的<tbody>，但DataTables要求所有数据行必须放在**同一个<tbody>**中。

修正后的Pug代码： #

script(type='text/javascript', src='https://code.jquery.com/jquery-3.3.1.js')
script(type='text/javascript', src='https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js')
script.
  $(document).ready(function() {
    $('#cbs-table').DataTable({
      searching: false,
      paging: true,
      "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
      "order": [[ 1, "desc" ]],
      ordering: true
    });
  });

// 修正：仅保留一个目标表格标签
table#cbs-table
  thead
    tr  // 修正：单个表头行承载所有表头单元格
      each row in jobsHeader
        th.cbs-tab-header Edit
        th.cbs-tab-header !{row.jobname}
        th.cbs-tab-header !{row.job_type}
        th.cbs-tab-header !{row.autosys_instance}
        th.cbs-tab-header !{row.milestones}
        th.cbs-tab-header !{row.parent_milestones}
        th.cbs-tab-header !{row.group_names}
        th.cbs-tab-header !{row.region}
        th.cbs-tab-header !{row.sla}
        th.cbs-tab-header !{row.sla_amber}
        th.cbs-tab-header !{row.down_feedname}
        th.cbs-tab-header !{row.up_feedname}
        th.cbs-tab-header !{row.notes}
        th.cbs-tab-header Change History
  // 修正：tbody置于循环外，所有数据行统一存放
  tbody
    each row in slaJobs
      tr
        td.cbs-med
          form#cbs_edit(action='/cbs_job_edit' method='POST')
            input(type='image', src='./images/edit.png' height='20', width='20' alt='.')
            input#cbs_edit_all(type='hidden', name='edit_all', value=row.all)
        td.cbs-med !{row.jobname}
        td.cbs-med !{row.job_type}
        td.cbs-med !{row.autosys_instance}
        td.cbs-med !{row.milestones}
        td.cbs-med !{row.parent_milestones}
        td.cbs-med !{row.group_names}
        td.cbs-med !{row.region}
        td.cbs-med !{row.sla}
        td.cbs-med !{row.sla_amber}
        td.cbs-med !{row.down_feedname}
        td.cbs-med !{row.up_feedname}
        td.cbs-big !{row.notes}
        td.cbs-med
          form#test(action='/test' method='POST')
            input(type='image', src='./images/history.png' height='25', width='25' alt='.')
            input#cbs_history_job(type='hidden', name='job_history', value=row.jobname)
br

额外优化提示： #

• 避免给多个元素设置相同ID（比如原代码的#cbs-tab-header、#cbs-med），ID必须唯一，改用class（如.cbs-tab-header、.cbs-med）更符合规范。
• 确认jobsHeader的结构，保证表头单元格数量和数据行单元格数量完全一致，否则DataTables仍可能出现异常。

内容的提问来源于stack exchange，提问作者Praveen V