Feste Spalten in Datentabelle

Question

Ich verwende eine DataTable in meiner Webanwendung und ich versuche, die ersten 3 Spalten auf dem horizontalen Bildlauf zu beheben.

Nach dem Überprüfen der DataTable-Dokumentation wird empfohlen, das Attribut fixedColumns beim Initiieren der Datentabelle zu verwenden. Ich versuchte ihre Lösung, aber endete mit einer chaotischen und nicht gestylten Datentabelle, es scheint, dass die Datentabelle in 2 innere Tabellen umgewandelt wird, wo der feste Tisch nicht den gleichen Stil wie der bewegliche Tisch hat.

Unten ist, wie ich bin die Einleitung meiner Datentabelle:

table = $('#MailDataTable').DataTable({ 
      'bJQueryUI' :true, 
      "processing": true, 
      "serverSide": true, 
      "fixedColumns": true, 
      "ajax": { 
       "url": "GetCTSRecords?DBName="+"${DBName}"+"&TableName="+"${TableName}", 
       "type":"POST", 
       "data": function (d) { 
        return $.extend({}, d, { 
        "DBName"    : "${DBName}", 
        "TableName"    : "${TableName}", 
        "Where"     : Where, 
        "OrderBy"    : "${OrderBy}", 
        "JSONCTS"    : "true", 
        "Count"     : "no", 
        "FieldList"    : "min", 
        "totalDataTableRecords" : totalDataTableRecords, 
        "iconsToDisplay"  : "${iconsToDisplay}", 
        "additionalFilter"  : searchFields, 
        "additionalWhere"  : additionalWhere, 
        "DocCount"    : "${DocCount}", 
        "LinkType"    : "both", 
        "fromWhere"    :fromWhere 
        }); 
       } 
      }, 
      "scrollX": true, 
      //"bSort":true, 
      "scrollCollapse": true, 
      "iDisplayLength": 20, 
      "lengthMenu": [10,20, 25, 50, 75, 100], 
      "blength":true, 
      "pagingType": "input", 
      "language": { 
       "sSearch": " " + "${tr.Search}" + " ", 
       "zeroRecords": "${tr.NoMatchFound}", 
       "info": "_START_ "+"${tr.to}" + " _END_ " + "${tr.Items} " +"${tr.of}" +" _TOTAL_ ", 
       "infoFiltered": "${tr.of}" + " _TOTAL_ " + "${tr.Items}", 
       "sLengthMenu": " _MENU_ ", 
       "infoEmpty": "${tr.NoEntries}", 
       "sEmptyTable": "${tr.TableIsEmpty}", 
       "sProcessing": "<img src='apps/ctsc/images/Resources/Loading.gif' /><span class='GridLoadingMessage'>" + resources_Loading + " " + resources_PleaseWait + "</span>", 
       oPaginate: { 
        "sFirst": "", 
        "sLast": "", 
        "sNext": "", 
        "sPrevious": "" 
       } 
      }, 
      "bAutoWidth": false, 
      "initComplete":function(settings,json){ 
       $("#DataTable_wrapper .Header th > div > span").each(function(index){ 
        if($(this).parent().text()!="") 
         $(this).addClass("icon"); 
       }); 
      $('.paginate_page').text(resources_Page+" "); 
      $('.paginate_of').text($('.paginate_of').text().replace(/of/gi,resources_Of)); 

      addToolTips(); 
      totalDataTableRecords = json.totalDataTableRecords; 
      $("#dataTableHeader1").css("opacity","1"); 
      }, 
      columns: columnsCust, 
      columnDefs: columnDef 
      ,deferRender: true 
      , dom: '<"top">rt<"bottom">ilBp<"clear">' 
      ,buttons: [ 
        { 
         header: true, 
         text: "<img src='apps/ctsc/images/Resources/refresh.svg' style='width:16px;height:16px' title='"+ resources_Refresh+"'/>", 
         className: 'refreshbtn', 
         action: function(){ 
          if ($('#MailDataTable tbody tr').length > 0) 
          { 
           totalDataTableRecords = ""; 
           var table = $('#MailDataTable').DataTable(); 
           table.destroy(); 
          } 
          BuildDataTable(); 
         } 
        }, 
         { 
          extend: 'print', 
          header: true, 
          text: "<img src='apps/ctsc/images/Resources/Print.svg' style='width:16px;height:16px' title='"+resources_Print+"'/>" 
         }, 
         { 
          extend: 'excel', 
          header: true, 
          text:"<img src='apps/ctsc/images/Resources/Excel.svg' style='width:16px;height:16px' title='"+ resources_Excel+"'/>" 
         }, 
         { 
          extend: 'pdf', 
          header: true, 
          text: "<img src='apps/ctsc/images/Resources/PDF.svg' style='width:16px;height:16px' title='"+ resources_Pdf+"'/>", 
          orientation: 'landscape', 
          pageSize: 'LEGAL' 
         } 
        ], 


     }); 

Unten ist meine erste Datentabelle durch den neuen gefolgt nach fixedColumns Anwendung Attribut:

Vorher:

Nachher: ​​

Wie Sie sehen, verschwindet im zweiten Bild das horizontale Scrollen und das Styling der Datentabelle wurde beschädigt.

