Hey,

I'm using ajax object configuration for upload type of input. Everything works great, I just have an issue where if validation of uploaded image is rejected, server returns status code 422, so datatables displays "A server error occurred while uploading the file".

For other ajax requests I was able to handle this inside "error" function, but in this case it doesn't seem to be fired. Bellow is my code:

{
    label: 'Image:',
    name: IMAGE_NAME,
    ajax: {
        url: route('dt.post'),
        type: 'POST',
        data: (data) => {
            data._token = window.Laravel.csrfToken;
        },
        dataFilter: function (response) {
            const json = JSON.parse(response);
            $.each(json.files, function ( table, files ) {
                $.fn.dataTable.Editor.files[table] = files;
            });
            return response;
        },
        error: function (xhr, e/*, thrown*/) {
            let data = xhr.responseJSON;
            if (data && data.hasOwnProperty('fieldErrors')){
//                success(data);
            } else {
//                error(xhr, e, thrown);
            }
        }
    },
    type: 'upload',
    display: function ( file_id ) {
        ...
    },
    clearText: "Clear",
    noImageText: '-'
}

Any idea why error function is not fired when server code != 200?

Beside this approach I also tried to use ajax function instead of object function(method, url, data, success, error) (I use this as default method all over the project) so that I was able to call success or error callback, depending on what happened. If I add this to my upload field, upload field will completely ignore function and just make a POST request to the same page user is currently on. This works for DataTables data calls though, so not sure why it doesn't here...

Is there a way to handle validation errors and prevent "A server error occurred while uploading the file" getting displayed for upload field?

P.S.: After using DataTables for 5+ years I think, I think I could easily say it's one of the most advanced and flexible packages I ever used. GJ Allan and team

I need to change some buttons on ckeditorClassic, and add a source button to edit the source in the editor content. There is a plugin for the editor to add the source button:

https://ckeditor.com/cke4/addon/sourcearea

Any suggestions to achieve this in the datatables editor?

First of all, please note I'm not really experienced with any of this, but I think there's a little problem with the Upload feature on Editor and I'll try to be as detailed as possible.

When uploading to Editor a .msg file directly from Outlook (Windows Application) to Chrome, the file is uploaded successfully but the e-mail disappears from Outlook (it moves it to Deleted Items folder). This doesn't happen when using Edge browser - it works as it should.

From what I can find about this, is related to a global event called event.dataTransfer.dropEffect .
This event is somehow defined as move instead of copy. What I can't understand is why on Edge this seems to be defined as copy, but as move on Chrome.

My idea to solve this was to search for event.dataTransfer.dropEffect on datatables.Editor.js but I can't seem to find this declared in order to change it from move to copy.

I tried to add it to dragDrop.on, but it doesn't seem to work too.

dragDrop.on( 'drop', function (e) {
                if ( conf._enabled ) {
                    e.originalEvent.dropEffect = "copy";
                    Editor.upload( editor, conf, e.originalEvent.dataTransfer.files, _buttonText, dropCallback );
                    dragDrop.removeClass('over');
                }
                return false;
            } )

Does anyone has any idea how this can be solved?
My Chrome version is 79.0.3945.130

Related articles about this subject, i know it's different scripts, but it seems to be a general problem:
- https://support.google.com/chrome/thread/14094827?hl=en
- https://answers.microsoft.com/en-us/msoffice/forum/all/drag-and-drop-works-however-deletes-email-can-we/865f60c3-7980-4465-8a19-4d60b0ae5aba?rtAction=1575537469456&page=2

Hi, everyone!

I've faced with a problem (or probably feature). When I make the first column of a table non-orderable via data-orderable="false" attribute, and don't setup default order, DataTable sorts data by this field anyway. Here is an example. IMO, more appropriate behavior will be sorting by first "orderable" column instead of first one.

Hi, is it possible to freeze/lock first row in datatables excel export file? Any built-in option or custom code?

I need to be able to apply multiple filters to a single column using datatables.

I've been looking at an example they provided here but my requirements are slightly different.

The first column in my table will contain location information, each cell will contain a building name and floor. I want to have two dropdowns that allow users to filter on both of these.

So e.g. 'Show me Building 1 and Second Floor'.

I can get the first dropdown to filter on building, but the second doesn't filter on floor. Here's a link to a demo i'm working with https://codepen.io/qubjohnny/pen/jOPrymJ?editors=1010

Note I have simplified this table and limited it to 6 records, my live table will contain hundreds of records.

Hi i've a child rows from ajax call. I need to close all child opened when user change page.
How can do it?

Thank you

I have created datatable with inline editing.
I have few question and issue.

