Hi,

Keytables, copy cell value is not working in IE11. Everything else seems to work.
When I try with Chrome, Edge and Firefox everything works as it should.

Table data loads, briefly and unformatted, before jquery DataTables loads. I have researched and found many say the solution is to hide the table with css and then show it in jquery with initComplete. I have tried the following but nothing seems to work:

css:
#tblAccount {
    visibility:hidden;
}
#tblCustomer {
    visibility: hidden;
}

jquery:
$(function () {
    $("[id*=tblAccount], [id *= tblCustomer]").prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
        "paging": true,
        "lengthChange": true,
        "searching": true,
        "ordering": true,
        "info": true,
        "autoWidth": true,
        "responsive": true,
        "dom": 'lBfrtip',
        "buttons": ['excel', 'print', 'pdfHtml5'],
        "initComplete": function () {
            $('#tblAccount').show().css({ visibility: "visible" });
        $('#tblCustomer').show().css({ visibility: "visible" });
        }

    });
})

I have a very large table that takes 10's of thousands of rows from a sql server. At the moment I have to severely limit the amount of data being loaded, otherwise the table takes ages to load. My understanding is that deferRender should help fix this issue, however it doesn't appear to be doing anything. This is my code, thanks!:

$(function () {
    WtmHomePage.initialise();
});

var WtmHomePage =
{
    vars: {
    },
    fn: {
        ajaxPost: function (sFunction, onSuccess, onError, data, passThroughData, iTimeoutMillis) {

            if (typeof iTimeoutMillis !== "number") {
                iTimeoutMillis = 30000;
            }
            if (typeof passThroughData === "undefined") {
                passThroughData = {};
            }
            if (typeof onSuccess !== "function") {
                onSuccess = function () { };
            }
            if (typeof onError !== "function") {
                onError = function () { };
            }
            if (typeof data === "undefined") {
                data = null;
            }

            var sCsrfToken = $("input[name='__RequestVerificationToken']").val();
            if (typeof sCsrfToken !== "string") {
                sCsrfToken = "";
            }

            // Make ajax call
            $.ajax({
                type: "POST",
                url: "../Home/" + sFunction,
                contentType: "application/json; charset=utf-8",
                processData: false,
                dataType: "json",
                headers: { "X-XSRF-Token": sCsrfToken },
                data: data === null ? null : JSON.stringify(data),
                success: function (response, status, jqXhr) {
                    // Only send the data back because we dont want to handle two separate
                    // data layouts. This fails horribly if someone names a variable "d".
                    if (typeof response.d !== "undefined") {
                        onSuccess(response.d, status, jqXhr, passThroughData);

                    } else {
                        onSuccess(response, status, jqXhr, passThroughData);
                    }
                },
                error: function (jqXhr, status, errorName) {
                    // Handle generic errors if they exist, otherwise forward to error handler

                    if (jqXhr.status === 401) {
                        // Unauthorised. Force a refresh
                        window.location.href = window.location.href;
                        return;
                    }
                    else if (status === "timeout") {
                        // Function call timeout
                    }

                    onError(jqXhr, status, errorName, passThroughData);
                },
                timeout: iTimeoutMillis
            });
        },

        //mynewFunction: function () {
        //}
    },

    initialise: function (data) {
        WtmHomePage.fn.ajaxPost("GetTaskLog",
            function (data, status, jgXhr, params) {

                //INIT CHILD TABLE
                $('#WTM_LOG').dataTable({
                    "deferRender": true,

                    //HIDE PAGINATION IF PAGES <= 1
                    "fnDrawCallback": function (oSettings) {
                        if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay()) {
                            $(oSettings.nTableWrapper).find('.dataTables_paginate').hide();
                        }
                        else {
                            $(oSettings.nTableWrapper).find('.dataTables_paginate').show();
                        }
                    },

                    "autoWidth": false,
                    "dom": "rtp",
                    "order": [[0, "desc"]],
                    "pageLength": 20,
                    "processing": true,
                    "data": JSON.parse(data),
                    "selector": ":not(:first-child)",
                    "sPaginationType": "simple_numbers",
                    "language": {
                        "paginate": {
                            previous: "<",
                            next: ">",
                        }
                    },
                    "columns": [
                        {
                            "data": "TaskSchedulerLogUid",
                            "visible": false
                        },
                        {
                            "data": "TaskName",
                            "visible": false
                        },
                        {
                            "data": "StartDate",
                            "render": function (data, type, row) {
                                var dateSplit = data.split("");
                                if (type === "display") {
                                    return dateSplit[8] + dateSplit[9] + '/' + dateSplit[5] + dateSplit[6] + '/' + dateSplit[0] + dateSplit[1] + dateSplit[2] + dateSplit[3] + " " + dateSplit[11] + dateSplit[12] + ":" + dateSplit[14] + dateSplit[15] + ":" + dateSplit[17] + dateSplit[18];
                                }
                                return data;
                            },
                        },
                        {
                            "data": "EndDate",
                            "render": function (data, type, row) {
                                var dateSplit = data.split("");
                                if (type === "display") {
                                    return dateSplit[8] + dateSplit[9] + '/' + dateSplit[5] + dateSplit[6] + '/' + dateSplit[0] + dateSplit[1] + dateSplit[2] + dateSplit[3] + " " + dateSplit[11] + dateSplit[12] + ":" + dateSplit[14] + dateSplit[15] + ":" + dateSplit[17] + dateSplit[18];
                                }
                                return data;
                            },
                        },
                        {
                            "data": "ErrorCount",
                            "render": function (data, type, row) {
                                if (type === 'display') {
                                    return (data === 0)
                                        ? data = '<span data-search="0"></span>'
                                        : data = '<a href="http://localhost/WTM/LogError/Index?id=' + row.TaskSchedulerLogUid + '" type="hidden" class="fas fa-exclamation-triangle" style="color:red"></a>';
                                }
                                return data;
                            },
                        },
                        {
                            "data": "EventCount",
                            "render": function (data, type, row) {
                                return (data > 0)
                                    ? data = '<a href="http://localhost/WTM/Details/Index?id=' + row.TaskSchedulerLogUid + '" type="hidden" class="fas fa-list" style="color:blue"></a>'
                                    : data = '';
                            },
                        },
                    ],
                    columnDefs: [
                        {
                            targets: 2
                        }
                    ]
                });

            },
            function (jqXhr, status, errorName, params) {
                alert("Child Table Error")
            },
            null,
            null,
            30000);
    }
}