Jeder hat eine Idee, wie man Spalten in DataTable repariert. Bitte beachten Sie, dass ich nicht DataTable loswerden möchte, ich mag es und ich würde jede CSS-Lösung akzeptieren, wenn dieses Attribut nicht funktioniert.

Answer 1

Sie sehen aus dem Bild, das ich den richtigen 4 Spalten benötigen bis säumen.

Hier ist die abgekürzte Tabellendefinition ich für den Aufbau aller drei Tabellen:

 var commonDefs = { 
      autoWidth: false, 
      columnDefs: [{ 
       targets: [-1, -2, -3], 
       width: "100px", 
       type: "$money", 
       className: "dt-head-center dt-body-right", 
       render: function (data, type, full, meta) { return onColumnRender(data, type, full, meta); } 
      }, 
      { targets: [-4], type: "string", width: "75px", className: "dt-center" } 

      ] 
     }; 
     // show revision level table 
     if ($("#tblRevTotal").length > 0) { 
      $("#tblRevTotal").DataTable(commonDefs); 
     } 
     // append definital for the remaining tables. (all but revision summary) 
     commonDefs.columnDefs[commonDefs.columnDefs.length] = { targets: [0], width: "100px" }; 
     commonDefs.columnDefs[commonDefs.columnDefs.length] = { targets: [1], width: "325px" }; 

     // footer not used. 
     $(".TaskDataTable").each(function() { 
      $(this).find("tfoot").children().remove(); 
      $(this).DataTable(commonDefs); 
     }) 

und die html für jeden der Baum-Tabellen. Die DataTable-Basis-CSS hat eine Breite von 100% für die Tabelle, also setze ich das äußere Div auf die Breite, die ich für die größeren Tabellen haben möchte. Float rechts wird zu den inneren divs hinzugefügt.

 <div id="TPSRollUpContainer" style="width: 1050px;"> 

       <fieldset id="fsRevisionRollUp"> 
        <legend>Overview Total</legend> 
        <div style="float: right;"> 
         <table class="display" id="tblRevTotal"> 
          <thead> 
           <tr> 
            <th></th> 
            <th>Money One</th> 
            <th>Money Two</th> 
            <th>Total</th> 
           </tr> 

          </thead> 
          <tbody> 
          <tr> 
           <th class="dt-subheader">Funded</th> 
           <td>400000</td> 
           <td>400000</td> 
           <td>800000</td> 
          </tr> 
          <tr> 
           <th class="dt-subheader">Unfunded</th> 
           <td>0</td> 
           <td>0</td> 
           <td>0</td> 
          </tr> 
          <tr> 
           <th class="dt-subheader">Total</th> 
           <td>40000</td> 
           <td>400000</td> 
           <td>800000</td> 
          </tr> 
           </tbody> 
          <tfoot></tfoot> 
         </table> 
        </div> 
       </fieldset> 
      <div> 
       <fieldset> 
        <legend> 
         Task 1 
        </legend><div class="TableContainer" id="divTaskNo_1"> 
         <table class="TaskDataTable display" id="tblTaskNo_1"> 
          <thead> 
           <tr> 
            <th>Number</th><th>Title</th><th>Funded</th><th></th><th>Money Two</th><th>Total</th> 
           </tr> 
          </thead><tbody> 
           <tr class="dt-subheader"> 
            <td>Task 1</td><td>Title123456789</td><td>Yes</td><td>4000000</td><td>400000</td><td>80000</td> 
           </tr><tr class="dt-subheader"> 
            <td></td><td></td><td>No</td><td>0</td><td>0</td><td>0</td> 
           </tr><tr> 
            <td>Step 1.1</td><td>Title123456789</td><td>Yes</td><td>40000</td><td>400000</td><td>800000</td> 
           </tr> 
          </tbody><tfoot> 
          </tfoot> 
         </table> 
        </div> 
       </fieldset> 
      </div><div> 
       <fieldset> 
        <legend> 
         Task 2 
        </legend><div class="TableContainer" id="divTaskNo_2"> 
         <table class="TaskDataTable display" id="tblTaskNo_2"> 
          <thead> 
           <tr> 
            <th>Number</th><th>Title</th><th>Funded</th><th>Money One</th><th>Money Two</th><th>Total</th> 
           </tr> 
          </thead><tbody> 
           <tr class="dt-subheader"> 
            <td>Task 2</td><td>Task # 2</td><td>Yes</td><td>32.00</td><td>40.00</td><td>72.00</td> 
           </tr><tr class="dt-subheader"> 
            <td></td><td></td><td>No</td><td>0</td><td>0</td><td>0</td> 
           </tr><tr> 
            <td>Step 2.1</td><td>Step Number # 1</td><td>Yes</td><td>16.00</td><td>20.00</td><td>36.00</td> 
           </tr><tr> 
            <td>Step 2.3</td><td>Step Number # 1</td><td>Yes</td><td>0.00</td><td>0.00</td><td>0.00</td> 
           </tr><tr> 
            <td>Step 2.4</td><td>Step Number # 1</td><td>Yes</td><td>16.00</td><td>20.00</td><td>36.00</td> 
           </tr> 
          </tbody><tfoot> 

          </tfoot> 
         </table> 
        </div> 
       </fieldset> 
      </div> 
     </div>