1. while clicking the column of inline edit it's taking extra space from top and flickering.
2. How to get the data after mouse move out from the inline edit mode. Actually i want on onmousemove inine edit mode should close and the same it has to call one method with editable data.
3. How to delete the entire row data and get the deleted data details.
4. how to fecth the data immediatel after saving.

I am using the 'colvis' button in my setup in combination with child rows.

I got the ideas on how to do that from https://datatables.net/examples/api/row_details.html and https://datatables.net/extensions/buttons/built-in.

I built a showcase for my problem on https://jsfiddle.net/L7xpkz3u/2/.

If you click on the "closed" cell, a child row should open up. By clicking on it again it should disappear. Now, if you were to use the "Column Visibility" button on top of the table, and click on a name of a column the column disappears where the content resides beside the table which does not happen if the child row was not activated during the session.

Does anyone know how to solve this problem?

Hello there,

I have made an account which I never needed. Can I delete it, if yes what is the process?

Thanks!

I'm trying to implement a render function to add a column for some action links.
The problem is, action links via render only work on a server side configuration.
I don't get closure on a working script for a serverside using Oracle.
On mysql, I didn't have any problem to implement all of these stuffs, but in Oracle it's complicated to get a solution.

Hello.

I've a column for each week of the year containing different numbers. So when each column renders I do a sum for that column in the footer. But I also would like to do a sum for that column and 3 months ahead (this + 11 columns ahead) for each column.

   footerCallback: function () {
            var api = this.api();
            api.columns('.sum', {
                page: 'current'
            }).every(function (index) {
                var sum = this.data().sum();

                // How should I do this instead of referencing the table again? Or is this OK?
                // I cannot reach the table variable created when creating the DataTable in document ready.
                var table2 = $('#assignmentReport').DataTable();
                for (var i = index; i <= index + 11; i++) {
                        var s = table2.column(i).data().sum();
                        console.log(s)
                }
            });
        }

The problem with this solution is that it continues for 11 weeks the last week 52 also, so it throws an error:

Cannot read property 'sDefaultContent' of undefined

Could someone guide me in the right direction?

Thanks in advance.

I am new to programming and I have been trying this for days and still i can't get this data table to refresh after save and update. I used table.ajax.reload() function but it didn't help either.

 if ($('#Person').parsley().isValid()) {

                    var Id = $("#id").val();
                    var FirstName = $("#firstname").val();
                    var LastName = $("#lastname").val();
                    var DOB = $("#dob").val();
                    var SSN = $("#ssn").val();
                    var Email = $("#email").val();
                    var Address = $("#address").val();
                    var PhoneNo = $("#phone").val();


                    var Person = {
                        id: Id,
                        firstname: FirstName,
                        lastname: LastName,
                        dob: DOB,
                        ssn: SSN,
                        email: Email,
                        address: Address,
                        phoneno: PhoneNo
                    };

                    if (Id =="") {
                        $.ajax(
                        {
                            type: "POST",
                            url: "/Details/SavePerson",
                            data: JSON.stringify(Person),
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            beforeSend:function(){
                                $('#btnSubmit').attr('disabled', 'disabled');
                            },
                            success: function (data) {
                                $('#Person')[0].reset();
                                $('#btnSubmit').attr('disabled', false);
                                $('#btnSubmit').val('Submit');
                                dataTable.ajax.reload();
                                swal("Done!", "Data has been Saved.!", "success");
                                
                            }
                        }
                       );
                    }
                    else {
                        $.ajax(
                         {
                             type: "POST",
                             url: "/Details/Update",
                             data: JSON.stringify(Person),
                             contentType: "application/json; charset=utf-8",
                             dataType: "json",
                             beforeSend: function () {
                                 $('#btnSubmit').attr('disabled', 'disabled');
                             },
                             success: function (data) {
                                 $('#Person')[0].reset();
                                 $('#btnSubmit').attr('disabled', false);
                                 $('#btnSubmit').val('Submit');      
                                 swal("Done!", "Data has been Updated.!", "success");
                                 ("#persondatatable").Datatable.ajax.reload();
                             }
                         })
                    }
                    $('#Person').parsley().reset();
            }

