Question

我正在与DataTables.net合作。效果很好。我想为标题添加colspan / rowspan，对于列数较少的表来说似乎工作得很好（尽管在调整大小时看起来并不那么好）。但是，当添加越来越多的列时，即使您看不到的列并没有真正改变，情况也开始看起来非常糟糕。

下图显示了问题。第一个表具有相同的起始列，但是第二个表添加了更多的起始列。即使屏幕上有相同的可见数据，看起来也完全不同。

表1

<div id="376557284" class="defaultContainerOther">
    <div class="defaultContainer defaultPanelOther collapsable" id="376557284">
        <div class="defaultPanel defaultCard">

            <script>                $(document).ready(function() {
                    $.fn.dataTable.moment( 'L' );


                    //  Table code
                    var table = $('#DT-hidsAXEi').DataTable(
                        {
    "dom":  "Bfrtip",
    "buttons":  [
                    {
                        "extend":  "copyHtml5"
                    },
                    {
                        "extend":  "excelHtml5"
                    },
                    {
                        "extend":  "csvHtml5"
                    },
                    {
                        "orientation":  "landscape",
                        "extend":  "pdfHtml5",
                        "pageSize":  "A3"
                    },
                    {
                        "extend":  "pageLength"
                    }
                ],
    "colReorder":  true,
    "paging":  true,
    "scrollCollapse":  false,
    "pagingType":  [
                       "full_numbers"
                   ],
    "lengthMenu":  [
                       [
                           15,
                           25,
                           50,
                           100,
                           -1
                       ],
                       [
                           15,
                           25,
                           50,
                           100,
                           "All"
                       ]
                   ],
    "ordering":  true,
    "order":  [

              ],
    "info":  true,
    "procesing":  true,
    "responsive":  {
                       "details":  true
                   },
    "select":  true,
    "searching":  true,
    "stateSave":  true,
    "columnDefs":  ""
}
                    );

                });</script>
<div class="defaultPanelOther">

<table id="DT-hidsAXEi" class="display compact"><thead><tr><th colspan="2">Process Information</th>
<th rowspan="2">PriorityClass</th>
<th rowspan="2">FileVersion</th>
<th rowspan="2">HandleCount</th>
<th rowspan="2">WorkingSet</th>
<th colspan="3">Memory</th>
<th rowspan="2">TotalProcessorTime</th>
</tr>
<tr><th>Name</th>
<th>Id</th>
<th>PagedMemorySize</th>
<th>PrivateMemorySize</th>
<th>VirtualMemorySize</th>
</tr>
</thead>

表2

<div id="656845919" class="defaultContainerOther">
    <div class="defaultContainer defaultPanelOther collapsable" id="656845919">
        <div class="defaultPanel defaultCard"><script>                $(document).ready(function() {
                    $.fn.dataTable.moment( 'L' );


                    //  Table code
                    var table = $('#DT-amWhaXDO').DataTable(
                        {
    "dom":  "Bfrtip",
    "buttons":  [
                    {
                        "extend":  "copyHtml5"
                    },
                    {
                        "extend":  "excelHtml5"
                    },
                    {
                        "extend":  "csvHtml5"
                    },
                    {
                        "orientation":  "landscape",
                        "extend":  "pdfHtml5",
                        "pageSize":  "A3"
                    },
                    {
                        "extend":  "pageLength"
                    }
                ],
    "colReorder":  true,
    "paging":  true,
    "scrollCollapse":  false,
    "pagingType":  [
                       "full_numbers"
                   ],
    "lengthMenu":  [
                       [
                           15,
                           25,
                           50,
                           100,
                           -1
                       ],
                       [
                           15,
                           25,
                           50,
                           100,
                           "All"
                       ]
                   ],
    "ordering":  true,
    "order":  [

              ],
    "info":  true,
    "procesing":  true,
    "responsive":  {
                       "details":  true
                   },
    "select":  true,
    "searching":  true,
    "stateSave":  true,
    "columnDefs":  ""
}
                    );

                });</script>
<div class="defaultPanelOther">

<table id="DT-amWhaXDO" class="display compact"><thead><tr><th colspan="2">Process Information</th>
<th rowspan="2">PriorityClass</th>
<th rowspan="2">FileVersion</th>
<th rowspan="2">HandleCount</th>
<th rowspan="2">WorkingSet</th>
<th colspan="3">Memory</th>
<th rowspan="2">TotalProcessorTime</th>
<th rowspan="2">SI</th>
<th rowspan="2">Handles</th>
<th rowspan="2">VM</th>
<th rowspan="2">WS</th>
<th rowspan="2">PM</th>
<th rowspan="2">NPM</th>
<th rowspan="2">Path</th>
<th rowspan="2">Company</th>
<th rowspan="2">CPU</th>
<th rowspan="2">ProductVersion</th>
<th rowspan="2">Description</th>
<th rowspan="2">Product</th>
<th rowspan="2">__NounName</th>
<th rowspan="2">BasePriority</th>
<th rowspan="2">ExitCode</th>
<th rowspan="2">HasExited</th>
<th rowspan="2">ExitTime</th>
<th rowspan="2">Handle</th>
<th rowspan="2">SafeHandle</th>
<th rowspan="2">MachineName</th>
<th rowspan="2">MainWindowHandle</th>
<th rowspan="2">MainWindowTitle</th>
<th rowspan="2">MainModule</th>
<th rowspan="2">MaxWorkingSet</th>
<th rowspan="2">MinWorkingSet</th>
<th rowspan="2">Modules</th>
<th rowspan="2">NonpagedSystemMemorySize</th>
<th rowspan="2">NonpagedSystemMemorySize64</th>
<th rowspan="2">PagedMemorySize64</th>
<th rowspan="2">PagedSystemMemorySize</th>
<th rowspan="2">PagedSystemMemorySize64</th>
<th rowspan="2">PeakPagedMemorySize</th>
<th rowspan="2">PeakPagedMemorySize64</th>
<th rowspan="2">PeakWorkingSet</th>
<th rowspan="2">PeakWorkingSet64</th>
<th rowspan="2">PeakVirtualMemorySize</th>
<th rowspan="2">PeakVirtualMemorySize64</th>
<th rowspan="2">PriorityBoostEnabled</th>
<th rowspan="2">PrivateMemorySize64</th>
<th rowspan="2">PrivilegedProcessorTime</th>
<th rowspan="2">ProcessName</th>
<th rowspan="2">ProcessorAffinity</th>
<th rowspan="2">Responding</th>
<th rowspan="2">SessionId</th>
<th rowspan="2">StartInfo</th>
<th rowspan="2">StartTime</th>
<th rowspan="2">SynchronizingObject</th>
<th rowspan="2">Threads</th>
<th rowspan="2">UserProcessorTime</th>
<th rowspan="2">VirtualMemorySize64</th>
<th rowspan="2">EnableRaisingEvents</th>
<th rowspan="2">StandardInput</th>
<th rowspan="2">StandardOutput</th>
<th rowspan="2">StandardError</th>
<th rowspan="2">WorkingSet64</th>
<th rowspan="2">Site</th>
<th rowspan="2">Container</th>
</tr>
<tr><th>Name</th>
<th>Id</th>
<th>PagedMemorySize</th>
<th>PrivateMemorySize</th>
<th>VirtualMemorySize</th>
</tr>
</thead>

显示问题的完整小提琴：https://jsfiddle.net/3z9hymn2/1/

带有rowpan / colspan的DataTables.net对于大型表无法正常工作

0 个答案: