Dataset is result of a query like this:

select metric,
listagg(case when site_name = 'X' then TS end) X,
listagg(case when site_name = 'Y' then TS end) Y
from whatever;

With dataset looking like:

metric    X    Y
blah      1    4

And later it might have an added column:

select metric,
listagg(case when site_name = 'X' then TS end) X,
listagg(case when site_name = 'Y' then TS end) Y,
listagg(case when site_name = 'Z' then TS end) Z
from whatever;

resulting in:

metric    X    Y    Z
blah      1    4    2

I know I can change column header if I know what it is, like:

$(document).ready(function () {
    vat table = $('#example').DataTable()'

    $('#example thead th:eq(0)').html('new column header');
}

Example:

Another option is to not have the box be a set height? I only have two options and its pushing an entire row down... lots of white UI space. I got 10 filters, 5 on each row. Pushes a lot of content down.

Description of problem: We've created an form very similar to https://datatables.net/examples/api/form.html

We've got several calculated columns being show in another column based on the the inputs give. We've created an onblur that does some calculations and populates via:

table.cell(rowIndex, 4).data(newValue);
table.draw(false);

The issue we're having is that every time we tab from ANY of the fields, the tab goes back and highlights the first form field in the first row. We essentially can't tab off of it.

Let me say that we've commented out the table.cell().data() and we can. I even left the table.draw() in there to make sure the draw wasn't resetting the focus. Anytime we use table.cell().data() it sticks the focus on the first field. I couldn't find anything in the documentation about updating the cell causing focus issues or draws.. so I'm stumped.

I have the following use case:
Send all data of the selected data table row to the server using buttons.exportData() in original column sequence.
https://datatables.net/reference/api/buttons.exportData()

colReorder.reset() restores the original column sequence easily, BUT: I don't want this to be done on the original data table that the user is seeing on the screen but on a copy of the data table, so that the user experience isn't being influenced.

I tried copying the DT using $.extend(true, {} ... also $.extend(true, [] ... etc.

Here are some examples

var copiedDT = $.extend(true, [], originalDT);
or
var copiedDT = $.extend(true, {}, originalDT);
or
var copiedDT = $.extend(true, [], originalDT.columns().data().toArray());
or
var copiedDT = originalDT.slice();
Then I did:
copiedDT.colReorder.reset();

In all cases the result was that BOTH data tables were reset. I couldn't dissolve the connection between the two dts.

Is there any way to do this? I use $.extend a lot and it has been working fine, e.g. with options objects, custom buttons and the like.

Something like below where I get the data using various web service calls that return JSON data:

function renderTable(url, params) {
    $.ajax({
        ....
        url: url,
        data: params
    }).done(function(result) {
        ....
        jResult = JSON.parse(result.d);

        if (jResult.length > 0) {
            // Dynamically extract column names from the data
            var columnNames = Object.keys(jResult[0]);

            // Define columns for DataTable
            var columns = columnNames.map(function (columnName) {
                return {
                    data: columnName,
                    title: columnName // Use the column name as the title
                 };
            });
            if (isDataTable()) { // checks if #centMonDataTable is a defined datatable
                $('#centMonDataTable').DataTable().destroy();
                $('#centMonDataTable').empty();
            }
            // Initialize DataTable
            tblCentMonData = $("#centMonDataTable").DataTable({
                jQueryUI: true,
                data: jResult,
                columns: columns
            });
        }

My question is how do I apply custom rendering columns based on above code?
In one dataset, column one might be integer that I would need to apply number formatting; but in the next dataset column one could be a timestamp that I would need to apply moment function to it.

var table = $('#example').DataTable({
    dom: 'Bfrtip',
    buttons: [
        {
            extend: 'download',
            url: '/api/download'
        }
    ]
});

I could not find any samples or examples of this file online.
Can you point me in the right direction?

https://live.datatables.net/cisixiyi/1/edit

Our code looks like this:

  .DataTable({
      dom: '<"toolbar"><"toolbar2">Bfrtip',
      ...

     });

     $("div.toolbar").html('<b>THIS IS TOOLBAR!</b>');
     $("div.toolbar2").html('<b>THIS IS TOOLBAR2!'</b>');

When using buttons to export the report (print, pdf, excel, etc.) the toolbars are not included.

Is there a way to include the toolbars?

I set the DOM to be:

dom: "<'row'<col-sm-4'l><'col-sm-4'B><'col-sm-4'i>>"

However, I am having a hard time pushing table info text right.
I added text-right, mr-2 to the style for 'i', it has no effect.

Seems the only way is to update datatable's own style:

.datatable-wrapper .datatables-info {
    clear:both;
    float: right;  /* instead of float: left */
}

But I don't want this to be applied to all tables in the solution, even to all tables on the page; just one particular table.

When I check the data being sent to data table I can see total records is at 53K+ and page size is 25, "data" contains array of 25 records but paging not showing up.

Another issue I am facing is that I set viability for columns 8, 9 and 10 to false but they are displayed anyways. I set it in columndef, as part of drwaCallback, as well as using column.visible(); none worked.

I googled the heck of these issue but nothing helped. I am hoping you can spot what I am doing wrong or missing.

function bindSitesTable() {
    tblSites = $("#sitesTable").DataTable({
        serverSide: true,
        ajax: {
            url: '<%= ResolveUrl("../WebService/IDC.asmx/GetSitesData") %>',
            contentType: "application/json",
            type: "GET",
            dataType: "JSON",
            data: function (d) {
                return d;
            },
            //data: function (data) {  // I will have to use start and end date and time, once current issues are resolved
            //    // custom parameters to the data object
            //    data.StartDate = startDate;
            //    data.StartTime = startTime;
            //    data.EndDate = endDate;
            //    data.EndTime = endTime;
            //    return data;
            //},
            dataSrc: function (json) {
                json.draw = json.d.draw;
                json.recordsTotal = json.d.recordsTotal;
                json.recordsFiltered = json.d.recordsFiltered;
                json.data = json.d.data;
                var return_data = json;
                return return_data.data;
            }
        },
        jQueryUI: true,
        dom: '<l<t>ip>',
        order: [[2, 'asc'],[7, 'desc'],],
        autoWidth: true,
        paging: true,
        lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "All"]],
        columns: [
            {
                data: "FDBID"
            }, {
                data: "OriginZip"
            }, {
                data: "SiteName"
            }, {
                data: "Address"
            }, {
                data: "CityState"
            }, {
                data: "ContactName"
            }, {
                data: "ContactPhone"
            }, {
                data: "LastUpdate",
                render: function (data, type, row) {
                    if (data == null) {
                        return '';
                    }
                    else {
                        if (data != '') {
                            return type === 'sort' ? data : moment(data).format('MM/DD/YYYY');
                        }
                    }
                    return data;
                }
            }, {
                data: "OriginID"
            }, {
                data: "ZIP"
            }, {
                data: "PlusFour"
            }
        ],
        columnDefs: [
            {
                targets: [8, 9, 10],
                visible: "false"
            }
        ],
        //drawCallback: function () {
        //    $('td:nth-child(8),th:nth-child(8)').hide();
        //    $('td:nth-child(9),th:nth-child(9)').hide();
        //    $('td:nth-child(10),th:nth-child(10)').hide();
        //},
        pageLength: 25,
        processing: true,
        deferRender: true,
    }).column([8,9,10]).visible(false);
}

in C# code:

public class SiteDataTable
{
    public int draw {get; set;}
    public int recordsTotal {get; set;}
    public int recordsFiltered {get; set;}
    public List<SiteInfo> data {get; set;}
}

[WebMethod]
[ScriptMethod(UseHttpGet = true,ResponseFormat = ResponseFormat.Json)]
public object GetAtlasSitesData(int draw, int start, int length)
{
    int sortColumn = -1;
    string sortDirection = "asc";

    // only sort one column at a time
    if (HttpContext.Current.Request.QueryString["order[0][column]"] != null)
    {
        sortColumn = int.Parse(HttpContext.Current.Request.QueryString["order[0][column]"]);
    }
    if (HttpContext.Current.Request.QueryString["order[0][dir]"] != null)
    {
        sortDirection = HttpContext.Current.Request.QueryString["order[0][dir]"];
    }
    SiteDataTables result = new SiteDataTables();

    // Capture Jquery Datatables Plugin Properties.
    string search = HttpContext.Current.Request.Params["search[value]"];
    //string draw = HttpContext.Current.Request.Params["draw"];
    string order = HttpContext.Current.Request.Params["order[0][column]"];
    string orderDir = HttpContext.Current.Request.Params["order[0][dir]"];
    int startRec = Convert.ToInt32(HttpContext.Current.Request.Params["start"]);
    int pageSize = Convert.ToInt32(HttpContext.Current.Request.Params["length"]);

    int recFilter = 0;
    int totalRecords = 0;

    // Load data.
    List<SiteInfo> data = FilterData(ref totalRecords, ref recFilter, startRec, pageSize, search, sortColumn, orderDir);

    // Configure Jquery Datatable property Total record count property.
    //int totalRecords = data.Count;

    // Configure Jquery Datatable property Filter record count property after applying searching and sorting.
    recFilter = data.Count;

    // Apply server-side pagination.
    // ???

    // Mapping final configuration settings for Jquery Datatables plugin.
// When I put a breakpoint here, I see it get hit 3 times, all below values remain the same except draw changes from 1 to 2 to 3

    result.draw = Convert.ToInt32(draw);   // 1
    result.recordsTotal = totalRecords;       // 53926
    result.recordsFiltered = recFilter;          // 25
    result.data = data;                                 // Shows as "Count=25"

    // Return info.
    return result;
}

private static List<SiteInfo> FilterData(ref int recordTotal, ref int recordFiltered, int start, int length, string search, int sortColumn, string sortDirection)
{
    List<SiteInfo> _data = ABC.GetSitesDataList();
    List<SiteInfo> list = new List<SiteInfo>();

    if (string.IsNullOrEmpty(search))
    {
        list = _data;
    }
    else
    { 
        // Apply server-side data searching
        foreach (SiteInfo dataItem in list)
        {
            if (dataItem.SiteName.ToUpper().Contains(search.ToUpper()) ||
                dataItem.Address.ToString().Contains(search.ToUpper()) ||
                dataItem.CityState.ToString().Contains(search.ToUpper()) ||
                dataItem.ContactPhone.ToString().Contains(search.ToUpper()) ||
                dataItem.FDBID.ToString().Contains(search.ToUpper()) ||
                dataItem.LastUpdate.ToString().Contains(search.ToUpper()) ||
                dataItem.OriginZip.ToString().Contains(search.ToUpper()) ||
                dataItem.SiteName.ToString().Contains(search.ToUpper()))
            {
                list.Add(dataItem);
            }
        }
    }
    //// Apply server-side Sorting -- Is this the way to do it; seems cumbersome!
    if (sortColumn == 0)
    {// sort Name
        list.Sort((x, y) => SortString(x.FDBID, y.FDBID, sortDirection));
    }
    if (sortColumn == 1)
    {// sort Name
        list.Sort((x, y) => SortString(x.OriginZip, y.OriginZip, sortDirection));
    }
    if (sortColumn == 2)
    {// sort Name
        list.Sort((x, y) => SortString(x.SiteName, y.SiteName, sortDirection));
    }
    if (sortColumn == 3)
    {// sort Name
        list.Sort((x, y) => SortString(x.Address, y.Address, sortDirection));
    }
    if (sortColumn == 4)
    {// sort Name
        list.Sort((x, y) => SortString(x.CityState, y.CityState, sortDirection));
    }
    if (sortColumn == 5)
    {// sort Name
        list.Sort((x, y) => SortString(x.ContactName, y.ContactName, sortDirection));
    }
    else if (sortColumn == 6)
    {// sort Age
        list.Sort((x, y) => SortInteger(x.ContactPhone, y.ContactPhone, sortDirection));
    }
    else if (sortColumn == 7)
    {   // sort DoB
        list.Sort((x, y) => SortDateTime(x.LastUpdate, y.LastUpdate, sortDirection));
    }
    recordFiltered = list.Count;
    recordTotal = _data.Count;

    // get just one page of data
    list = list.GetRange(start, Math.Min(length, list.Count - start));

    return list;
}

$('#tbSearch').keyup(function() {
    myTable.search($(this).val()).draw();
});

But this searches entire table and I was wondering if I can restrict it to search two columns.
I am trying to search by site name or zip code, so just need to look at these two columns.

Is there a way to just target those elements in header column?

function clearTable(){
    myTable.clear().search('').draw();
    myTable.columns().search('').draw();

    $('.filter th').each(function (i) {
        $("input[type='text']").each(function (){
            $(this).val('');
        })
    });
}

Also, how do you exclude some columns from filtering? I tried specifying column indexes to be excluded and when looping through column in initComplete, I check if index of current column being processed is in that array, skip the process. Doesn't seem to work.

$date = \DateTime ($val);

Is there a workaround for this?

Thank you for your help.

The problem I am facing is one or the other shows up depending on how I declare the datatable.
If I add the declaration in a function, say "bindMyDatatable()" and call it in document.ready portion, then column filtering appears but drop down won't. If I remove the function name and just declare the data table definition, then drop down (custom DOM) appears but column filtering won't. Not sure how to fix it.

$(documet).ready(function(){
    ...
    $("div.toolbar").html('markup for drop down');
    // setup column filtering
    $('#MyTable thead tr')
        .clone(true)
        .addClass('filters').
        .appendTo('#MyTable thead');

    bindMyTable();
    ...
});

function bindMyTable(){
    tblMyTable = $("MyTable").DataTable({
        ...
        dom:<'row'<col-md-2' l><'col-md-2'<\"toolbar\">><...>>";
        ...
        initCompleter: function(){
            ...
        }
   });

This shows column filtering but not drop down in custom DOM.

If I comment out bindMyTable in document.ready, and remove "function bindMyTable(){" and just leave table definition, then custom DOM appears but column filtering won't.

https://datatables.net/forums/discussion/41960/best-way-to-place-footer-filter-bellow-header

Please suggest what has changed and how do I move my footer row before body now.

Thanks
K

    fundTable.on('select', function(){
                appTable.ajax.reload();
                appEditor.field('TApplications.funderid')
                    .def(fundTable.row({selected:true}).data().id);
                contactTable.ajax.reload();
                contactEditor.field('TFunderContacts.funderid')
                  .def(fundTable.row({selected:true}).data().id); 
            });

It doesn't matter which way round I put the two table reloads - only the first happens. Is there another way I should be doing this? Thanks.

CREATE TABLE mytable (
  UserName varchar(25) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  Password varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,  
  PRIMARY KEY (ID),
  KEY Index_UserName (UserName) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=618 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

Error is triggered when i save a number instead of a string in userName. Password is not giving the issue

This is how i save usernames in my code:

editor.Field(new Field("mytable.UserName")
    .Xss(false)
    .GetFormatter((val, data) => CommonUtilities.IsNullOrEmpty(CommonUtilities.ToString(val).Trim()) == true ? null : CommonUtilities.ToString(val).Trim())
    .Validator(Validation.Unique(new ValidationOpts
    {
        Message = lblo.lblUserNameHasAlreadyBeenTaken
    }))
    .SetFormatter((val, data) => CommonUtilities.IsNullOrEmpty(val) == true ? null : HttpUtility.HtmlDecode(CommonUtilities.ToString(val)))
);

Method CommonUtilities.ToString just converts to string
I have tried doing a conversion to string in initSubmit event:

var userName = this.field('mydb.UserName').val();
if (IsNumeric1(userName)) {
    this.field('mydb.UserName').val(ToString(userName));  // Ensure numeric values are treated as strings
}

and even added a trigger in the db all to no avail:

CREATE TRIGGER `convert_username_to_string`
BEFORE INSERT ON `mydb`.`mytable`
FOR EACH ROW
SET NEW.UserName = CAST(NEW.UserName AS CHAR);

The issue isn't with Mysql or the fact that I index the UserName as I have this elswhere with other tables and fields and saving numerics is fine. Please advise.

Loading the page with DataTables on my new server I get the error
DataTables warning: table id=customer - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1

More specifically, the error is caused by
Deprecated: Creation of dynamic property DataTables\Database\DriverMysqlQuery::$_dbHost is deprecated in /Web/PMS/php/lib/Database/Query.php on line 55

Debugger says Legacy DataTables - It looks like you are using a really old version of DataTables (1.10.18)

Thank you all for your advice.
Paolo

Question Table:

QuestionId  QuestionText                                                                                            ParentQuestionId
1                   Did you eat lunch yesterday?                                                                    1
2                   If yes, what time?                                                                                  1
3                   If yes, what did you eat?                                                                           1
4                   Did you have dinner yesterday?                                                          4
5                   If yes, list the items you ate.                                                                 4

QuestionId is the primary key (PK).
ParentQuestionId is a self-referencing foreign key (FK) to QuestionId.

Response Table:

ResponseId  QuestionId  ResponseText    CustomerId
1                   1                   Yes                 1
2                   2                   12pm            1
3                   3                   Salmon          1
4                   4                   Yes                 1
5                   5                   Eggs, Spinach   1
6                   1                   Yes                 2
7                   2                   11pm            2
8                   3                   Hotpot          2
9                   4                   Yes                 2
10                  5                   Taco            2

ResponseId is the primary key (PK).
QuestionId is a foreign key (FK) to the QuestionId field in the Question table.
I’m seeking advice on how to enable multiple records that share the same ParentQuestionId to be editable in the same bubble editor window. For example:

If a user clicks on the record with QuestionId 1, the bubble editor should be enabled for QuestionId 1, 2, and 3.
If a user clicks on the record with QuestionId 4, the bubble editor should be enabled for QuestionId 4 and 5.
Additionally, if a user enters a response for QuestionId 1, they should be required to enter responses for its sub-questions (QuestionId 2 and 3).

I found some similar examples to implement parent/child edit like https://editor.datatables.net/examples/datatables/parentChild.html and https://editor.datatables.net/examples/advanced/parentChild.html

However, I'm wondering if there's a simple way to display a bubble popup with onClick event where labels are QuestionText and names/ editable fields are ResponseText.

Any suggestions on how to achieve this?

Here is my test case.

This is a simple, contrived example to illustrate the point. Using the select box at the top of the page, I want to "filter" for either families with the name of Smith or not.

In my test case, like the post here on the forum, I have impleted filtering with the search api.

However, on two points, this is not the UX my users are expecting:

1. Using the search API causes the value of the select to appear in the search box (see image below).

2. When users say filter, they mean it is the Excel use of the word. For example, when you apply a filter to an Excel column.

Also, using my example, searching for values such that val == 'Smith' is easy. What is the implementation for val !== 'Smith'?

What is the recommended approach?

Thank you in advance

Then that value might be used later in Editor.

While this works, it feels messy and I have to assume there's a recommended way to add this auxiliary data to the payload received by DT on load.

What's the recommended API?

<script>

      // some magic computed server data that is not user specific, not computed from user data.
      const some_server_data = <?= $some_server_data ?>

      $(document).ready(function () {
        const editor = new $.fn.dataTable.Editor({
          url: "./data/users.json",
          table: "#attendance",
          fields: [
            {
              label: "First name:",
              name: "users.first_name",
            },
            {
              label: "Last name:",
              name: "users.last_name",
              def: some_server_data
            },
            {
              label: "Phone #:",
              name: "users.phone",
            },
            {
              label: "Site:",
              name: "users.site",
              type: "select",
            },
            {
              label: "Color:",
              name: "users.color",
              type: "select",
            },
          ],
          table: "#users",
        });
         ...

      });
    </script>

The buttons for PDF and exporting to CSV are not appearing.

Thank you

Can someone point me to a simple example of adding a new record to a DataTable using Editor v1?

Either the "new" button above the table OR dynamically adding a new editable row?

Thanks in advance

PS. One of the columns in the table is a select field, if that mattes. Meaning when the new record is created, one of the values will be selected from a list (ex. location)

Essentially I need to paginate over a subset of API data from an API with limited search/filter and potentially large data volume.

Assume there is a service accessed via an API that has hundreds of records. The service returns pages of results 20 at a time (i.e. pagination). On my UI, I wish to display valid records from the records returned. However, not all records are valid and the API has essentially no filter feature.

The UI should always attempt to display 20 records even if another call to the API is needed. Calls to the API pass both a previous and a next page token. Can you suggest an ajax pagination strategy to display 20 valid records at a time, page for the additional records as needed and keep both the API calls and the UI display in sync while navigating to previous and next screens.

I'm considering on initial page load to grab a reasonably large number records from the API (ex. 500 records) on the server, filter server-side and pass valid records to the data option of the DataTables data source.

I'm hoping this not such a rare requirement.

This is the error I am getting.

I am using this version of Data Tables:
https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js

I use Editor with PHP, version is 2.0.7

The browser's console shows the following error:

The problem occurs when PHP Editor tries to json_encode the data object. Editor crashes and I get the first error message above.

I checked on SO how to fix this and found this:
https://stackoverflow.com/questions/46305169/php-json-encode-malformed-utf-8-characters-possibly-incorrectly-encoded

Hence I added this on "postGet" and tried both versions (looping through $data myself or let PHP do it):

->on( 'postGet', function ( $e, &$data, $id ) { 
//        foreach ($data AS $key => $val) {
//            $data[$key] = mb_convert_encoding( $val, "UTF-8", "UTF-8" );
//        }
    $data = mb_convert_encoding( $data, "UTF-8", "UTF-8" );
})
->process($_POST);    
$editor->json();

In my debugger the $data object looked 100% fine and the mb_convert_encoding did not produce any errors in either version.

$editor->json();

caused the crash.

How can I locate the problem? The console message doesn't allow me to locate anything: It is a location in a min-file. I wanted to the use the regular js file
https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js
Surprisingly that produced errors in other parts of my code when executing. Strange.

This is all I get in the network tab as a server response. Pretty much useless unfortunately.

I also tried to repair the database table. But there was nothing wrong with it.

I am stuck now and this is very, very urgent for me to fix: I cannot onboard new clients before this is fixed! I would be very grateful if you could help me with this.

I'm creating a new list with DataTables. Everything is working, but for some reason, the classes that I specify in the "classname" property in the columns array are not applied to the columns. This is the definition I have:

columns: [
    {"data": "inv_number",          "classname": "row-inv_number",           "name": "inv_number",          "orderable" : true },
    {"data": "inv_date",            "classname": "row-inv_date",             "name": "inv_date",            "orderable" : true },
    {"data": "inv_description",     "classname": "row-inv_description",      "name": "inv_description",     "orderable" : true },
    {"data": "job_address",         "classname": "row-job_address",          "name": "job_address",         "orderable" : true },
    {"data": "inv_amount",          "classname": "row-inv_amount",           "name": "inv_amount",          "orderable" : true },
    {"data": "inv_duedate",         "classname": "row-inv_duedate",          "name": "inv_duedate",         "orderable" : true },
    {"data": "paid_amt_paid",       "classname": "row-paid_amt_paid",        "name": "paid_amt_paid",       "orderable" : true },
    {"data": "paid_payment_date",   "classname": "row-paid_payment_date",    "name": "paid_payment_date",   "orderable" : true },
    {"data": "paid_check_num",      "classname": "row-paid_check_num",       "name": "paid_check_num",      "orderable" : true },
    {"data": "paid_net_due",        "classname": "row-paid_net_due",         "name": "paid_net_due",        "orderable" : true },
    {"data": "actions",             "classname": "row-rowactionbuttons",     "name": "actions",             "orderable" : false}
],

When the list is loaded, none of the CSS classes are added:

<tr id="a060a9e7-7ff2-4e2f-8e0d-33bedbee403c" class="odd">
    <td class="sorting_1">12341</td>
    <td>02/28/2021</td>
    <td>Test 2021 NEC</td>
    <td></td>
    <td>3500.00</td>
    <td>02/28/2021</td>
    <td>3500.00</td>
    <td>02/28/2021</td>
    <td>12312</td>
    <td>0.00</td>
    <td></td>
</tr>

I have quite a few other DT lists, but none of them have a problem with this and I'm not sure where this is getting lost... I don't recall having had this problem before. Any ideas?

One other question:
I was playing with creating the columns as a separate array and then just assign them to the columns property,
where dtColumns are created as:

var dtColumns = [
    {"data": "inv_number",          "classname": "row-inv_number",           "name": "inv_number",          "orderable" : true },
    {"data": "inv_date",            "classname": "row-inv_date",             "name": "inv_date",            "orderable" : true },
    {"data": "inv_description",     "classname": "row-inv_description",      "name": "inv_description",     "orderable" : true },
    {"data": "job_address",         "classname": "row-job_address",          "name": "job_address",         "orderable" : true },
    {"data": "inv_amount",          "classname": "row-inv_amount",           "name": "inv_amount",          "orderable" : true },
    {"data": "inv_duedate",         "classname": "row-inv_duedate",          "name": "inv_duedate",         "orderable" : true },
    {"data": "paid_amt_paid",       "classname": "row-paid_amt_paid",        "name": "paid_amt_paid",       "orderable" : true },
    {"data": "paid_payment_date",   "classname": "row-paid_payment_date",    "name": "paid_payment_date",   "orderable" : true },
    {"data": "paid_check_num",      "classname": "row-paid_check_num",       "name": "paid_check_num",      "orderable" : true },
    {"data": "paid_net_due",        "classname": "row-paid_net_due",         "name": "paid_net_due",        "orderable" : true },
    {"data": "actions",             "classname": "row-rowactionbuttons",     "name": "actions",             "orderable" : false}
]

Then in the DT setup, rather than declaring the array there, I use:

columns: dtColumns,

This doesn't work at all. I would think it wouldn't make a difference. No big deal, just curious if you have a comment on it

Best regards,
Arnor

The rowGroup.dataSrc can be configured to support one or more levels of grouping. This example supports exporting only the first group. The multiSheet boolean variable controls whether the export is on one sheet or individual sheets for each group.

The example supports these standard button options:

        title: '',
        header: true,
        messageTop: 'This is the top',
        messageBottom: 'This is the bottom',
        sheetName: 'Single Sheet',  // This is only used in singe sheet mode
        footer: true,

        exportOptions: {
          modifier: {
            search: 'applied', 
          }
        },

Use any desired selector-modifier. The above is just an example.

The only setting needed inside the customize function is this varaible:

multiSheet = true;  // Export all groups in one sheet or multiple

Please make improvements to the code and post them here if you do.

Kevin

$outOfOffice = '';

$columns[] =  array( 'db' => 'OUT_OF_OFFICE', 'dt' => 'out_of_office',
    'formatter' => function($d, $row) use ($outOfOffice) {
        $outOfOffice = trim($row['OUT_OF_OFFICE']);
        return trim($row['OUT_OF_OFFICE']);
      }
    );

if($outOfOffice == 'Vacation Day'){

    $columns[] = array( 'db' => 'TOTAL_HOURS_SECONDS', 'dt' => 'total_vacation_hours',
        'formatter' => function($d, $row){
        
        $totalVacationhours   = floor($row['TOTAL_HOURS_SECONDS'] / 3600);
        return   $totalVacationhours;

        }
     );
    
}else if ($outOfOffice == 'Paid Leave Vacation'){
    
    $columns[] = array( 'db' => 'TOTAL_HOURS_SECONDS', 'dt' => 'total_paid_leave_vacation_hours',
        'formatter' => function($d, $row){
        
        $totalPaidLeaveVacationHours   = floor($row['TOTAL_HOURS_SECONDS'] / 3600);
        return   $totalPaidLeaveVacationHours;
        }
    );
}