Every time the Tables is loaded a number, usually a Zero, appears what it seem a last row, and when I click on the table the number disappear
I have check with Google chrome Dev tools and I can see that this DIV appears:

<div class="dts_label">0</div>

and once i click on any part of the table, it changes to :

<div class="dts_label" style="display: none;">0</div>.

I understand the display:none, but why it is appearing in the first place?

this is my code

$("#TableScroll").DataTable( {
    scrollY: '500px',
    scroller: true,
    ordering: true,
    order: [],
    paging: true,
    dom: 't',
    bInfo: false,
});

I am using jquery-3.5.1.min.js, datatables.min.js (version 1.10.21) and dataTables.scroller.min.js (version 2.0.2)

Any help would be greatly appreciated

OnKeyUp Search and pagination is extremely fast here https://usedlens.co.uk using MariaDB

But instead of a straight 55,000 records I'm going to have 1,000,000 records and join to another table with 50,000,000 records.

I've only just started this expansion, I'm already noticing performance issues.

I have three queries

1. Get results limit 10/25/100 - scaling well so far
2. Get count of filter results - gets faster as search refines, but not great
3. Get count of all results (a large subset of the table that the user is searching) - doesn't scale well

I wonder how people have handled large data sets / pagination and record counts.

I see the example on the site has 5,000,000 records with scrolling
https://datatables.net/extensions/scroller/examples/initialisation/server-side_processing.html

I am using datatables. I have collection with models as rowViews in it. How should i pass the collection to datatables, so that the data gets rendered in the table

Hi we are facing page unresponsive error in google chrome while downloading in excel or any other mode where there are 40K+ rows and 30+ columns in the table. let me know how to handle this.
we are facing this in other browsers also

I don't want to allow users to close the editor by clicking the background (grey area) or the 'x' in the upper right of the editor window. I think the answer is somewhere in this code: https://editor.datatables.net/examples/api/confirmClose.html

but of course there would be no blur if they don't make any changes.

        var PasswordChangeEditor = new $.fn.dataTable.Editor({
            ajax: 'api/Staff',
            table: '#passChange',
            fields: [
                { label: "New Password", name: "Password" }

            ]
        });

        PasswordChangeEditor.add([
            {
                label: "Type password again:",
                name: "confirmPassword"
            }
        ]);

        var PasswordChangeTable = $('#passChange').DataTable({
            ajax: 'api/Staff',
            columns: [
                { data: "Password" }
            ]
        });

        PasswordChangeEditor.on('preSubmit', function (e, data, action) {
            var password = PasswordChangeEditor.get('Password');
            var password2 = PasswordChangeEditor.get('confirmPassword');
            if (password != password2) {
                alert("Passwords don't match. Please re-type the password.");
                return false;
            } else {
                $.ajax({
                    url: "api/ChangePass?login=" + userNameCookie + '&isReset=0&password=' + password,
                    async: false,
                    type: "POST",
                    data: data
                });
                PasswordChangeEditor.close();
                return false;
            }
        });

I open the editor after an ajax call

                            if (response.Table[0].PasswordReset == 1) {
                                PasswordChangeEditor
                                    .create()
                                    .title('Change Password')
                                    .display(true)
                                    .buttons('Save')
                                ;
                            }

responsive.hasHidden() only returns false if
- you have no columns hidden by responsive AND
- the table would not have hidden columns if column visibility was set to true for all columns.

In other words it returns false if your table has few columns and regardless of colvis has no columns hidden by responsive.

But if you hide a few columns with the colvis button so that nothing is hidden by responsive ( but would have been hidden if nothing was hidden by colvis ): It does not work. It will return true.

responsive.hasHidden() seems to "count" the columns hidden by colvis as well which it shouldn't. Right now it is not usable for me because I always have at least one column hidden by colvis!

OnKeyUp Search and pagination is extremely fast here https://usedlens.co.uk using MariaDB

But instead of a straight 55,000 records I'm going to have 1,000,000 records and join to another table with 50,000,000 records.

I've only just started this expansion, I'm already noticing performance issues.

I have three queries

1. Get results limit 10/25/100 - scaling well so far
2. Get count of filter results - gets faster as search refines, but not great
3. Get count of all results (a large subset of the table that the user is searching) - doesn't scale well

I wonder how people have handled large data sets / pagination and record counts.

I see the example on the site has 5,000,000 records with scrolling
https://datatables.net/extensions/scroller/examples/initialisation/server-side_processing.html

I have two tables that share the same column headers and the same row headers. The only thing that differs is the values inside the cells. (They are smaller for the second table). Otherwise these tables are identical. So they take in two different datasets.

I am using searchpanes button and colvis button to filter on the first table. I want any filtering on the first table to also happen to the second table. How can I accomplish this?

It doesn't seem like any others have posed this question. I know you can use 'table' to instantiate two tables as once. However, that seems to take only the first table's data into account (data:), and searchpanes and colvis don't occur cause changes to happen to the second table.

I have also tried to add the searchpanes and colvis buttons to the advanced init defaults, to no avail.

Hi,

I get an error when I use the date format as follows.

Unable to cast value to be DateTime

     .Field(new Field("Vessels.ETA")
                       .Validator(Validation.DateFormat("Y-m-d"))
                       .GetFormatter(Format.DateSqlToFormat("Y-m-d"))
                       .SetFormatter(Format.DateFormatToSql("Y-m-d"))
                       )

My sql date format is like this.

2020-03-10 00:00:00.000

Thanks..

Howdy folks!

My company is considering to move over from MVC to Core 2.1 Razor Pages, I have been tasked to see if there will be any hick ups during this transition. We've made use of Datatables in previous applications however I cannot find anything with regards to how to get it to work with Razor pages? Can someone please point me in the right direction?

Many Thanks.

I have fully functioning server side webpage working that inserts, updates, deletes into SQL perfectly.

The only issue I am having is being able to grey out / make certain fields uneditable when the edit button is clicked.
Currently my SQL is ignoring the fields that I don't want to allow to be updated but it still allows you to edit them in the form.

The fields need to be able to be typed into and populated when New is clicked in order to insert the entry but when edit is clicked for any existing field I need it so 2 or 3 fields can't be typed into and are locked to prevent confusion.

In particular, would like to see {string}:name selector allowed. Alternatively, allow 'order' option directly under the columns option, with 'asc', 'desc' as value (assume current index).

I've removed a hidden column from my home-grown underlying framework, and this has broken all of the datatable options which have order option based on index.

Hi there,

First of all, thank you very much for this valuable plugin. It's just amazing how DataTables has changed my developer's life.

I'm using DataTables with the FixedColumn feature for several tables and everything is working fine but (because it's never as easy as that, you know...) I've a request to duplicate the bottom scrollbar at the top of the table. The goal is to avoid scrolling to then move to the cells at the right of the table.

I already checked plugins like 'doubleScrollbar', eso but I didn't achieve to get a successfull configuration. I already spent hours on it. Can you please help me?

If it can help, here's is my DataTable configuration to use FixedColumn.

          datatable1 = $('#@(Model.Print ? "fake" : ReportGuid)').DataTable({
                 language: {
                    processing: '@Html.Translate("Processing...")',
                    search: '@Html.Translate("Search: ")',
                    lengthMenu: '@Html.Translate("Show _MENU_ entries")',
                    info: '@Html.Translate("Show _START_ to _END_ of _TOTAL_ entries")',
                    infoEmpty: '@Html.Translate("Show 0 to 0 of 0 entries ")',
                    infoFiltered: '@Html.Translate("(Filter from _MAX_ entries)")',
                    infoPostFix: "",
                    loadingRecords: '@Html.Translate("Loading...")',
                    zeroRecords: '@Html.Translate("No record to display")',
                    emptyTable: '@Html.Translate("No data available in the table")',
                    paginate: {
                        first: '@Html.Translate("First")',
                        previous: '@Html.Translate("Previous")',
                        next: '@Html.Translate("Next")',
                        last: '@Html.Translate("Last")'
                    },
                    aria: {
                        sortAscending: '@Html.Translate(": enable to sort the column ascending")',
                        sortDescending: '@Html.Translate(": enable to sort the column descending")'
                      },

                    buttons: {
                        copyTitle: '@Html.Translate("Copy to clipboard")',
                        copyKeys: '@Html.Translate("Appuyez sur <i>ctrl</i> ou <i>\u2318</i> + <i>C</i> pour copier les données du tableau à votre presse-papiers. <br><br>Pour annuler, cliquez sur ce message ou appuyez sur Echap.")',
                        copySuccess: {
                            _: '@Html.Translate("%d rows copied")',
                            1: '@Html.Translate("1 row copied")'
                        }
                    }
                },
                  dom: '<"html5buttons"B>lTfgtpi',
                  scrollX: true,
                  scrollY: "75vh",
                  scrollCollapse: true,
                  fixedColumns: {
                      leftColumns: 2
                  },
                ordering: false,
                pageLength: 1000,
                lengthChange: false,
                buttons: [
                    { extend: 'excel', title: exportFilename, exportOptions: { format: { body: function (data, row, column, node) { return column >= 1 ? node.textContent.replace(/[€.]/g, '').replace(/[,]/g, '.') : node.textContent; } } } }
                ]
             });