Hi everybody,

sorry in advance for the stupid question, but I have no experience with this technology and I need some help.

I'm writing a spring based web app and I just want to know if inline editing can working with spring and oracle.

Is there any example somewhere?

Thanks in advance.

Daniele

I am unsure if this is the best place to ask this, if there is a better place please let me know.

I'm having some trouble replicating the build process, and it appears to have to do specifically with the minimization process. I am able to replicate the non-minimized files exactly, but the minimized versions always have differences.

The build process described on the github (https://github.com/DataTables/DataTablesSrc) does not name any particular version of Closure to use, but none that I have tried yield an exact replica of the minimized versions found on the compiled repo.

The primary differences seem small: the variables are named differently, there is a slight optimization difference in a series of boolean statements, or there is a difference in information in the header comment. I can't imagine, functionally, the code has changed, but I can't help but think there is a step being missed in build process somewhere.

I have also attached a diff to show these differences.

Some information:
- I am only compiling the javascript, using the 'js' option of the make script, and only comparing the base dataTables build with no extensions.
- I am using version 1.10.19 of the source (and the same version of the compiled to compare).
- I am only using Bash and Closure to do this. I do not have PHP, Sass, or JSHint (presumably not needed as I am only compiling the javascript).
- I have used both the OpenJDK and Oracle to run Closure
- A coworker also performed this build process, and was able to replicate the same minimized file I had but not the minimized version on the compiled-sources github.
- I am using an online javascript pretty-printer to allow comparison between the minimized files to be readable. (https://beautifier.io/)

I installed Editor with Composer using PHP 7.3. I got a warning
PHP Deprecated: define(): Declaration of case-insensitive constants is deprecated in C:\inetpub\wwwroot\mysite\vendor\datatables.net\editor-php\composer.php on line 12

I change composer.php to define("DATATABLES", true, false); and now everything is fine.

I have 1 problems
1.-In a table I created checkbox using "bootstrapToggle" and it is instantiated during the "drawCallback" of data table (image_1 and image_2).

But during the handling of responsive you lose style that is created with "bootstrapToggle".
How can I keep the style of "bootstrapToggle"?

Hi,
Just wondering if there is something obvious I'm missing. I've used datatables all over with ajax data server side processing etc, and I've got a modal opening and then calling initialising code for the datatable, however when I try to access the form data for server side paging in my controller (asp.net core) like so

var draw = Request.Form["draw"].FirstOrDefault();
var start = Request.Form["start"].FirstOrDefault();
var length = Request.Form["length"].FirstOrDefault();

(I've used this when using datatables not loaded in a modal) it says it can't evaluate Form until all threads have run and bombs out with any error message.

I assume its because it loaded after the page load, anyone got any ideas to solve this?

Thanks
Richard

I have a situation where I need to sort a table by a column whose content (which is limited to a small set of values) does not fall alphabetically into the desired order for display. The MySQL feature ORDER BY FIELD(...) would accomplish what I need when the page is loaded. I would need to be able to do this as the page might be re-sorted while it is being viewed. Does DataTables have a way to do this, client-side, that I've just not found?

I am using Datatables and Yadcf for filtering results. I actually have it set up on Drupal 8 but then created a plain html site so that I can post it and get help. The Datatable and Yadcf filters all work fine. But if I go to any page on my site that does not have a table with the class name from my datatable init and my variable oTable, I get TypeError: oTable is undefined. I have Drupal site with many pages. We are allowing Editors to copy and past Datatables within the Ckeditor. So a Datatable can be on any page. I was told I need to load datatables.js and jquery.dataTables.yadcf.js only on pages that contain a Datatable. If I remove yadcf.init section from my code the error goes away. I am thinking my syntax is wrong? I want to have over 40 different Datatables configurations. So I will have var oTable1,oTable2,oTable3, etc.; Example here A page that has a Datatable and no errors Example here A page that does not have a Datatable an has the error. View the console log and you will see the error.

My datatable is populated via an API call. It returns 30 items at most. I can pass it a page # variable. So if I want items 61-90, I pass page=3. Is there a way to use DataTables with this functionality? i.e. just show the left and right arrows. If I'm on page 2, clicking the right arrow would call the web service with page=3, or if I click the left arrow, it calls it with page=1.

Hi,

Its been a while, I am back again. trying to get parent and child datables on click of parent row.

here is my code

`<!DOCTYPE html>
<html>
  <head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <meta charset=utf-8 />
    <title>DataTables -  Parent and Child</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
        <thead>
            <tr>

                <th>Id</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Address</th>
            </tr>
        </thead>

        <tfoot>
            <tr>

                 <th>Id</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Address</th>
            </tr>
        </tfoot>

        <tbody>
          <tr>

            <td>1</td>
            <td>xxx</td>
            <td>uyy</td>
            <td>dddd</td>
          </tr>
          <tr>

            <td>2</td>
            <td>dfff</td>
            <td>ddd</td>
            <td>dddd</td>
          </tr>
        </tbody>
      </table>
    </div>

<div>
      <table id="child" class="LogDetails"> 
        <thead>
            <tr>

                <th>Id</th>
                <th>Loged Date</th>
                <th>Loged Out Time</th>

            </tr>
        </thead>


      </table>
    </div>

  </body>
</html>`

my javascript

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "columns": [
            {   "orderable":      true,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "A" },
            { "data": "B" },
            { "data": "C" },
            { "data": "D" }
        ],
        "order": [[1, 'asc']]
    } );

    // Add event listener for opening and closing details
    $('#example tbody').on( 'click', 'button', function () {
    var data = table.row( $(this).parents('tr') ).data();
    editMember(data[0]);
} );

} );