code for my datatable is

 $(document).ready(function () {
            var dataTable;
            $.ajax({
                url: "/Details/GetAllDetails",
                type: "Get",
                datatype: "json",
                success: function (data) {

                    dataTable = $("#persondatatable").DataTable({
                        select: true,
                        data: data,
                        columnDefs: [
                            {
                                "click": false, "targets": [6],
                                "width": "24%"
                            }
                        ],
                        columns: [
                            { "data": "Id", "visible": false },
                            { "data": "Firstname" },
                            { "data": "LastName" },
                            { "data": "PhoneNo" },
                            { "data": "Email" },
                            { "data": "SSN" },
                             {
                                 "data": "Id", "render": function (data) {

                                     return '<a class="btn btn-primary" style="margin-left:30px"  onclick="editdetails(' + data + ')">Edit</a>   <a class="btn btn-danger" style="margin-left:5px; margin-right:-15x" onclick="deletedetails(' + data + ')">Delete</a>'

                                 }
                             }
                        ],

                    })

                        $('#persondatatable tbody tr').on('click', function (e) {
                            var datalist;

                            var id = dataTable.row(this).data().Id;

                            $.ajax({
                                type: 'Post',
                                url: "/Details/ViewDetails/" + id + " ",
                                success: function (data) {

                                    FirstName.textContent = data[0].Firstname,
                                    LastName.textContent = data[0].LastName,
                                    Address.textContent = data[0].Address,
                                    DOB.textContent = data[0].DOBString,
                                    Email.textContent = data[0].Email,
                                    Phone.textContent = data[0].PhoneNo,
                                    SSN.textContent = data[0].SSN
                                }
                            })
                        });
                    } 
                
            });
        })

Hello,

When I try to use a link in a <td>, part of the link is used as the value in the <option> for the <select> dropdown filter. I would like to have a different link for every <td> for each <tr>. Below is my code. The dropdown filter for the Office column has the options:

Edinburgh">Edinburgh
London">London

instead of just:

Edinburgh
London

<!DOCTYPE html>
<html>
<head>
    <title>DataTable</title>

    <!-- jQuery Google CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    
    <!-- DataTable JavaScript CDN -->
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
    
    <!-- DataTable Responsive JavaScript CDN Link -->
    <script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>

    <!-- DataTable Responsive CSS CDN Link -->

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.dataTables.min.css">
</head>

<body>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>

        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td><a href="edinburghOffice.html">Edinburgh</a></td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Bill Green</td>
                <td>Programmer</td>
                <td><a href="londonOffice.html">London</a></td>
                <td>32</td>
                <td>2014/05/22</td>
                <td>$150,000</td>
            </tr>
        </tbody>
    </table>

<script>
    $(document).ready(function() {
        $('#example').DataTable( {
            initComplete: function () {
                this.api().columns().every( function () {
                    var column = this;
                    var select = $('<select><option value=""></option></select>')
                        .appendTo( $(column.footer()).empty() )
                        .on( 'change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );
     
                            column
                                .search( val ? '^'+val+'$' : '', true, false )
                                .draw();
                        } );
     
                    column.data().unique().sort().each( function ( d, j ) {
                        select.append( '<option value="'+d+'">'+d+'</option>' )
                    } );
                } );
            }
        } );
    } );
</script>

Thank you

When I set up a new DataTable with buttons and then destroy it, I get a JavaScript error. There seems to be a loop in dataTables.buttons.js that removes nodes from the collection it is iterating over. When it gets to the halfway point (e.g. index = 3 for 6 buttons) then that index is no longer valid, because 3 buttons have already been removed from the buttons collection. Here's the simple example - http://live.datatables.net/nebuxani/4/edit

Hello all,

Can Datatables handle an ID that consist of several columns? Can "idSrc" have multiple integers as an input?

Kind regards,
Florian

I'm trying to conditionally include a value in a sum for the footer if 2 other columns in the row contain values. I can't seem to work out the syntax. I'm wanting to do this in the footerCallback.

so the row has a total of 7 columns - if column 3 & 4 have values then include column 6 in the sum

Good day
I have a column that should show icons according to the values that I get from the query. The icons are only shown in the first group of data (the first 10), if I advance the other pages the icons do not appear. Only the value appears to me, that is to say 0 or 1. Some solution to my problem.

When I search in some text in global search and then search something in the column search of the returned global search results, I get the invalid parameter error. (SQLSTATE[HY093]: Invalid parameter number)

Is there any fix for that in datatables ?

This thread is for feedback of the SearchPane blog post.

SearchPane is currently "experimental", in the sense that it hasn't been released as a full extension for DataTables and all that entails, as I would like to get some early feedback on the software. Is it useful? What is it missing? I'll maintain a list of requests in this post so we don't end up with too many duplicates.

Regards,
Allan

Feature list

• Full support for Bootstrap, Foundation, Semantic UI, etc.
• Server-side processing support (loading data from the server-side)
• Have the count show two numbers - the first would be how many remain in the filtered set and the second would be how many in the table overall.
• Ordering of data to match the DataTable
• Search the search pane!
• Rebuild API method for selected columns
• Collapsible container
• Support for array based data
• Interfacing with the global search (difficult?)
• Selection options similar to Select (e.g. os and multi, etc.)
• Option to match column visibility (with or without Responsive?)