database Year Day Month but visual show Day Month Year

i been using datatables, but i want on my website in the backend, to show me day month year in ascend/descend way
when i do that however in my database it takes the day first so when i use desc asc it work not correct, i want in the database to take year only but it needs to display day month year visual on my backend.

is this possible? maybe can in the database have it as year day month and on display visual in backend as day month year?

maybe some code like $date y-d-m convert/parse to d-m-y
https://www.youtube.com/watch?v=r_JW1PDZlZo i seen this

I get this error:

jquery.dataTables.js:112 Uncaught TypeError: Cannot set property '$' of undefined
at DataTable (jquery.dataTables.js:112)
at eval (data.js:2)
at Object../js/data.js (data.bundle.js:164)
at webpack_require (data.bundle.js:79)
at checkDeferredModules (data.bundle.js:46)
at data.bundle.js:152
at data.bundle.js:155

Here's my code:

var $ = require('jquery');
var dt = require('datatables.net')();

I've also tried

var $ = require('jquery');
var dt = require('datatables.net')(window, $);

And my package.json dependencies:

"dependencies": {
"datatables.net": "^1.10.19",
"jquery": "^3.3.1"
}

No clue what I'm doing wrong here. I am loading the CSS directly into the page. I'm not loading the CSS via webpack.

Hi guys, I have DataTables table with row details which are opening by clicking on row. The row details are displayed in 3 different languages which are selected by checkbox. When the row is clicked, the language is send to details.php script (langy:chLanguage) which returns json values for this selected language.

Initialy the language is set to chDe and everything is working fine until I click on another language. When the language is changed to EN or RU, or even back to DE, the returned json is empty.

Index.php:

<h5>Language</h5>

  <input type="checkbox" id="chDe" name="languages" checked>DE
  <input type="checkbox" id="chEn" name="languages">EN
  <input type="checkbox" id="chRu" name="languages">RU

<script>

var chLanguage = "chDe";
$('input[name=languages]').click(function() {
        $('input[name="' + this.name + '"]').not(this).prop('checked', false);
        chLanguage = [];
        $('input[name=languages]:checked').each(function() {
                chLanguage.push($(this).attr('id'));
        });
        if (chLanguage == '') {
                chLanguage = 5;
        }
        $('#example').DataTable().ajax.reload();
});