Anyone around to help, so i can use ssp class to retrieve data from my sql database please?

OR

Just from the text file the child data?_

I need a table in such a way that, I had a json like,
tableData: {
Revenue_Variable_Cost_Tier_1: [

      { 1: 'Volume()',2: , 3: , 4: , 5: , 6: , 7: , 8: , 9: , 10: , 11:  },
      { 1: 'Unit Price($M)' ,2: , 3: , 4: , 5: , 6: , 7: , 8: , 9: , 10: , 11: },
      { 1: 'Unit Cost($M)' ,2: , 3: , 4: , 5: , 6: , 7: , 8: , 9: , 10: , 11: },
    ],

    Revenue_Variable_Cost_Tier_2: [
      { 1: 'Volume()',2: , 3: , 4: , 5: , 6: , 7: , 8: , 9: , 10: , 11:  },
      { 1: 'Unit Price($M)' ,2: , 3: , 4: , 5: , 6: , 7: , 8: , 9: , 10: , 11: },
      { 1: 'Unit Cost($M)' ,2: , 3: , 4: , 5: , 6: , 7: , 8: , 9: , 10: , 11: },
    ],
    Capex_Depreciation: [
      { 1: 'Capex($M)',2: , 3: , 4: , 5: , 6: , 7: , 8: , 9: , 10: , 11:  },
    ],

    Other_fixed_cost: [
      { 1: 'SGA($M)' ,1:,2: , 3: , 4: , 5: , 6: , 7: , 8: , 9: , 10: , 11: },
      { 1: 'RA($M)',,2: , 3: , 4: , 5: , 6: , 7: , 8: , 9: , 10: , 11:  },
    ],
    working_capital: [
      { 1: 'NWC % sales(%)' ,,2: , 3: , 4: , 5: , 6: , 7: , 8: , 9: , 10: , 11: }
    ],

  },

