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

kthorngren

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 Vyas

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

Shivani Vyas

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

kthorngren

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 Vyas

@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: [ 

kthorngren

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 Vyas

@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.

colin

@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 Vyas

Hi @colin I sent you a message please check.

colin

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

Colin

Shivani Vyas

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

kthorngren

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 Vyas

@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.

kthorngren

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 Vyas

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

kthorngren

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 Vyas

@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.