I am getting uncaught error
Though my tabs are working...

       $('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
          $($.fn.dataTable.tables(true)).DataTable()
             .columns.adjust()
             .responsive.recalc();
       });   

    });

here is the details error:

Uncaught TypeError: Cannot read property 'recalc' of undefined
at HTMLAnchorElement.<anonymous> ((index):178)
at HTMLAnchorElement.dispatch (jqueryv331.min.js:2)
at HTMLAnchorElement.y.handle (jqueryv331.min.js:2)
at Object.trigger (jqueryv331.min.js:2)
at HTMLAnchorElement.<anonymous> (jqueryv331.min.js:2)
at Function.each (jqueryv331.min.js:2)
at w.fn.init.each (jqueryv331.min.js:2)
at w.fn.init.trigger (jqueryv331.min.js:2)
at bootstrapv337.min.js:7
at HTMLDivElement.f (bootstrapv337.min.js:7)
(anonymous) @ (index):178
dispatch @ jqueryv331.min.js:2
y.handle @ jqueryv331.min.js:2
trigger @ jqueryv331.min.js:2
(anonymous) @ jqueryv331.min.js:2
each @ jqueryv331.min.js:2
each @ jqueryv331.min.js:2
trigger @ jqueryv331.min.js:2
(anonymous) @ bootstrapv337.min.js:7
f @ bootstrapv337.min.js:7
i @ jqueryv331.min.js:2
handle @ bootstrapv337.min.js:6
dispatch @ jqueryv331.min.js:2
y.handle @ jqueryv331.min.js:2
trigger @ jqueryv331.min.js:2
(anonymous) @ jqueryv331.min.js:2
each @ jqueryv331.min.js:2
each @ jqueryv331.min.js:2
trigger @ jqueryv331.min.js:2
e @ bootstrapv337.min.js:6
setTimeout (async)
a.fn.emulateTransitionEnd @ bootstrapv337.min.js:6
c.activate @ bootstrapv337.min.js:7
c.show @ bootstrapv337.min.js:7
(anonymous) @ bootstrapv337.min.js:7
each @ jqueryv331.min.js:2
each @ jqueryv331.min.js:2
b @ bootstrapv337.min.js:7
e @ bootstrapv337.min.js:7
dispatch @ jqueryv331.min.js:2
y.handle @ jqueryv331.min.js:2

Hi following is my code, trying 2 get the .row() function working but it keeps returning the not a function error. I could not find any related problems.

$(document).ready(function () {

    // Get the base table element.
    const eventTable = $('#myTable');


    // Initialize the datatable element.
    eventTable.DataTable({
        ajax: '../myjson.json',
        paging: false,
        info: false,
        language: {
            search: '',
            searchPlaceholder: 'naam evenement',
        },
        columns: [
            { "data": "link" },
            { "data": "image" },
            { "data": "event" },
            { "data": "type" },
            { "data": "organiser" },
            { "data": "date" },
            { "data": "time" },
            { "data": "venue" },
            { "data": "city" },
        ],
        columnDefs: [{
            "targets": 0,
            "visible": false,
            "searchable": false,
            "data": "link",
        }]
    });

    // Attach the search filter to the filter section.
    $('div.dataTables_filter').appendTo($('.filter'));

    // Attach the click events.
    eventTable.on('click', 'tr', function () {
        let row = $(this);
        if (row.hasClass('selected')) {
            row.removeClass('selected');
        }
        else {
            $('#myTable tr.selected').removeClass('selected');
            row.addClass('selected');
            let linkData = $('#myTable').row(row).data();
            console.log(linkData);
        }

    });

});

The range of selectable dates appears to end with 2028. I have a need to enter dates later than that. Is there a way to extend the range of choosable dates?

The views I am building with DataTables periodically need to poll the server to check for updates.

