js datatable нижний колонтитул смещен - PullRequest
0 голосов
/ 13 декабря 2018

Я использую таблицу данных JS с Bootstrap, и иногда вертикальные линии верхнего и нижнего колонтитула не совпадают с телом:

enter image description here

Похоже, это происходит только при использовании scrollY.Таблица HTML выглядит следующим образом:

<div class="table-responsive">
    <table id = "fieldListTable" class="table table-bordered table-hover table-striped" style="width: 100%">
        <thead>
           <tr>
               <th>Assessment ID</th>
               <th>Rating District</th>
               <th>Parish</th>
               <th>Electoral Division</th>
               <th>Land Grade</th>
               <th>Catchment ID</th>
               <th>Plan No.</th>
               <th>Parcel No.</th>
               <th>Part Field ID</th>
               <th>Rated Area (in hectares)</th>
               <th>Rated Area (in acres)</th>
               <th>Total Annual Value (£)</th>
           </tr>
        </thead>

        <tfoot>
            <tr>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th class = "text-right"><label>Total:</label></th>
               <th class = "text-right"><label class = "fieldTotalHectares"></label></th>
               <th class = "text-right"><label class = "fieldTotalAcres"></label></th>
               <th class = "text-right"><label class = "fieldTotalAv"></label></th>                    
           </tr>
        </tfoot>
        <tbody>
        </tbody>
    </table>
</div>

, и это JS, который инициализирует таблицу:

me.fieldListTable().DataTable({
    bDestroy: true,
    searching: false,
    paging: false,
    scrollCollapse: true,
    scrollY: "450px",
    order: [
      //order by:
      [0, "asc"], //Assessment ID
      [6, "asc"], //then Plan No.
      [7, "asc"], //then Parcel No.
      [8, "asc"] //then Part Field ID
    ],
    lengthMenu: [[-1, 10, 25, 50, 100], ["All", 10, 25, 50, 100]],
    data: data.fields,
    createdRow: function(row, data /*, index*/) {
      row.id = "fieldListTableRow-" + data.land_id;
    },
    columnDefs: [
      { targets: [9, 10, 11], className: "text-right" },
      { targets: [7, 8], className: "text-left" },
      { targets: [4, 5], visible: false },
      { targets: [0, 4, 5, 6], type: "string-number" }
    ],
    columns: [
      { data: "assessment_id" },
      { data: "rating_district_id" },
      { data: "parish_id" },
      { data: "electoral_division_id" },
      { data: "land_grade" },
      { data: "catchment_id" },
      { data: "plan_no" },
      { data: "field_no" },
      { data: "part_field_id" },
      { data: "hectares" },
      { data: "acres" },
      { data: "av_gbp" }
    ]
  });

Я тщательно искал ответ, но, похоже, ничего не подходитпроблема у меня есть.Эти две проблемы кажутся самыми близкими:

Смещение заголовков dataTable

Смещение столбца с использованием DataTable fixedColumns

, но на самом деле это нета же проблема.

...