Thank you,
Nicolas.

i have this colomns configuration
columns: [
{data: 'departments.name'},
{data: 'phases.name'},
{data: 'date_start'},
{data: 'date_close'},
{data: 'users.name'},
{data: 'debtors.name'},
{data: 'states.name'}
],

and i need to do somthing like

          if({data:'states.name' === 'Aproved' }){
              {data:'states.name', className:'aproved'}
          }

How can i change the className of my column with if statement, somebody can help?? thanks...

Hi,

There is no change in the database when I check the checkbox.

Controller: .Field(new Field("Offer"))

      {
                    label: "Offer",
                    name: "Offer",
                    type: "checkbox",
                     separator: "|",
                   options: [
                 { label: "", value: "1" }
                    ],
          },

   { 
                    data: "Offer",
                    className: 'text-left font-bold',
                    title: 'Offer',
                    render: function (data, type, row) {
             if ( type === 'display' ) {
                    return '<input type="checkbox" class="editor-offer">';
                }
                return data;

                    }

$('#' + tableId).on('change', 'input.editor-offer', function () {

    editor
        .edit($(this).closest('tr'), false)
        .set('Offer', $(this).prop('checked') ? 1 : 0)
        .submit();
} );

Link to test case: https://codepen.io/rickshinova/pen/XWdWeoY
Description of problem: Hi everyone! I am trying to export datatables to excel with necessary formatting (merged cells, custom background...). The problem is that if table has a lot of columns, then merging (custom written function to merge cells) does not work even though it works perfectly with less columns.
Maybe anyone is more familiar with this library and can give an advice on why larger amount of columns results in worse formatting (maybe 'customize' function has any limitations?)
Link to codepen is attached.
Thank you in advance!

Hello there,
Can anyone tell me how to add a new row in a current datatable without page refresh after a successful AJAX call. This is my code

$(document).ready(()=>{
$.ajax({
    url: 'http://localhost:3000/api/post/getUserData',
    method: 'post',
    dataType: 'json',
    data: {
        "email": window.email,
        "token": window.token
    },
    success: function(data){
        let table = $('#datatable').dataTable({
        data: data,
        "autoWidth": true,
        columns: [
                {'data': 'id'},
                {'data': 'main'},
                {'data': 'shrinked'},
                {'data': 'clicks'},
                {"data": "id",
                    "render": function ( data, type, row, meta ) {
                        return `<button data-id=${data} onclick="disableThis(event)" class="btn btn-warning">Disable</button>`
                    }
                },
                {"data": "id",
                    "render": function ( data, type, row, meta ) {
                        return `<button data-id=${data} onclick="deleteThis(event)" class="btn btn-danger">Delete</button>`
                    }
                }
            ]
        })
//function to add new Row inside Datatable
        $(function () {
            $('#form').bind('submit', function (event) {
                // using this page stop being refreshing
                event.preventDefault();

                $.ajax({
                    type: 'POST',
                    url: 'http://localhost:3000/userShrink',
                    data: {
                        fullUrl: $('#Url').val(),
                        email: window.email,
                        token: window.token
                    },
                    success: function () {
                        $.ajax({
                            url: 'http://localhost:3000/api/post/getUserData',
                            method: 'post',
                            dataType: 'json',
                            data: {
                                "email": window.email,
                                "token": window.token
                            },
                            success: function(data){
                                table
                                    .row.add([
                                        data.id,
                                        data.main,
                                        data.shrinked,
                                        data.clicks,
                                        `<button data-id=${data} onclick="disableThis(event)" class="btn btn-warning">Disable</button>`,
                                        `<button data-id=${data} onclick="deleteThis(event)" class="btn btn-danger">Delete</button>`
                                    ])
                                    .draw()
                            }
                        })
                    }
                });
            });
        });
    }
})
})





function deleteThis(e){
console.log(e.target.getAttribute('data-id'))
}

function disableThis(e){
console.log(e.target.getAttribute('data-id'))
}

I have tried many different methods, including clear() before adding new rows , but nothing seems to work. I just wanna add a new row without page reload when data is returned in the very last success call.

P.S: Data is being successfully inserted in the DB and is also shown in Datatables as a new row when page is reloaded by the user, i just wanna do this without page reload.

Help is really appreciated, i am still stuck in this one Thank you.

I'm using Editor in my app. In the app, users define a set of stock buy & sell rules using six dependent select2 select boxes. Presently, I'm using initCreate to add a new rule (row) to the table. However, it is paramount that when adding a new row that it be part of a group of rules as shown on the attached screen shot. Is there a way to customize initCreate such that a new row is always added to the row just above the row containing the new row button (+)? Do you have access to an example?

I am using Editor with inline edit with the help of KeyTable. It is working well in case of success from the server, but in case of error, I get error in js, picture is attached.

and Everything stop working after this.

My code for the keyTable is: keys: { columns: notEditableColumns, keys: [9], editor: editor, editOnFocus: true }, select: { style: 'os', selector: 'td:first-child' },

I use Symfony with webpack and faced with problem when add new packeg datatables. I read many post about problem exclude this library and only one way give me successful resul wihout error by import

package.json

{
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.8.2",
    "@symfony/webpack-encore": "^0.30.0",
    "bootstrap": "^4.3.1",
    "core-js": "^3.0.0",
    "node-sass": "^4.12.0",
    "popper.js": "^1.15.0",
    "regenerator-runtime": "^0.13.2",
    "sass-loader": "^8.0.0",
    "webpack-notifier": "^1.6.0"
  },
  "license": "UNLICENSED",
  "private": true,
  "scripts": {
    "dev-server": "encore dev-server",
    "dev": "encore dev",
    "watch": "encore dev --watch",
    "build": "encore production --progress"
  },
  "dependencies": {
    "datatables.net": "^1.10.21",
    "datatables.net-autofill-bs4": "^2.3.5",
    "datatables.net-bs4": "^1.10.21",
    "datatables.net-buttons-bs4": "^1.6.3",
    "datatables.net-colreorder-bs4": "^1.5.2",
    "datatables.net-dt": "^1.10.21",
    "datatables.net-fixedcolumns-bs4": "^3.3.1",
    "datatables.net-fixedheader-bs4": "^3.1.7",
    "datatables.net-keytable-bs4": "^2.5.2",
    "datatables.net-responsive-bs4": "^2.2.5",
    "datatables.net-rowgroup-bs4": "^1.1.2",
    "datatables.net-rowreorder-bs4": "^1.2.7",
    "datatables.net-scroller-bs4": "^2.0.2",
    "datatables.net-searchpanes-bs4": "^1.1.1",
    "datatables.net-select-bs4": "^1.3.1",
    "file-loader": "^3.0.1",
    "jquery": "^3.4.1",
    "url-loader": "^1.1.2"
  }
}

app.js

import '../css/app.scss';
import * as dt_bs4 from 'datatables.net-bs4'
import * as fh_bs from 'datatables.net-fixedheader-bs4';

require('@fortawesome/fontawesome-free/css/all.min.css');
require('datatables.net-dt/css/jquery.dataTables.min.css');
require('@fortawesome/fontawesome-free/js/all.js');

const $  = require( 'jquery' );
global.$ = global.jQuery = $;
require('bootstrap');

when I try followed to documentation

var $ = require( 'jquery' );
require( 'datatables.net-bs4' )( window, $ );
require( 'datatables.net-fixedheader-bs4' )( window, $ );

I faced with error TypeError: Cannot set property '$' of undefined

my_file.js

import list from './parts/sort.js';

document.addEventListener("DOMContentLoaded", function () {
    list();
});

sort.js

export default function list() {

    $('#example').dataTable({
        fixedHeader: true
    });   
}

how to correct exclude this library? And my main goeal for today enable opportunity fix header