ex:

On a screen, I'll have a column with a heading such as:

<th>The heading for<br/> this column is<br/> very, very long</th>

Works great to the screen, but using the print button, I get:

The heading for this column is very, very long

Is there a way to get the heading on the printout like it displays on the screen?

TIA,
Mike

Hi everybody,

I am using Editor but I have a question and I don't know if editor can do it.
Here is the probleme, I set my columns like this : (I only show you important things, if you need something else I can show you of course)

{ data: "ARTICLES_PRIX.AP_PRIX" },
{ data: null,
render: function ( data, type, row ) {
var prix = parseFloat(row.ARTICLES_PRIX.AP_PRIX);
var tva = parseFloat(row.ARTICLES_TVA.VALUE);
var prixTva = (prix*(1+tva)).toFixed(2);

return prixTva;
} 

},

So it work, I have one column with PRIX (price in french) and the second one with the price with the taxes (the calcul above)

What I want to do is when I modify the seconde column, it calculate the price and write it in the fist column
If I try it now I have the error : Uncaught Could not automatically determine field data. (logic, I set it to null)

I could be wonderfull if some could help me,
Thank you very much,
Sorry for bad english

Hi all,

FOA my apologies for not posting the code in live datatable but I didn't find a way to include an ajax file :-(.

My problem: I added a serach on column header in my datatable which works perfectly on "plain" data but obviously fails when searching on the object property I am rendering. I tried to apply the orthogonal principle, defining the filter rendering (which works on "general search) but it doesn't work on column filter.

Any advice would be welcomed :-).

Ajax sample:

          {  "id": 1,
            "country": "USA",
            "city": {
               "id": 1,
               "name": "new york"}
         },
         {  "id": 2,
            "country": "USA",
            "city": {
               "id": 2,
               "name": "los angeles"}
         }

HTML file:

<div id="table_wrapper" class="dataTables_wrapper">
    <table id="test" class="display nowrap cell-border compact table-striped table-hover" style="width:100%">
        <thead>
            <th>Id</th>
            <th>Country</th>
            <th>City</th>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>  

js file:

$(document).ready( function () {

        // Setup - add a text input to each footer cell
        $('#test thead tr').clone(true).appendTo( '#consignationsT thead' );
        $('#test thead tr:eq(1) th').each( function (i) {
            var title = $(this).text();
            $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
            $( 'input', this ).on( 'keyup change', function () {
                if ( table.column(i).search() !== this.value ) {
                    table
                        .column(i)
                        .search( this.value )
                        .draw();
                }
            } );
        } );

    var table = $('#test').DataTable({
        'dom': 'Bfrltip',
        'ajax': "data/data.txt",

                orderCellsTop: true,
                fixedHeader: true,
        'columns': [
            { data: 'id'},
            { data: 'country', title: 'Country'},
                    { data: 'city', 
                    title: 'City',
                            defaultContent: "",
                "render": {
                    _: function ( data, type) {
                            if(data == null){
                                return '';
                            } else {
                                return '<span title="' + data.id+ '">' + data.name + '</span>';
                            }
                                },
                            filter: function ( data, type) {
                                        if(data != null){
                                           return data.name;
                                        }
                            }
                   }
                      }     
        ],           
        'rowId': 'id',
        'select': true,
        'paging': true,
        'stateSave': true,
        'scrollY': "60vh",
        'scrollX': true,
        'scrollCollapse': true,
        'lengthMenu': [ 25, 50, 75, 100 ],
                  
        'columnDefs': [
            {
                'targets': 0,
                'visible': false,
            },
        ],  
    } );
});

So I am trying to use the latest RowGroup functionality but I keep getting "Cannot set property of 'RowGroup' undefined"

This is what I have, and everything BUT "rowGroup" works:

 var testTbl = $("#testTbl");

            var table = testTbl.DataTable({
                "data": data, //Set Data for table
                "columns": [
                    {
                        "className": 'details-control',
                        "orderable": false,
                        "data": null,
                        "defaultContent": ''
                    },
                    { "data": "test", "title": "derp" },
                    { "data": "id", "title": "derp2" },
                    {   "title": "test",
                        render: function (data, type, row) {
                            return '<button class="form-control" data-toggle="modal" data-target="#rowData_Modal" onclick="loadModalData(this);">'+row.test+ '</button>';
                        }
                    },
                ],
                rowGroup: {
                    dataSrc: 'derp'
                }
            });

