How to compare datetime column cell by cell which one is latest date and perform some math - Page 2

How to compare datetime column cell by cell which one is latest date and perform some math

2»

Replies

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736

    when I go to the page in starting it displays all button and complex header first in some weird manner and than actual table appears.

    Looks like your page initially displays some that gets hidden. I put a breakpoint before the Editor initializes and you can see what is loaded:

    That is a process that happens before Editor and Datatables are initialized. Not sue what it is but maybe you can hide the element with display: none.

    Kevin

  • Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0

    @kthorngren sorry I didn't get it.. which element to hide? where to define display: none. ?

  • Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0

    I used customForm to display editor .. using template as below document.

    https://editor.datatables.net/examples/simple/template.html

    So I think before table loads it display this customform

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736

    I see. You could be creating the custom Editor form early in the code so its displayed while your dependancies (.js and .css files) are being loaded. Place that code last in the -body section. This way the time between the form being created and the Editor being initialized as short.

    Kevin

  • Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0
    edited January 2022

    @kthorngren I dont have body.. I tried placing after </table>... also tried after</thead> but still same issue. Here is original code where I define customForm.

    <header class='container-fluid page-header text-center'>
      <h1 class='page-title'>Elevators</h1>
    </header>
    
    <div class="container-fluid ms-7 w-auto">
      <div class="card">
        <div class="card-body">
          <div id='phaseTable' class='content'>
    
              <div id="customForm">
                    <fieldset class="asset">
                        <legend>Asset</legend>
                        <div data-editor-template="Location"></div>
                        <div data-editor-template="DrawingID"></div>
                    </fieldset>
    
                    <fieldset class="level">
                        <legend>Levels</legend>
                        <div data-editor-template="Higher"></div>
                        <div data-editor-template="Lower"></div>
                    </fieldset>
    
                    <fieldset class="MD">
                        <legend>Mechanical/Side COP Mechanical Drawings</legend>
                        <div data-editor-template="MSDPlanned"></div>
                        <div data-editor-template="MSDForecast"></div>
                        <div data-editor-template="MSDActual"></div>
                    </fieldset>
    
                    <fieldset class="OC">
                        <legend>Original cab & Side COP Cab</legend>
                        <div data-editor-template="OCCPlanned"></div>
                        <div data-editor-template="OCCForecast"></div>
                        <div data-editor-template="OCCActual"></div>
                    </fieldset>
    
            </div>
    
            <table id='assyntCx_Table' class='stripe row-border order-column' style="width:100%">
              <thead>
    
                <tr class=''>
                            <th class='text-center', rowspan="2">Location</th>
                            <th class='text-center', rowspan="2">Drawing ID</th>
                            <th class='text-center', rowspan="2">Status </th>
    
    
                            <th class='text-center', colspan="2">Levels</th>
                            <th class='text-center', colspan="3">Mechanical/Side COP Mechanical Drawings</th>
                            <th class='text-center', colspan="3">Original cab & Side COP Cab</th>
    
    
                </tr>
    
            <tr class=''>
    
                            <th class='text-center'>Higher</th>
                            <th class='text-center'>Lower</th>
                            <th class='text-center'>Planned</th>
                            <th class='text-center'>Forecast</th>
                            <th class='text-center'>Actual</th>
                            <th class='text-center'>Planned</th>
                            <th class='text-center'>Forecast</th>
                            <th class='text-center'>Actual</th>
    
    
    
    
    
                  </tr>
                </thead>
            </table>
          </div>
        </div>
      </div>
    </div>
    
    <script type="text/javascript" language="javascript" class="init">
    
    
    var editor;
    
    
    $(document).ready(function() {
    
    
    
    
      var editor = new $.fn.dataTable.Editor( {
        ajax: "../ajax/at/elevators.php",
        table: "#assyntCx_Table",
        template: '#customForm',
        fields: [ 
    
  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736

    I dont have body..

    You do on lines 121-146 but most of your HTML is not in the body.

    There is some delay on the page causing the display of the form. You can debug your page if you wish. Maybe an easier option is to use display: none on the form, for example:

    <div id="customForm" style="display: none">
    

    Kevin

  • Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0

    @kthorngren that body tag is from different file which I added in the ele1.php page using require(filepath).

    I also tried adding display: none but still same result. No change.

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    @Shivani Vyas I see you're using Editor in your example, but our accounts aren't showing that you have a license. Is the license registered to another email address? Please can let us know so we can update our records and provide support.

    Thanks,

    Colin

  • Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0

    Hi @colin I sent you a message please check.

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    Hi @Shivani Vyas , thanks for letting us know, I've updated our records.

    Colin

  • Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0

    Hi @colin Thank you so much. Also if I add "display: none" the editor displays nothing.. and I dont even have more than one editor .. I found some similar issue in which they used multiple editor on same page. But its not same in my case.

    Here is the page that has issue..

    https://test.assettrack.cx/elevators/ele1.php

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736

    You have this custom form. Try adding a div to wrap the customForm div and use display: none, like this:

        <div id='phaseTable' class='content'>
          <div style="display: none;">
            <div id="customForm">
    
                    <fieldset class="asset">
                        <legend>Asset</legend>
                        <div data-editor-template="Location"></div>
                        <div data-editor-template="DrawingID"></div>
                    </fieldset>
    
    ......
    
                    <fieldset class="Sat">
                        <legend>SAT</legend>
                        <div data-editor-template="SATPlanned"></div>
                        <div data-editor-template="SATForecast"></div>
                        <div data-editor-template="SATActual"></div>
                    </fieldset>
         
            </div>  // customForm
       </dov>   // display: none;
      <table>...</table>
    </div>   // phaseTable
    
    

    Kevin

  • Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0

    @kthorngren Thank you Kevin. Now editor is gone.. but still it shows all headers first for few seconds.. is it normal ? I checked other pages on website and few of them have same result... first it display all headers /column names and load table after that. and few pages load directly table.

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736

    Are you talking about the "Asset", "Levels", etc shown in the screenshot I posted above?

    If so that is for the custom form for the Editor. You can remove the div that has this if you don't need it.

    Kevin

  • Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0

    @kthorngren No I am taking about table columns.. <tr><th>...</th></tr>

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736
    edited February 2022

    but still it shows all headers first for few seconds..

    Do you want the table to be hidden? Not sure I understand the issue. You can hide the =tag tablethen show it later in-option initComplete` if you don't want it displayed until the table loads.

    Kevin

  • Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0

    @kthorngren all issues resolved. Thank you so much Kevin and Colin for your help. I learned so many new things about Datatables with your help ad support.

Sign In or Register to comment.