From what I can tell, DT seems to be built to preserve paging location, selections etc. only from an ajax reload (https://datatables.net/extensions/select/examples/initialisation/reload.html)

The problem is, my data source is not a simple ajax request ... I have to handle all that myself and make multiple fetches to ultimately create the data list (for example, to create an address book I have to make multiple calls to build each recipients data row).

I had hoped that the rowId function would serve a similar purpose as "track by" in Angular (and set to a unique key like the email address), but cannot see a clear way to fetch the server data myself and then locally update the data source such that DT can perform the preservation function as described in the above "reload" link.

So far I have seen only the clear>rows.add>draw sequence, but that resets the current page and user selections.

I hope I am missing something!

We are showing 10,000 rows in table in the browser.

The example provided in https://datatables.net/extensions/scroller/examples/initialisation/large_js_source.html shows we can show 50,000 records very quickly

We are using Angular with ng-repeat which takes 2 minutes to load the table. We have created 5 columns. In which one of the column has a condition options which will be enabled based on certain conditions for each rows. Whenever we add few options to the button it takes more time

example, edit, delete, view etc., in the action button which is part of a column

We observed whenever we add option along with the ng-repeat with the options takes huge time to render the table.

How to speed up the rendering time ??? Please kindly suggest.

Thanks.

<script type="text/javascript"> 
$( document ).ready(function() {
$('#employee_grid').DataTable({
         "processing": true,
        "sAjaxSource":"response.php",
         "dom": 'lBfrtip',
         "buttons": [
            {
                extend: 'collection',
                text: 'Export',
                buttons: [
                 //   'copy',
                 //   'excel',
                //    'csv',
                    'pdf',
               //    'print'
                ]
            }
        ]
 
"footerCallback": function( tfoot, data, start, end, display ) {
           var api = this.api(), data;
           var intVal = function ( i ) {
               return typeof i === 'string' ?
                   i.replace(/[\$,]/g, '')*1 :
                   typeof i === 'number' ?
                       i : 0;
           };

           var amtTotal = api
               .column( 5 )
               .data()
               .reduce( function (a, b) {
                   return intVal(a) + intVal(b);
               }, 0 );
        $(tfoot).find('th').eq(1).html(amtTotal );
      },
    
     } );
} );

</script>

EDIT: Updated to use Mardown code formatting

How do you insert a query string in the SQL select statement.
I want to get the paramter from the url and want to place it here using variable.
f.paiddate BETWEEN '".$yearURL."-01-01 00:00:00' AND '".$yearURL."-12-31 23:59:59'

URL is something like this
http://example.com?yr=2018

Пройдите 1 регистрацию, сделайте 2 действия
и получайте от 8950 рублей каждые сутки в автоматическом режиме.

Мы гарантируем:
- Первый заработок в течении 60 минут.
- Стабильный доход 24 часа в сутки.
- Поступление денег без задержек.
- Для России, стран СНГ и Европы.
- Без вложений и установки ПО.
- Специально для новичков и людей без опыта.

Ознакомтесь с условиями у нас на блоге: > https://prostowmr.blogspot.com/ <

Bonjour,

Je ne parviens pas à intégrer ce json dans datatables. J'ai essayé toute les examples relatifs aux objects json, api rest, sans succès.
Je récupère bien le fichier, mais coince sur son traitement pour l'inclusion des datas dans les colonnes.
Doit-il être parser avant cette inclusion ?

Merci par avance pour votre aide

Fichier json.
{
"id": 2003,
"area": {
"id": 2163,
"name": "Netherlands"
},
"name": "Eredivisie",
"code": null,
"plan": "TIER_ONE",
"currentSeason": {
"id": 4,
"startDate": "2017-08-11T19:00:00Z",
"endDate": "2018-05-20T16:45:00Z",
"currentMatchday": 34
},
"seasons": [
{
"id": 4,
"startDate": "2017-08-11T19:00:00Z",
"endDate": "2018-05-20T16:45:00Z",
"currentMatchday": 34
}
],
"lastUpdated": "2018-06-05T00:17:50Z"
}

@allan,

I guess this is a highly technical question and only you could help me out with this.

I selected 33 records for multi-row editing today and noticed that it didn't really work. I entered the same values for all of the 33 records selected. And this is what happened:
Online 28 records were sent to the server. The 28th record even with incomplete data. The other 5 records weren't sent to the server at all.
I thought there might have been something wrong with that 28th record and selected 32 records excluding this one record. Same result: 28 records sent to the server. The 28th record (this time a different one) incomplete.

I selected 25 records including the two "problem" records from above: Everything worked fine!

I also noticed: When I selected 33 records only the 28 records that were sent to the server were still selected when I closed the Editor form. The other records were mysteriously deselected.

Is there a size limit for multi-row editing? Any idea what could cause this problem?

I'd be really grateful for some hints on what to do about this. Right now I limited selection to 20 records to avoid the problem.

Thanks for your help
Roland

I have a setup where my intention is for the user to click on a row in the main table. Basically selecting the entity. This opens a child row for buttons that control attribute selections. Each button opens a .div that will display details and another table for records for that particular attribute. The tables for the attributes come in fine in the child row and it looks like all the Datatables searching, sorting and paging comes in fine. What I am losing is the scrolling so the table is just extending out as far as it needs too. The sorting looks to just disappear.

So is there a way for tables inside child row to scrolling or is that no supported? Thanks.

Hello everyone, it turns out that I have a table that I call from a database and this is in a table, I call that through a json, everything turns out well, I could even resolve to upload the photos, when I went to the next record or click on the next page do not upload the photos of the other records this is what I do, please I have very bad English, sorry

/=============================================
LOAD TABLE
=============================================/
$(document).ready(function() {
var table = $('.tablaUsuarios').DataTable( {
"ajax": "ajax/datatable-usuarios.ajax.php",
"columnDefs": [

    {
        "targets": -5,
        "data": null,
        "defaultContent": '<img class="img-thumbnail imgTabla" width="40px">'
    },

    {
        "targets": -1,
        "data": null,
        "defaultContent": '<div class="btn-group">  <button class="btn btn-warning btnEditarUsuario" idUsuario="" data- toggle="modal" data-target="#modalEditarUsuario"><i class="fa fa-pencil"></i></button>  <button class="btn btn-danger btnEliminarUsuario" idUsuario=""><i class="fa fa-times"></i></button> </div>'
    }

  ]

})

/=============================================
LOAD IMAGE TABLE - WORKING
=============================================/
setTimeout(function(){

var imgTabla = $(".imgTabla");
//console.log("imgTabla", imgTabla);

for(var i = 0; i < imgTabla.length; i ++){

var data = $('.tablaUsuarios').DataTable().row($(imgTabla[i]).parents("tr")).data();
$(imgTabla[i]).attr("src", data[3]); 

}

},300)
/=============================================
LOAD IMAGE PAGINATION NO WORKING
=============================================/

$(".dataTables_paginate")click(function(){

var imgTabla = $(".imgTabla");
//console.log("imgTabla", imgTabla);

for(var i = 0; i < imgTabla.length; i ++){

//var data = $table.row( $(imgTabla[i]).parents("tr")).data();
var data = $('.tablaUsuarios').DataTable().row($(imgTabla[i]).parents("tr")).data();
//$('#myTable').DataTable().row(row).data();
  //console.log("data", data);

$(imgTabla[i]).attr("src", data[3]); 

}

})

In 2017 i ask about how to use DataTables and Editor with another database

Please help me is there an exemple ? maybe using without library and post json data ?

https://datatables.net/forums/discussion/40174/net-datatables-how-to-add-support-for-custom-database1.

Dear community,

i read that there are many WYSIWYG editors in filed type section. Is there a working example to one of them and look at this and the implementation for php and ajax?

regards
Simon

I need to create a custom function for a select filter using yadcf. I have date fields in column with the format 11/19/2018. I need to create a select filter with the values: last 7 days, last 15 days, next 7 days, next 15 days. I need help creating this. I have this so far.

{
    column_number : 0,
    filter_container_id: 'external_filter_container_0',
    filter_type: 'custom_func',
    custom_func: myCustomFilterFunction,
    data: [{ value: 'last 7 days', label: 'last 7 days'}, { value: 'last 15 days', label: 'last15 days'}, { 

value: 'next 7 days', label: 'next 7 days'}, { value: 'next 15 days', label: 'next 15 days'}],
    filter_default_label: "Custom func filter"},

function myCustomFilterFunction(filterVal, columnVal) {
    var date = currentdate
    var cutofftime = parseDate(aData[0]);

switch (filterVal) {
        case 'last 7 days':
            found = columnVal.search date through -7
            break;

Hi,

I would like to reset the order of the columns as started
I try to use : fnSortNeutral

But i can't, I don't know why

`$.extend( $.fn.dataTable.defaults, {

    "dom": '<"top"AfB>rt<"bottom"ip><"clear">',

    "language": {
        "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/French.json",
        "decimal": ",",
        "thousands": ".",
        "language": {
            alphabetSearch: {
                alphabet: '#ABCDEFGHIJKLMNOPQRSTUVWXYZ',
                infoDisplay: 'Afficher :',
                infoAll: 'Tous'
            }
        }
    },

    "paging": true,
    "pagingType": "full_numbers",

    "ordering": true,

    "searching": true,

    "info": false,

    "pageLength": 25,

    fixedHeader: {
        header: true,
        footer: true
    },

    buttons: [
        {
            text: 'Ordre par défaut',
            action: function ( e, dt, node, config ) {
                dt.table().fnSortNeutral([]);
            }
        }
    ]

} ); `

thanks

I have multiple Jquery Datatables (number of table is dynamic). I have created multiple tables with the help of

$(document).ready(function() {
$('table.display').DataTable();
} );

I want to add select and deselect all button which will select and deselect only visible rows.

What code should I add so that these buttons are added into all tables.

thanks

I have multiple Jquery Datatables (number of table is dynamic). I have created multiple tables with the help of

$(document).ready(function() {
    $('table.display').DataTable();
} );

I want to add select and deselect all button which will select and deselect only visible rows.

What code should I add so that these buttons are added into all tables.

thanks

I'm using DataTables 1.10.5. My table uses server side processing via ajax.

        $('#' + id).dataTable({
          processing: true,
          serverSide: true,
          ajax: 'server-side-php-script-url',
          "pagingType": "simple_incremental_bootstrap"
        });

Everything will work properly if I send 'recordsTotal' in the server response. But I don't want to count the total entries because of performance issues. So I tried to use the pagination plugin simple_incremental_bootstrap. However it is not working as expected. The next button always return the first page itself. If I give 'recordsTotal' in server response this plugin will work properly. I found out that If we don't give 'recordsTotal', the 'start' param sent by datatable to server side script is always 0. So my server side script will always return the first page.

According to this discussion, server side processing without calculating total count is not possible because “DataTables uses the record count that is passed back to it to deal with the paging controls”. The suggested workaround is “So the display records are needed, but it would be possible to just pass back a static number (like 1'000'000 or whatever) which would make DataTables think there are a million rows. You could hide the information element if this information is totally bogus!”

I wonder if anybody have a solution for this. Basically I want to have a simple pagination in my datatable with ajax without sending total count from server.

Hi!

I was wondering if there's any queuing mechanism added to the Editor? I've read several post back from 2015/2016 that it would be added to the future and I'll be needing it for editor.create().

I'm reading text files into an array which have 1000+ rows and columns. I've experienced that it's not possible to loop through it like so:
``` function importFile (ged) {

    for (let j= 0; j< ged.length; j++) {
        editorVulnerability.create(false)
            .set('testtypeid', ged[j][0])
            .set('toolid', ged[j][1])
            .set('outputtool', ged[j][2])
            .set('scanid', ged[j][3])
            .set('fp', ged[j][4])
            .set('cvss_temp', ged[j][5])
            .set('cvss_env', ged[j][6])
            .set('cvss_base_new', ged[j][7])
            .set('vuln_not_in_report', ged[j][8])
            .set('ip', ged[j][9])
            .set('mac', ged[j][10])
            .set('netbiosname', ged[j][11])
            .set('os', ged[j][12])
            .set('start', ged[j][13])
            .set('stop', ged[j][14])
            .set('plugin_id', ged[j][15])
            .set('plugin_name', ged[j][16])
            .set('port', ged[j][17])
            .set('protocol', ged[j][18])
            .set('cve', ged[j][19])
            .set('cvss_base_score', ged[j][20])
            .set('service_name', ged[j][21])
            .set('description', ged[j][22])
            .set('solution', ged[j][23])
            .submit();
    } ```