Vicki
Vicki

Reputation: 1456

jQuery Datatables/CF variable issue

I am using jQuery DataTables and Coldfusion along with SQL for the database. I am trying to figure out a way to have my status field show PROCESSING if there is no date for Date_Complete and COMPLETED if there is a date in Date_Complete. I am doing this on the HTML CF Side with an IF Statement.

But since it is posting COMPLETED or PROCESSING in that column when I try to call it in JS for the date it is not providing the date but providing that terminology now.

On the picture below you will see Date Complete: COMPLETED where it should now show the date.

Any help with this would be greatly appreciated.

enter image description here

Database Table enter image description here

HTML

<table id="processing" class="table table-hover">
    <thead>
        <th></th>
        <th><b>ITEM ID</b></th>
        <th style="display:none;"><b>DEALER ID</b></th>
        <th style="display:none;"><b>DATE RECEIVED</b></th>
        <th style="display:none;"><b>OP ID</b></th>
        <th><b>DUE DATE</b></th>
        <th><b>STATUS</b></th>
        <th style="display:none;"><b>LATE</b></th>
        <th style="display:none;"><b>CLOSED BY</b></th>
        <th style="display:none;"><b>RMKS</b></th>
        <th style="display:none;"><b>PROCESSING LOCATION</b></th>
        <th><b>QTY</b></th>

    </thead>
    <tbody>
   <cfoutput query="processTable">                     
    <tr>
        <td class="details-control"></td>
        <td class="LAlign">#id#</td>
        <td style="display:none;">#processTable.name#</td>
        <td style="display:none;">#dateFormat(processTable.Date_Received, 'mm/dd/yyyy')#</td>
        <td style="display:none;">#op_id#</td>
        <td>#dateFormat(processTable.Date_Due, 'mm/dd/yyyy')#</td>
        <cfif #Date_Complete# EQ "">
        <td>PROCESSING</td>
        <cfelse>
        <td>COMPLETED</td>
        </cfif>
        <td style="display:none;">#Completed_Late#</td>
        <td style="display:none;">#Closed_by#</td>
        <td style="display:none;">#Rmks#</td>
        <td style="display:none;">#Processing_Location#</td>
        <td class="CAlign">#Item_Count#</td>
    </tr>                           
   </cfoutput>
   </tbody>
</table>

JS

function format ( d ) {

    return 'Item ID: '+d.id+'<br>'+
           'Dealer: '+d.dealerID+'<br>'+
           'Date Received: '+d.Date_Received+'<br>'+
           'Checked In: '+d.op_id+'<br>'+
           'Date Due: '+d.Date_Due+'<br>'+
           'Date Complete: '+d.Date_Complete+'<br>'+
           'Completed Late: '+d.Completed_Late+'<br>'+
           'Completed By: '+d.Closed_by+'<br>'+
           'Remarks: '+d.Rmks+'<br>'+
           'Location: '+d.Processing_Location+'<br>'+
           'Item Count: '+d.Item_Count+'<br>';
    }
// Setup the page once it has loaded.
$(document).ready(function() {

    var oTable = $('#processing').DataTable( {
        "columns": [ 
            {
                "class":          "details-control",
                "orderable":      false,
                "data":           null,
                "defaultContent": ""
            },
            { "data": "id" },
            { "data": "dealerID" },
            { "data": "Date_Received" },
            { "data": "op_id" },
            { "data": "Date_Due" },
            { "data": "Date_Complete" },
            { "data": "Completed_Late" },
            { "data": "Closed_by" },
            { "data": "Rmks" },
            { "data": "Processing_Location" },
            { "data": "Item_Count" }
        ],
        "order": [[1, 'asc']],
        "columnDefs": [
            { "targets": [0,2,3,4,5,6,7,8,9,10,11], "searchable": false }
        ],
        "sDom": '<"row view-filter"<"col-sm-12"<"pull-left"l><"pull-right"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"text-center"ip>>>',
        select: {
            style: 'single'
        },
        scrollY:        250,
        deferRender:    true,
        scroller:       true,
        /*"aLengthMenu": [[25, 50, 75, -1], [25, 50, 75, "All"]],
        "iDisplayLength": 25,*/
        "oLanguage": {
            "sLengthMenu": "_MENU_ <label for='processing_length'><strong>records per page</strong></label>",
            "oPaginate": {
                "sPrevious": "«",
                "sNext": "»",
            }
        }
    });

CFC

<cffunction name="displayTable" access="public" returntype="query">
    <cfset var processTable = ''>
    <cfquery name="processTable">
        SELECT *
        FROM dbo.Dealer_Track_Work, dbo.Dealer_Track_Dealers
        WHERE dbo.Dealer_Track_Work.dealerID = dbo.Dealer_Track_Dealers.id      
    </cfquery>
    <cfreturn processTable>
</cffunction>

Upvotes: 2

Views: 123

Answers (2)

Miguel-F
Miguel-F

Reputation: 13548

Too long for a comment

Maybe I am not following you?? It looks like the "COMPLETED" text is coming from your HTML output code. Specifically here:

<cfoutput query="processTable">                     
 <tr>
     <td class="details-control"></td>
     <td class="LAlign">#id#</td>
     <td style="display:none;">#processTable.name#</td>
     <td style="display:none;">#dateFormat(processTable.Date_Received, 'mm/dd/yyyy')#</td>
     <td style="display:none;">#op_id#</td>
     <td>#dateFormat(processTable.Date_Due, 'mm/dd/yyyy')#</td>
     <cfif #Date_Complete# EQ "">
     <td>PROCESSING</td>
     <cfelse>
     <td>COMPLETED</td>
     </cfif>
     <td style="display:none;">#Completed_Late#</td>
     <td style="display:none;">#Closed_by#</td>
     <td style="display:none;">#Rmks#</td>
     <td style="display:none;">#Processing_Location#</td>
     <td class="CAlign">#Item_Count#</td>
 </tr>                           
</cfoutput>

So you should be able to change the logic accordingly to display the actual date. (Note you do not need the hash tags within the cfif statement).

     <cfif Date_Complete EQ "">
         <td>PROCESSING</td>
     <cfelse>
         <td>#DateFormat(Date_Complete,"mm/dd/yyyy")#</td>
     </cfif>

Or something like that depending on the formatting required.

Upvotes: 2

Gyrocode.com
Gyrocode.com

Reputation: 58880

  • Replace this HTML code:

    <cfif #Date_Complete# EQ "">
    <td>PROCESSING</td>
    <cfelse>
    <td>COMPLETED</td>
    </cfif>
    

    with

    <td>#DateFormat(Date_Complete,"mm/dd/yyyy")#</td>
    
  • Replace this JavaScript code

    { "data": "Date_Complete" },
    

    with

    { 
        "data": "Date_Complete",
        "render": function(data, type, full, meta){
           return ((data) ? "COMPLETED" : "PROCESSING");
        }
    },
    

Upvotes: 2

Related Questions