function format ( rowData, row, $chLanguage ) {
// FOLLOWING CONSOLE.LOG RETURNS THE ACTUALLY SELECTED LANGUAGE CORRECTLY
        console.log("chLanguage in format function: " + chLanguage);
    var div = $('<div/>')
        .addClass( 'loading slider' )
    $.ajax( {
        url: 'scripts/details.php',
        data: {
            name: rowData[0],
            langy: chLanguage,
        },
        dataType: 'json',
        type: 'post',
        success: function ( json ) {
// FOLLOWING CONSOLE.LOG RETURNS [Object object] unless the language is changed, then it returns nothing
            console.log("json: " + json);
            var childTable = '<div id="rowdetails" class="slidera"><ul class="slider">';
            childTable = childTable.concat(
                '<div class="row rdstyle">' +
                   '<table class="detailstable detailserrors">' +
                      '<tr><td><b>Error class:</b></td><td>' + json[0].ERRTRIEDA + '</td></tr>' +
                      '<tr><td><b>Error group:</b></td><td>' + json[0].ERRSKUPINA + '</td></tr>' +
                      '<tr><td><b>Error:</b></td><td>' + json[0].ERRPOPIS + '</td></tr>' +
                    '</table>' +
                '</div>
  );
 });
}

details.php:

$language = $_POST['langy'];

if ($language == 'chDe' ) {
        $setLang = 'DE';
}else if($language == 'chEn') {
        $setLang = 'EN';
} else{$setLang = 'RU';}

and $setLang is used in SQL query to filter data by language.

I hope I'm not far away from working solution, because it's working already, just the language switch don't work. Sorry not to attach working sample. I don't know how to implement all these parts including mysql db and several differenct php scripts
Thank you.

A scenario being asked for is to have a range filter within a header of a given column while the column visibility is available to show or hide any of the columns in the table. The issue I am running into is that if a column is hidden during the initialization, the event handler doesn't appear to be getting registered and thus the filtering isn't working. My general pseudo-code and reasoning is this:

1. Create two thead rows one for filtering and one for sorting
2. Add a single input for string filters, and two inputs for numeric filters (in order to do range filtering, this will expand once I get numbers working to include dates).
3. Initialize Datatable. Note that this must be done after adding the inputs in step 2 above because if I set a column to hidden by default through initialization, the input never gets created.
4. Add event handler to the filtering inputs. I can't do this in step 2 because I need access to an instance of the initializaed table in order to apply the filter such as **table**.column(1).search(inputValue).draw();

I have set up an example of what I'm trying to do here. In the example, I have hidden salary by default. When it is shown it has the range filter inputs, but the event handler does not work. If you switch the visible flag in the column definition to true, the range filtering on salary works fine, but hiding columns by default is a business requirement we must provide.

My question is, is there a different approach to this problem? I wasn't able to find an oncolumnshown event or something similar in order to wireup the event in the way that I need and no matter the order I perform the steps above, I always come across some issue that prevents me from accomplishing this.

Good morning, in excel export customize for example I can get the value of the specific cell with the function:

$('is t', this).text();

Is it possible to get the value of the background colour (define with html tag in <td>) of a specific cell?

Thank you if you can help me

Tito

Hi Allen
First, I am sorry for my poor english.
I have a Problem, wenn I use responsive PlugIn and renderer listHiddenNodes for two tables.

http://live.datatables.net/hiqarowi/1/edit

you can make the window smaller and open the first row in first table.
And then you can open the first row in second table
but the sub-column in first Table disappears.
now you can open and close the details row and resize the window.
the Result ist totally wrong

can you take a look at it.
thank you

The API provides callbacks for successful AJAX calls but what about when something goes wrong? For example, if the user's session has been killed, the REST call might return a 403. How do I deal with that? For example, ajax.reload only provides a success callback as far as I can tell.

I need to implement functionality where child row will slide and open on the top of the parent row instead of bottom. Could anyone please help.
https://jsfiddle.net/nnb97rh9/3/

I have requirement where multiple columns are clickable. So when you click on one column, nested child row is open and one table is added. When you click on another column, new table should be added leaving the previous table open. I am not able to achieve this. I have attached jsfiddle.
When i click on + icon, nested child row table is open.. When I click on salary column, another table should open underneath the nested child table , but its closing the previous table and opening only the second one .

https://jsfiddle.net/noszdw0c/21/

I have my project in this way : https://jsfiddle.net/Eufragio/u342qgoz/1/

My problem is when exporting to excel, that the results bring me this way:

The result that I hope is this:

there are no id's in the labels that wrap the Search input box making them difficult to target and remove.

the specific html is as follows:

<label>Search:<input type="search" class="" placeholder="Search Valley Members..." aria-controls="VOTERdirectory"></label>

I want to remove the label tags or leave them but remove the word Search:

I've attempted to target these labels and remove them like so:

    var $label = document.getElementsByTagName("INPUT")[0].closest("label");
    $label.replaceWith(document.getElementsByTagName("INPUT")[0]);

Although this works, it doesn't work in all browsers.

I can't stand hacking core files as this makes maintenance difficult.

Any suggestions on how to remove this would be greatly appreciated.

If I might make a suggestion for future releases:

have unique id's for all elements, and don't wrap elements that don't need to be wrapped.

e.g. change:

<label>Search:<input type="search"></label>

to

<label id="label_001">Search:</label><input type="search">

so that once they are identified they can be targeted and removed without removing the inner elements.

maybe I'm missing the forest for the trees.

Any suggestions?

I have my columns for buttons exports defined as arrays of pointers to the columns. These are combinations of visible and hidden columns. I'd like to be able to toggle a colvisGroup and in doing so, also remove those columns from being included in the export.

So I figured out how to use an action for the button on the colvisgroup to modify an array I'm using to store the column pointers.

{
                        extend: 'colvisGroup',
                        text: 'Volume',
                        hide: [18,19,20,21],
                        action: function(e, dt, node, config) {
                            var hidearray = [18,19,20,21];
                            agentExportCSV = agentExportCSV.filter(item => !hidearray.includes(item));
                            $.fn.dataTable.ext.buttons.colvisGroup.action.call(this, e, dt, node, config);
                        }
                    }

This correctly removes the columns it's hiding from the array and still executes the intended hiding action for the column group. However, no matter what I try for a callback on the columns definition on the CSV export, it seems to store that on initialization of dataTables rather than when executed.

{
                text: 'CSV',
                extend: 'csvHtml5',
                exportOptions: {
                    columns: function() {
                        return getExportColumns('agentExportCSV');
                    },
                    modifier: {
                        page: 'current'
                    }
                },
                filename: function() {
                    return getLocationName();
                }
            }

I've confirmed the columns array it's returning to the exportOptions columns is the new modified version but it always exports the full columns. Any way I get achieve what I need?

-

Below is the data I'm trying to display in a datatable. As you can see permitbrands is a json array and i want to display it in one column. If it was json object it would have been easier but this is json array.

{
 id: 1,
 total_cases: 13,
 permitbrands: [
       {
         id: 1,
         br_name: "Apple",
         br_no: "12",
         permit_id: 1,
       },
       {
         id: 2,
         br_name: "Mango",
         br_no: "36", 
         permit_id: 1,
        }
  ],
}

Below is my code for datatable column:

$(document).ready( function () {
    table = $('.table').DataTable({
        processing: true,
        serverSide: true,
        paging:true,
        ajax : '/permits/search',
        columns: [
               { data: 'total_cases', name: 'total_cases'},
               {
                data: 'permitbrands[,].br_name',
               },
        ],
    });

});

But The result shown is Apple,Mango.

I want to show the value in column as Apple 12 , Mango 36.

How can this be done? Can anyone please suggest me a solution.?

I tried looping it but it gets looped twice.

{
    data: 'permitbrands[]',
          render: function ( data , row ) {
                  var output='';
                   $.each(data, function(index,item) {
                    alert(index);
                    output+= data[index].br_no+' '+data[index].br_name;
                  });
                 return output;
               }
    },

The result i get is like this:

12 12 Apple , 36 36 Mango.

I dont know why this happens. But looping shows me alert 4 times instead of 2.
What should i do?

Help me to resolve this problem. Individual Column Search not work for me

var table = $("#table_unit").DataTable({

            processing: true,
            serverSide: true,
            ajax: {"url": "dataunit/get_data_json", "type": "POST"},
            columns: [
                  {"data": "unit_id"},
                  {"data": "unit_nama"},
                  {"data": "unit_kode"},
                  {"data": "unit_induk"},
                  {"data": "aksi"},
                  //{"data": "aksi"}
            ],
            order: [[1, 'asc']],
            //language: {"url": "//cdn.datatables.net/plug-ins/1.10.19/i18n/Indonesian.json"},
            //Penomoran Baris
            columnDefs: 
            [
            {
                targets : 0,
                orderable : false,
                render : function (data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            {
                targets : 4,
                orderable : false,
            }
            ],

            dom: '<"datatable-header"flB><"datatable-scroll-wrap"t><"datatable-footer"ip>',
            buttons: {            
                dom: {
                    button: {
                        className: 'btn btn-light'
                    }
                },
                buttons: [
                    'copyHtml5',
                    'excelHtml5',
                    'csvHtml5',
                    'pdfHtml5',
                    {
                        extend: 'print',
                        text: '<i class="icon-printer mr-2"></i> Print table',
                        className: 'btn btn-light'
                    }
                ]
            },
            initComplete: function () {
                this.api().columns().every(function() {
                    var column = this;
                    var select = $('<select class="form-control filter-select" data-placeholder="Filter"><option value=""></option></select>')
                        .appendTo($(column.footer()).not(':last-child').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.replace(/<(?:.|\n)*?>/gm, '')+'">'+d.replace(/<(?:.|\n)*?>/gm, '')+'</option>')
                    });
                });
            }
        });

Hi
I have a problem with filtering per one column. After I filter, one of my columns is hidden and "control word_wrap" icon is displayed
I would appreciate your quick answer

Hi, I need a help please. I am not getting sort icons displayed. Please assist. When I used this link <link rel="stylesheet" href="css/dataTables.bootstrap.min.css"> in the head section I am getting square images as sorting icons as per attached image. But when I use <link rel="stylesheet" href="css/dataTables.bootstrap.min.css"> the sorting icons disappear. Please assist. 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Data Table</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="css/dataTables.bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

</head>
<body>

</body>
</html>

I have successfully gotten ColumnFilterWidgets working :

$('#datatables').DataTable({
    responsive: true,
    "sDom": 'W<"clear">lfrtip',
    buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
    searching: true,
    language: {search: "_INPUT_", searchPlaceholder: "Search records",},
    "ajax": {
        "url": urlx,
        "type": "POST",
        "data": {province:province, district:district, zone:zone, school:school}
    },
    deferRender: true,
    scrollY: 200,
    scrollCollapse: true,
    scroller: true,
    initComplete: function () {
        this.api().row( 1000 ).scrollTo();
    },
    "oColumnFilterWidgets": {
        "aiExclude": [ 0,1,2,4,6,10,11,12,13,14,15 ]
    }
});

But each time I initialize it, my Datatables buttons (CSV, Excel, PDF) disappear. When i get the buttons working, the wiltering stops working:

$('#datatables').DataTable({
    responsive: true,
    dom: 'Bfrtip',
    buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
    searching: true,
    language: {search: "_INPUT_", searchPlaceholder: "Search records",},
    "ajax": {
        "url": urlx,
        "type": "POST",
        "data": {province:province, district:district, zone:zone, school:school}
    },
    deferRender: true,
    scrollY: 200,
    scrollCollapse: true,
    scroller: true,
    initComplete: function () {
        this.api().row( 1000 ).scrollTo();
    },
    "oColumnFilterWidgets": {
        "aiExclude": [ 0,1,2,4,6,10,11,12,13,14,15 ]
    }
});

I need both the filtering of ColumnFilterWidgets and the Datatables Buttons on my application. Anyone know how to do this?

  if (e.keyCode == 40){ //arrow down
              
             table.$('tr.selected').removeClass('selected');
            tr.next().addClass('selected');
            tr = table.$('tr.selected');
              
            }
            if (e.keyCode == 38){ //arrow up
              
             table.$('tr.selected').removeClass('selected');
               tr.prev().addClass('selected');
               tr = table.$('tr.selected');
            
            }
            data = table.row('tr.selected').data();

This leads to an issue with chromium which can be reproduced in the following manner:

• Open a table using colReorder
• Left click on any column header to show the context menu
• Press escape to exit out of the context menu.
• You are now stuck with a dragable column in your cursor.

The fix is as simple as only allowing fro drag and drop events when a left mouse button click is registered. Code change. A more complex fix might be necessary if being able to initiate drag and drop events with any mouse button click is deemed a feature and not a bug.

Best Regards,
Pedro