Hi everyone,

I would like to have a dropdown with checkboxes to show/hide the columns.

I read the doc. I read lot of threads on this forum or on StakOverflow. However i didn't find the solution.

I made the button but it generates as many buttons as columns.

the current result:

To be more specific, I want something like that (in the red square) :

I already created the buttons print and column visibility and I can see all my columns as buttons but do you know how to create a dropdown with all the columns'name instead of these buttons?

To be very clear, I don't want to filter to find a row. I want to show or hide one, some or all the entire columns.

Hi,

I can the the following with dataTables

language: {
      paginate: {
        next: `<li class='list-inline-item'>
        <span class='u-pagination-v1__item u-pagination-v1-1 g-pa-12-21'' aria-label='#{text}'>
          <span aria-hidden='true'>
            <i class='fa fa-angle-right'></i>
          </span>
          <span class='sr-only'>Next</span>
        </span>
      </li>`,
        previous: `<li class='list-inline-item'>
        <span class='u-pagination-v1__item u-pagination-v1-1 g-pa-12-21'' aria-label='#{text}'>
          <span aria-hidden='true'>
            <i class='fa fa-angle-left'></i>
          </span>
          <span class='sr-only'>Previous</span>
        </span>
      </li>`
      }

And this will show the previous and next buttons in a certain way.

But there is no way I could change how the page number looks like - 1,2,3

How could I change it? I have this options

$.fn.DataTable.ext.classes.sPaging = 'pagination ' + $.fn.DataTable.ext.classes.sPaging;

But it is only for the classes

There is some inconsistency between previous,next,last,first that have an API for changing their look and the page number itself for which you have no control

Hi,

I'm trying to update from

I need help to update my function to work without async false

Actual code

stateLoadCallback: function(settings) {                    

        var table49 = "allquotes";
        var o;

        $.ajax( {
            "url": "ASEngine/ASAjax.php?action=load",
            "data":{ "user_id":"<?php echo $userId; ?>", "action" : "loadDataTable", "tablename" : table49},
            "async": false, // problem
            "type": "POST",
            "success": function (json) {
                            o = json;
            }
        });

            if(o){
                return JSON.parse(o);
            }else{

        }
    }

Newer method

            stateLoadCallback: function (settings, callback) {
                $.ajax( {
                    url: '/state_load',
                    async: false,
                    dataType: 'json',
                    success: function (json) {
                        callback( json );
                    }
                } );
            }

Hi,

I have an odd issue that i'm sure someone will know the answer to but i'm obviously doing something wrong.
My issue is that when i console.log rows.data() for my table it incorrectly shows the same data (the last row i added to the table) for each of the (currently 4) entries in my table, however on the screen in my page it shows the correct data in the table. This is causing issues with my table search as it is searching the same 4 rows that rows.data() is returning (at least i think that's what is happening) and not what is on screen.

Set up is as follows. Ajax call to a sharepoint list, in the .done function i have the following to intialise my table

        //initialise table
        var payrollTable = $('#dashboardPayrollDataTable').DataTable({
            destroy: true,
            responsive: true,
            autoWidth: false,
            dom: "<'row'<'col-md-12 mb-3'B>>" + "<'row'<'col-sm-6'l><'col-sm-6'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-5'i><'col-sm-7'p>>",
            lengthMenu: [
                [-1],
                ["All"]
            ],
            order: [5, 'asc'],
            rowCallback: function (row, data, displayNum, displayIndex, dataIndex) {
                if (data.Status === "Completed by Business Centre") {
                    sumHrsClaimed += parseFloat(data.ExtraHoursClaimed)
                    //console.log(sumHrsClaimed);
                }
            },

           initComplete: function () {

               //create a drop down for each table header to use with search
                var select = $('<label>Search by column:  <select class="d-inline-block w-auto form-control form-control-sm mr-2" id="payrollcolumnFilter"><option value="">-- All --</option></select></label>')
                    .insertBefore($("#dashboardPayrollDataTable_filter label"));

                 $('#dashboardPayrollDataTable_filter input[type=search]').on('keyup', function () {
                    
                    if ($("#payrollcolumnFilter").val() === "") {
                        payrollTable.search($(this).val(), true, true).draw()
                    } else {
                        payrollTable .columns($("#payrollcolumnFilter").val()).search(
                            $(this).val(), true, true).draw()
                    }
        
                    console.log(payrollTable .rows().data());
        
                    })
               
                  }
            });

After table initialisation i then perform a loop on each result from the ajax call

        //empty the table as to not get duplicate entries
        payrollTable.clear()

        $.each(data.d.results, function (index, item) {

            console.log(item);

            var hrsClaimed = "", rechargeType = "";
            var rowStructure = [
                item.PayrollNo,
                "name here",
                moment(item.ExtraDutyFrom).format("DD-MMM-YYYY"),
                hrsClaimed,
                rechargeType,
                "",
                "code here",
                "000",
                "000000"
            ]

            if (item.rechargePlain) {
                rowStructure[3] = item.extraHrsClaimedPlain;
                rowStructure[4] = item.rechargePlain;
                payrollTable.row.add(rowStructure);
            }

            if (item.rechargeTimeHalf) {
                rowStructure[3] = item.extraHrsClaimedTimeHalf;
                rowStructure[4] = item.rechargeTimeHalf;
                payrollTable.row.add(rowStructure);
            }

            if (item.rechargeDouble) {
                rowStructure[3] = item.extraHrsClaimedDouble;
                rowStructure[4] = item.rechargeDouble;
                payrollTable.row.add(rowStructure);
            }

            if (item.rechargeBH) {
                rowStructure[3] = item.extraHrsClaimedBH;
                rowStructure[4] = item.rechargeBH;
                payrollTable.row.add(rowStructure);
            }

        });
        //draw table
        payrollTable.draw();

        console.log(payrollTable.rows().data());

To explain what the above is doing, i am looping through result from the ajax query and then checking the values of some of the columns inside the sharepoint item. I then update two of the values in the 'rowStructure' array and then call payrollTable.row.add(rowStructure). After the loop has then completed i draw the table and log out the data in the table rows to the console.

As you can see from the first screen shot, each of the 4 rows have different values in the 'Hours' and 'Rate' columns as they should do, however the console.log of the table data (second image below) shows each row of the table having the same information (the last row i added to the table, in this example it is 'Bank Holiday').

This means when i try to search the table it is in essence only searching the last rows worth of data.

Hopefully there is enough info above for someone to have a go at telling me what i'm doing wrong.

Thanks in advance,

Ian.

We're referencing https://cdn.datatables.net/v/bs/jszip-3.1.3/pdfmake-0.1.27/dt-1.10.15/b-1.3.1/b-html5-1.3.1/b-print-1.3.1/r-2.1.1/datatables.min.js with sha hash of sha384-UN22PRBHhLN8WFNZMlQ/RPNNdCMYQeikR/j9xut6C9eAw9E2yXl/b1qB4tmeMcti. Could anyone elaborate why?

I know how to manage labels and placeholder text, but sometimes I need to add 1-2 lines of description overview above a field. I looked but did not find a field type dedicated for that purpose. Or is there a way to use 'text' field type to accomplish this?

I have question regarding best approach when using data from a php query and passing to datatables.

I have a <?php echo $dsSearch; ?> within a <script> tag... which returns a dataset to the js data variable.

the page source looks like...

all of this works. However, my question is what is the best approach to this scenario. I'll get to the point with big data this might become an issue.

there has to be a bettter, cleaner way. I wouldn't think that showing your data in js is correct either...

please help.

I am wanting to use jquery UI datepicker instead of DataTables because I just want the user to select the month/year. However, when I switch from 'datetime' to 'date' the incorrect date is displayed in the editor if there is an existing value.

I have seen posts like this: https://datatables.net/forums/discussion/47070/datatables-editor-plugin-datetime-format-issue

But I can't figure out how to fix my issue.

                    {
                        label: "Effective Date:"
                        , name: "FundOrgDeptGroup_Header.effectivedate"
                        , type: 'date'
                        , def: AsOfCookie
                        , opts: {
                            changeMonth: true,
                            changeYear: true,
                            showButtonPanel: true,
                            dateFormat: 'm/yy',
                            onClose: function (dateText, inst) {
                                $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
                            }
                        }
                    },

If I change dateFormat: 'm/d/yy' it displays the correct date. changing it to 'm/yy' shows 3/2026
in my controller (this is an MVC project) I have tried various getformatters as well, but nothing worked.

Hi

I am trying to get Editor to save selected data by user to 3 tables: GlobalSubsPacks, GlobalSubsPacksRelations, GlobalPacksDataParam

Here's my Model, how they relate and their respective fields:

GlobalSubsPacks:
ID

GlobalSubsPacksRelations (one GlobalSubsPacks to many GlobalSubsPacksRelations):
ID
SubPackType
ParamType
SubPackID stores GlobalSubsPacks.ID
ParamID stores GlobalPacksDataParam.ID

GlobalPacksDataParam (one GlobalPacksDataParam to one GlobalSubsPacks):
ID
MaximumUsageAllowed (decimal type)

GlobalSubsPacksRelations is a link table that holds a one to many relationship with other tables in my code elsewhere (GlobalSubsPacksRelations.ParamType != 1 if you like). However in the code below where GlobalSubsPacksRelations.ParamType = 1 the relationship is one to one with GlobalPacksDataParam. Can I avoid using an MJoin here since for GlobalPacksDataParam relation is 1-1. I tried using code #1 below but get error 'Unable to cast object of type 'System.Decimal' to type 'System.Collections.Generic.Dictionary`2[System.String,System.Object]'.' which is to be expected since an object is returned rather than a variable. However I get no data back from the server if I use code #2 below.

    HttpRequest formData = HttpContext.Current.Request;

    using (Database db = new Database(SetGetDbType2, SetGetDbConnection))
    {
        editor = new Editor(db, "GlobalSubsPacks", "GlobalSubsPacks.id").Model<SubsPacksDBModel.GlobalSubsPacks>("GlobalSubsPacks");
        editor.Field(new Field("GlobalSubsPacks.id")
            .Set(false)
        );

        Server code #1:
        editor.MJoin(new MJoin("GlobalPacksDataParam")
            .Model<SubsPacksDBModel.GlobalPacksDataParam>()
            .Name("GlobalPacksDataParam")
            .Link("GlobalSubsPacks.id", "GlobalSubsPacksRelations.SubPackID")
            .Link("GlobalPacksDataParam.id", "GlobalSubsPacksRelations.ParamID")
            .Where(q =>
                q.Where("GlobalSubsPacksRelations.ParamType", 1, "=")
            )
            .Order("GlobalPacksDataParam.id ASC")
            .Field(new Field("GlobalPacksDataParam.MaximumUsageAllowed")
                .GetFormatter((val, data) => CommonUtilities.IsNullOrEmpty(val) == true ? 0 : val)
                .Validator(Validation.Numeric())
                .SetFormatter((val, data) => CommonUtilities.IsNumeric(val) == false ? 0 : val)
            )
        );

        Server code #2:
        editor.Field(new Field("GlobalPacksDataParam.MaximumUsageAllowed")
            .GetFormatter((val, data) => CommonUtilities.IsNullOrEmpty(val) == true ? 0 : val)
            .Validator(Validation.Numeric())
            .SetFormatter((val, data) => CommonUtilities.IsNumeric(val) == false ? 0 : val)
        );
        editor.LeftJoin("GlobalSubsPacksRelations", "GlobalSubsPacksRelations.SubPackID", "=", "GlobalSubsPacks.id");
        editor.LeftJoin("GlobalPacksDataParam", "GlobalSubsPacksRelations.ParamID", "=", "GlobalPacksDataParam.id");            
   }

   editor.TryCatch(false);
   editor.Debug(true);
   editor.Process(formData);   

Any help would be welcome.

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

From one table (contract_info.php) I am getting the id of product_code and send it to next page (contract_bal.php)as follows:

          "columnDefs": [
                  
                       {
            "targets": 0,
            "data": "products.product_code",
            "render": function ( data, type, row, meta ) {
              return '<a href="../../examples/simple/contract_bal.php?id='+row.products.product_code+'">'+data+'</a>';     }

And I am receiving it on : contract_bal.php by using:

session_start();
    
    
    if (empty($_GET['id'])) {
    
   
    
    }
    
    else {
    
$id=$_GET['id'];
    
    $_SESSION['id'] = $id;
    
    }

Then this gets saved on server-side by : /contract_bal_fetch.php by using

      ->where(function ($q) {
            $q->where('contract_bal.product_code_fk2',$_SESSION['id']);
        })

The problem is when the session variable is not set , it shows me error undefined variable id. is it possible to haveIF condition inside -> where. By that if it is not set , it will display all records not just the ones that match row's product code

        if (sessionvariable is  set )
         ->where(function ($q) {
                    $q->where('contract_bal.product_code_fk2',$_SESSION['id']);
                })
        
        else{
         ->where(function ($q) {
                    $q->where('contract_bal.product_code_fk2','contract_bal.product_code_fk2');
                })
        
        }

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

I'm trying to get my Editor trial working, but when I click on any of my editable cells, I see this error thrown in my console. It's a private project so unfortunantly I don't have a public URL to share, but happy to provide any details I can.

Uncaught TypeError: dtE2P[F88] is undefined
K1h][l7P datatables.min.source.js:256
K1h][u3u datatables.min.source.js:256
g datatables.min.source.js:600
_editor datatables.min.source.js:601
_constructor datatables.min.source.js:594

I'm working on table with server-side enabled using laravel and datatables. My problem comes because data will come from a view with more than 300.000 records, and PHP runs out of memory. I would like to know how to setup datatables and communciation with server side, to retrieve only first page of data based on number of records per page, and how to requets again and pass needed params on pagination.

This is my JS code working like a charm iwth about 5000 records. on my firsts tests.

var table = $('#powersearch-table').DataTable({
           processing: true,
           serverSide: true,
           pageLength: 50,
           ajax: {
               url: "/powersearchajx",
               dataSrc: "data",
               type: "GET"
           },
           buttons: [
              'pageLength', 'csv', 'excel', 'pdf', 'print'
          ],
           columns: [
                  around 13 columns
           ],
       });

     $('#powersearch-table thead tr').clone(true).appendTo( '#powersearch-table thead' );
     $('#powersearch-table thead tr:eq(1) th').each( function (i) {
         var title = $(this).text();
         $(this).html( '<input type="text" placeholder="Search '+title+'" />' );

         $( 'input', this ).on( 'keyup change', function () {
             if ( table.column(i).search() !== this.value ) {
                 table
                     .column(i)
                     .search( this.value )
                     .draw();
             }
         } );
     } );

And this is my problematic server side code. Because returns all data, PHP runs out of memory.

return datatables(DB::table('myview'))->toJson();

Thanks in advance

My table will jump back to the top row when I click on an row to expand. How do I prevent this from happening.

var table = $('#timeLogTable_Vacation').DataTable( {
    rowCallback: function(row, data, index){  
            if(data['time_log_date_yyyymmdd'] <= date){
                $(row).find('td:eq(0)').css('color', 'red');
                $(row).find('td:eq(1)').css('color', 'red');
                $(row).find('td:eq(2)').css('color', 'red');
            }
    },
    displayLength:100,
    scrollY: '495px',
    scrollCollapse: true,
    paging: false,
    dom: 'Bfrtip',
    language: {  sSearch: 'Table Search: '},
    buttons: {
        buttons: [ 
                   { text: 'Create Vacation Day',
                     attr: { id: 'displayVacationDayModalButton'},
                     action: function ( e, dt, node, config ) {displayVacationDayModal() }
                  },
                  { text: 'Remove Vacation Entry',
                    className: 'btn-danger',
                    attr: { id: 'removeVacationDayModalButton'},
                    action: function ( e, dt, node, config ) {removeVacationDayModal() },
                    enabled: false
                   }
              ],
                dom: {
                      button: { className: 'btn btn-primary'},
                      buttonLiner: { tag: null }
                     }
    },
    processing: true,
    serverSide: true,
    ajax: {
        url: "ssp_TimeLogTable_Vacation.php",
        dataType: 'json',
        data: {employeeNumber: employeeNumber,
               employeeDepartmentCode: employeeDepartmentCode },
    },
         columns: [
                      { data: 'time_log_year', visible: false},
                          { data: 'employee_last_name', visible: false},
                          { data: 'employee_full_name', visible: false},
                          { data: 'employee_manager_number', visible: false},
                          { data: 'sort_date', visible: false},
                          { data: 'created_by', visible: false},
                          { data: 'created_on', visible: false},
                          { data: 'time_log_date_yyyymmdd', visible: false},
                          { data: 'out_of_office', orderable: false},
                          { data: 'time_log_date', orderable: false },
                      { data: 'total_hours', orderable: false}
                  ],
   select: {style: 'single'},  
   
   order: [[1, 'asc'],[2, 'asc'],[4, 'asc']],
   
   rowGroup: {
               dataSrc: [ 'time_log_year', 'employee_full_name'],
               startRender: function (rows, group, level) {
                   var all;

                   if (level === 0) {
                       top = group;
                       all = group;
                   } else {
                       // if parent collapsed, nothing to do
                       if (!!collapsedGroups[top]) {
                           return;
                       }
                       all = top + group;
                   }
                   
                   var collapsed = !!collapsedGroups[all];

                   rows.nodes().each(function (r) {
                       r.style.display = 'none';
                       if (collapsed) {
                         r.style.display = '';
                       }});

                  //fontawsome + and - 
                  var toggleClass = collapsed ? 'fa fa-minus-circle' : 'fa fa-plus-circle';
                  var groupTD = '';

                    if(level == 0){
                                  groupTD = '<td colspan="' + rows.columns()[0].length +'">' + group + '</td>'
                    }else{
                                  groupTD = '<td colspan="' + rows.columns()[0].length +'">' + '<span style="color:#007bff;" class="fa fa-fw ' + toggleClass + ' toggler"/> ' + group + ' (' + rows.count() + ')</td>'
                     }

                // Add category name to the <tr>
                return $('<tr/>')
                
                  .append(groupTD)
                  .attr('data-name', all)
                  .toggleClass('collapsed', collapsed);

               }
    },
 });//END .dataTable

  $('#timeLogTable_Vacation tbody').on('click', 'tr.dtrg-start', function() {
      var name = $(this).data('name');
      collapsedGroups[name] = !collapsedGroups[name];
      table.buttons(1).disable();
      table.draw(false);
  });
  
  table.on( 'select deselect', function (e, dt, type, indexes) {

     //reset button to disabled
      var selectedRows = table.rows( { selected: true } ).count();
      table.button( 1 ).disable( selectedRows > 0 );
    
      var data = table.rows(indexes).data();
      var timeLogDate = data[0]['time_log_date_yyyymmdd'];
      var createdBy = data[0]['created_by'];
      var employeeManagerNumber = data[0]['employee_manager_number'];

      var surrogateFound = surrogateManagers.includes(employeeManagerNumber);

     if( (createdBy.trim() == userProfile.trim() && timeLogDate <= date) || (surrogateFound == false ))
        {  
           return
          
        }else{
              var selectedRows = table.rows( { selected: true } ).count();
              table.button( 1 ).enable( selectedRows > 0 );
        }
 
  });
  
  $('#timeLogTable_Vacation').on( 'page.dt', function () {
      table.buttons(1).disable();
    });

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

I am trying to get the column values for all rows created in the datatable using the following excerpt of code, I have added the majority of client code further below. The system is also available to check on my website if required. I intend to use the data to pass to the Google charts engine.

    var data = table
    .rows()
    .data();
 
alert( 'The table has '+data.length+' records' );  


  // loop table rows
  table.rows({ search: "applied" }).every(function() {
    var data = this.data();
    var cell = table.cell(this.index(), 4).render('display');
console.log('cell value:'+cell);
console.log('data:'+data);
  } 

The first alert returns 0

I am not however getting any data being returned, but it is displaying in the datatable and JSON from the server.

Let me know if you require access, as the site is password protected.

run the script here

https://www.dividendlook.co.uk/holdings-by-shareh/

client file

https://www.dividendlook.co.uk/wp-admin/post.php?post=26220&action=edit

main part of client script

<tr>
<th>Symbol</th>
<th>Name</th>
<th>Quantity</th>
<th>Price</th>
<th>Value</th>
</tr>
    
</tfoot>
    
<tbody>     
<?php
global $wpdb;    
global $current_user;
get_currentuserinfo();
$user_id = $current_user->ID;
    
$rows = $wpdb->get_results("
SELECT 
        s.symbol AS symbol,
        s.name AS name, 
        SUM(ANY_VALUE(h.quantity)) AS quantity,
        s.price AS price,
        IF(s.currency='GBX',(SUM(ANY_VALUE(h.quantity)) * ANY_VALUE(s.price) / 100)
        ,(SUM(ANY_VALUE(h.quantity)) * ANY_VALUE(s.price))) AS value
        
        FROM
        dm_holdings h
        INNER JOIN dm_stocks s ON (s.id = h.stock_id) 
        INNER JOIN dm_portfolios p ON (p.id = h.portfolio_id)
        
        WHERE
        h.user_id >= IF(%CURRENT_USER_ID%=4,2,%CURRENT_USER_ID%)
        AND
        h.user_id <= IF(%CURRENT_USER_ID%=4,3,%CURRENT_USER_ID%)
        AND
        p.reporting_status = 'yes'
        GROUP BY
        s.symbol
");
        
foreach ($rows as $row ){
    echo "<tr>";
    echo "<td>$row->symbol</td>";
    echo "<td>$row->name</td>";
    echo "<td>$row->quantity</td>";
    echo "<td>$row->price</td>";
    echo "<td>$row->value</td>";
    echo "</tr>";
}
    
?>
</tbody>
</table>        
</html>

<input type='hidden' id='passuserid' value='<?php echo $current_user->ID; ?>'>
    
<script type="text/javascript">
(function($) {
 
$(document).ready(function() {
var table = $('#holdings-by-shareh').DataTable( { 
        orderCellsTop: true,
        fixedHeader: true,
    
    
        ordering: true,
        dom: "lBfrtip",
        "scrollY":      true,
        "scrollX":      true,
        ajax: {
        url:    "../../Editor-PHP-1.9.4/controllers/holdings_by_shareh.php",
        type: "post",
        data: function(d) {
            d.userid = $('#passuserid').val();
            }
        },
        columns: [
            { data: "dm_stocks.symbol" },
            { data: "dm_stocks.name" },
            { data: "dm_holdings.quantity" },
            { data: "dm_stocks.price" },
            { title: "Value", data: null,
                render: function ( data, type, row ) {
                    return (row.dm_stocks.currency == 'GBX')
                    ? (( Number(row.dm_stocks.price) * Number(row.dm_holdings.quantity) )  / 100 ).toFixed(2)
                    : ( Number(row.dm_stocks.price) * Number(row.dm_holdings.quantity) ).toFixed(2)
                }
            }
        ],
        columnDefs: [ // apply dt-nowrap to specific columns
          { className: "dt-nowrap", "targets": [ 1 ] }
    ]
} );            
    
    var data = table
    .rows()
    .data();
 
alert( 'The table has '+data.length+' records' );  


  // loop table rows
  table.rows({ search: "applied" }).every(function() {
    var data = this.data();
    var cell = table.cell(this.index(), 4).render('display');
console.log('cell value:'+cell);
console.log('data:'+data);
  } 
    
} );    
    
}(jQuery));</script>

Thanks for any help.

Colin

Hi,

I'm using DataTables 1.10.11 (I cannot upgrade for now)
I'm having an issue with Async true.

The bug was mentionned here
https://datatables.net/forums/discussion/49373#Comment_130295

I'm trying to fix the code manually based with the fixe provided here, but with no luck
https://github.com/DataTables/DataTablesSrc/commit/9c3e8eaa7935eaa5f46f05714ceb6bf2998328f8

The fix does not solved the problem as if I remove "async": false, from my code it won't load the Datatables values.

So is there another fix that I can applied manually, or maybe a better fix was posted?

stateLoadCallback: function(settings) {                     

    var table49 = "allquotes";
    var o;

    $.ajax( {
        "url": "ASEngine/ASAjax.php?action=load",
        "data":{ "user_id":"<?php echo $userId; ?>", "action" : "loadDataTable", "tablename" : table49},
        "async": false, // problem
        "type": "POST",
        "success": function (json) {
                        o = json;
        }
    });

        if(o){
            return JSON.parse(o);
        }else{

    }
}