some more may be added for that dynamically. here 1,2,3.... represents row cell.
Know it may be more helpful for me if you help to show above each array as datatable with editable fields? i don't mind even if you change the pattern of json and form dynamic datatables

Every time a sort a column , the column that I sorted will have null values.

Hi,
when i set responsive: true, ajax request call twice when the page load for the first time.
But when i set it to false, it call once.

how to resolve it?

Thanks

i have a datatable in which when i try to search using keyboard it shows no search is found but when i do it using right click it shows result please help

reference http://live.datatables.net/danosiyo/1/edit

I have a similar form in my application, with select2 as first field and date as 2nd field. I would like the first field to be focused, but don't see the easy way to do this. The calendar pop-up is a bit jarring when the form is displayed, and the user has to manually click on the first field.

I tried following suggestion in https://editor.datatables.net/reference/api/field().focus() comment to no avail. Not sure best way to put in form-options as you suggest. Shouldn't there be editor initialization option which defines focus? I think this is select2 anomaly because when I tried just type:'select' the focus defaulted to the first field as expected.

editor.on('open', function() {
    editor.field( 'position' ).focus();
});

Thx for this great product. I have a small issue with an inline edit of a cell and datatables. When i click on a cell in the table, i need to select the record similar to "onfocus="this.select();", in order not having to highlight it with a mouse before editing a single record. Is it possible? (I am saving up for you Editor version, to get it early next yr)

I use contenteditable in a div. Is there a way to change the input type for 2 specific columns from text to "tel" and text to "date" respectively. Thx for your great tables. Just love them

Hi Everyone

I've just used the bar bones of the editor to update tables I need to edit and its working great (using in-line editing). However, I'm not sure how to move forward on this. I have a screen that list of samples taken during a specific inspection. showing 1) Where it was taken 2) the item it was taken from (window, wall, etc) 3) it's Sample number.... in addition I'm displaying 2 additional "Results" selections - the "Result" and "Recommended Action". I can update both these fields no problem and the data base it updating correctly. My problem is,,,, When I select the "Result" - I need 2 things to happen.

1) Set another field called "SampleType" - this is a value based from 0 to 3 depending on which "Result" is selected - so basically I need to use a select/case check the "result"
2) once Sample Type is done I need to do some maths and update a field called "totalRisk" using the value in SampleType and three other fields.

The above is easy in MS Access. I'm sure it's sometihing I need to do on an **event ** such as **change ** on the "Result" select- but I'm not sure how to move forward on this.

If anyone has an idea I would greatly appreciate it.

Thank you in advance for any guidance