Hello I need to load a multi-level json file into datatables with expandable rows, but those rows need to contain other expandable datatables based on the traversal of the json file.

Example that is here no longer seems to work but is the closest I could find: https://stackoverflow.com/questions/30505778/displaying-hierarchical-data-with-jquery-datatable

The actual layout of the json I am trying to work with is here,
https://www.dropbox.com/s/f15nj542t4go8wt/elo.json?dl=0

Any help would be greatly appreciated.

As i apply nodejs as backend in datatables..now searching is not working in datatables as data is dynamic .So how should i handle this and make searching working fine.

I'm sure this is very simple but I cannot find it...

"footerCallback": function( tfoot, data, start, end, display ) {
    var api = this.api();

    var theColumnTotal = api
        .column( 4 )
        .data()
        .reduce( function (a, b) {
            if(isNaN(a)){
                return '';
            } else {
                a = parseFloat(a);
            }
            if(isNaN(b)){ 
                return '';
            } else {
                b = parseFloat(b);
            }
            return (a + b).toFixed(2);
        }, 0 );

    // Update footer
    $( api.column( 4 ).footer() ).html(
        theColumnTotal / [NEED ROW COUNT HERE]
    );
}

Let me know if there is any further info needed, thanks!

I'm having a problem getting the table headers to align over the columns when a table is initialized in a DOM node that is hidden - specifically within a tabbed interface when the table is on a hidden panel. The header tds have their widths set to 0 within the style attribute. I assume this is due to a parent container's width being unknown.

I tried resolving this problem by calling:

table.columns.adjust().draw()

after the table is visible with no luck.

I've also tried the answers found to this stackoverflow question to no avail.

Is there an accepted method to get the column headers to resize themselves so that they are the same width as the table columns?

This seems to be a matter of some interest since the above SO question has over 67,000 views and was active as recently as today.

Thanks.

hello, I am getting warning of invalid Json response . i have tried all possible ways to solve it but no change. please guide me.

In my Searchpane I have a list of categories. It displays all the categories available and indicates the number of items in that category. However, if one of the categories has an ampersand (Jams & Jellies), even though it indicates there are items in that category when you click on it to filter it clears the datatable and returns zero results.

Thanks for any assistance,
J Bishop

If a field has an error, and the user changes that field to fix the error, then the errormessage is still shown. This is fixable for example with a dependency on each field, which does an editor.field(xxx).error(''). It's a lot of extra code if you have to define this for each field. Is there an easier way to do this? If not, then maybe an option for this can be addad in a future version?

Hi !
I think I identified a bug that has to do with colvis combined with the colReorder option.

Please run this jsfiddle: https://jsfiddle.net/KarloX2/b9zcwueg/

Run and do this:
* Notice that the column "B" is initially hidden (visible: false)
* Drag&Drop the header of column "A" to the right of column "C", so the table now shows the column order "C" + "A" + "D"
* Click the "Column visibility" button so it opens the the dropdown. (Notice that the order of the buttons has become adjusted just fine.)
* Here's the bug: Click the button "C" to hide that column and observe that this made column "B" become visible instead !!
* Other buttons in the "Column visibility" dropdown will cause a wrong action as well.

Any idea how I could try to fix this?

Thanks!

hi
i need change language data table to persian
how i can do ?

Hi guy!

With the help of Allan, I managed to find a workaround for real time effect on Datatables Editor.

It is not easy to integrate web socket with inline editing. Here is the concept for workaround:

1. Use ajax.reload() - to refresh the table (without refreshing the page)
2. Use setInterval() - to set frequency for auto refresh
3. Use clearInterval() - to stop auto refresh only when editing in the cell

That will give you a real time experience to your clients!

Steps:

File: js/table.youTableName.js
1.

 //Auto Refresh (ajax.reload)
    var refreshTable = setInterval( function () {
        table.ajax.reload( null, false ); // user paging is not reset on reload
        table.keys.enable();  
    }, 3000 );  //3000 means 3 seconds; you cannot put 0 -> error

2.

    //   Activate an inline edit on click of a table cell
     $('#youTableName').on( 'keyup', 'tbody td:not(:first-child)', function (e) {
         clearInterval( refreshTable );
         table.keys.disable();
     });
        
    // Inline editing on tab focus
    $('#youTableName').on( 'keydown', 'tbody td:not(:first-child)', function (e) {
          
      clearInterval( refreshTable );
      table.keys.disable();

  });

  //   Activate an inline edit on click of a table cell
     $('#youTableName').on( 'click', 'tbody td:not(:first-child)', function (e) {
         editor.inline( this, {
             submitOnBlur: true
         });
         clearInterval( refreshTable );
         table.keys.enable();
     });

//Additional codes if you want to submit using TAB in inline editing
    // when tab key is pressed  
    $('#youTableName').on( 'keydown', 'tbody', function (e) {
        if(e.which == 9) {                                      
            e.preventDefault();
            var $input = $('form input');
            $input.eq( $input.index( this ) + 1 ).focus();
            table.keys.enable();
        }
   } );

Hi guys,
I'm developing a small Website with ASP.NET MVC and till now I used normal html-tables with iterating through my data.

Now I'd like to test the Editor but I have no idea how to get the data out of my model (better my datatables) into the table and back to the model, after editing. I'm even not really sure which paket to install, so till now I loaded the jscript/css Version.

Actually this is the way to give the data to the view:
ViewBag.Data = db.ProjectDetails.AsNoTracking()
.Where(a => a.ProjectId == id)
.OrderBy(a => a.ListPosition).ThenBy(a => a.Name).ToList();

The database is created by using codefirst with entity Framework on a SQL database.

Hope this Question is not too kiddy but at the Moment I am totally confused.

Thanks
Telefisch

Hi,

When I load the "Buttons" extension ("vendor/DataTables/Buttons-1.5.2/js/dataTables.buttons.js") I get the following error:

Uncaught TypeError: Cannot read property 'i18n' of null
    at text (dataTables.editor.js:7401)
    at text (dataTables.buttons.js:523)
    at Buttons._buildButton (dataTables.buttons.js:583)
    at Buttons._expandButton (dataTables.buttons.js:475)
    at Buttons.add (dataTables.buttons.js:160)
    at Buttons._constructor (dataTables.buttons.js:379)
    at new Buttons (dataTables.buttons.js:85)
    at Object.fnInit (dataTables.buttons.js:1893)
    at _fnAddOptionsHtml (jquery.dataTables.js:3681)
    at _fnInitialise (jquery.dataTables.js:4703)

I have used the "Download" facility to download all the scripts, and have used the suggested code to load the CSS and JS. I am avoiding the CDN approach because my internet connection is dodgy. (Hello from Africa!)

I have pasted the relevant code here: https://pastebin.com/1Dg24zTj

Hi,

I'm using a theme that suggests I can add a "select/deselect all" checkbox to the top-left corner of my datatables.

http://keenthemes.com/preview/metronic/theme/admin_1/table_datatables_managed.html

This checkbox selects/deselects only those rows that are visible.

How would I do this? I can't find anything in the documentation but I'm sure it must be there somewhere.

Many thanks

Hey every one i work with the table design all the code is on my page i get just the html data but the search and pagination is not working the i check the source-view the jq and css code is loaded but they dont work can you help
i work with this link
https://datatables.net/examples/advanced_init/dt_events.html

Hi,
I really like DataTables. I have a table with a php source. Every thing is good. I added rowReorder with dataSrc (to my order column) and update: false. I am able the change the order of the rows but I didn't find how to send the changes to my php script in order to update the database.

Please need help, I didn't find any source neither in the doc nor in the forum.

I use dataTable with date range filters based on yadcf. When user change webpage and come back to a webpage with filters there are still old filters values. I have created JS function to reset yadcf filters. Problem is that datatables fires an ajax and then this function is called.

My question is: how to call my function to change default filters values and then fire the ajax?

I am trying to implement a basic CRUD for employees but get the above error as soon as I reference the editor.
Javascript code:

var _init = function () {
        _retrieveData();

        _populateSelect();
        
        _initeditor();

        _initEmpTable();
    };


    var _initeditor = function () {

        editor = new $.fn.dataTable.Editor({
            "table": employeeTable,
            "fields": [
                {
                    "label": "Namn:",
                    "name": "name"
                },
                {
                    "label": "Tjänst.Nr:",
                    "name": "officerNr"
                },
                {
                    "label": "AnvändarId:",
                    "name": "userId"
                }
            ]
            ,
            "i18n": {
                create: {
                    button: "Ny",
                    title: "Ny post",
                    submit: "Skapa"
                },
                edit: {
                    button: "Ändra",
                    title: "Ändra post",
                    submit: "Uppdatera"
                },
                remove: {
                    button: "Radera",
                    title: "Radera",
                    submit: "Radera",
                    confirm: {
                        _: "Är du säker på att du vill radera %d rader?",
                        1: "Är du säker på att du vill radera raden?"
                    }
                },
                error: {
                    system: "Ett fel har uppstått kontakta systemadministratören"
                },
                datetime: {
                    previous: 'Föregående',
                    next: 'Nästa',
                    months: ['Januari', 'Februari', 'Mars', 'April', 'Maj', 'Juni', 'Juli', 'Augusti', 'September', 'Oktober', 'November', 'December'],
                    weekdays: ['Sön', 'Mån', 'Tis', 'Ons', 'Tor', 'Fre', 'Lör']
                }
            }
        });
    };
    

    var _initEmpTable = function () {
        employeeTable = $('#editEmployeeTable').DataTable({
            'language': {
                'sEmptyTable': 'Tabellen innehåller inget data',
                'sInfo': 'Visar _START_ till _END_ av totalt _TOTAL_ rader',
                'sInfoEmpty': 'Visar 0 till 0 av totalt 0 rader',
                'sInfoFiltered': '(filtrerade från totalt _MAX_ rader)',
                'sInfoPostFix': '',
                'sInfoThousands': ' ',
                'sLengthMenu': 'Visa _MENU_ rader',
                'sLoadingRecords': 'Laddar...',
                'sProcessing': 'Bearbetar...',
                'sSearch': 'Sök:',
                'sZeroRecords': 'Hittade inga matchande resultat',
                'oPaginate': {
                    'sFirst': 'Första',
                    'sLast': 'Sista',
                    'sNext': 'Nästa',
                    'sPrevious': 'Föregående'
                },
                'oAria': {
                    'sSortAscending': ': aktivera för att sortera kolumnen i stigande ordning',
                    'sSortDescending': ': aktivera för att sortera kolumnen i fallande ordning'
                }
            },
            'dom': 'Bfrtip',
            'buttons': [
                {
                    extend: 'excel',
                    exportOptions: {
                        columns: ':visible'
                    }
                },
                {
                    extend: 'pdf',
                    exportOptions: {
                        columns: ':visible'
                    }
                }
                ,
                { extend: 'create', editor: editor },
                { extend: 'edit', editor: editor },
                { extend: 'remove', editor: editor }
            ],
            'lengthChange': false,
            'select': true,
            'columns': [
                {
                    'data': 'name',
                    'targets': 0
                },
                {
                    'data': 'officerNr',
                    'targets': 1
                },
                {
                    'data': 'userId',
                    'targets': 2
                }
                
            ]
        });
    };

I have included the following files in my gulp file:

paths.js = [
    paths.vendor + "mdbootstrap/js/jquery-3.1.1.js",
    paths.node + "popper.js/dist/umd/popper.js",
    paths.node + "underscore/underscore.js",
    paths.node + "moment/moment.js",
    paths.vendor + "mdbootstrap/js/bootstrap.min.js",
    paths.node + "fullcalendar/dist/fullcalendar.js",
    paths.node + "fullcalendar-scheduler/dist/scheduler.min.js",
    paths.node + "fullcalendar/dist/locale/sv.js",
    paths.node + "select2/dist/js/select2.full.js",
    paths.node + "select2/dist/js/i18n/sv.js",
    paths.node + "jquery-validation/dist/jquery.validate.js",
    paths.node + "jquery-validation/dist/localization/messages_sv.js",
    paths.vendor + "mdbootstrap/js/mdb.js",
    paths.vendor + "mdbootstrap/sv_SE.js",
    paths.node + "datatables.net/js/jquery.dataTables.js",
    paths.node + "datatables.net/js/jquery.dataTables.min.js",
    paths.node + "datatables.net-bs4/js/dataTables.bootstrap4.js",
    paths.node + "datatables.net-buttons/js/dataTables.buttons.js",
    paths.node + "datatables.net-buttons/js/dataTables.buttons.min.js",
    paths.node + "datatables.net-select/js/dataTables.select.min.js",
    paths.node + "datatables.net-buttons-bs4/js/buttons.bootstrap4.js",
    paths.node + "datatables.net-select-bs4/js/select.bootstrap4.min.js",
    paths.node + "jszip/dist/jszip.js",
    paths.node + "pdfmake/build/pdfmake.js",
    paths.node + "pdfmake/build/vfs_fonts.js",
    paths.node + "datatables.net-buttons/js/buttons.html5.js",
    paths.node + "datatables.net-keytable-bs4/js/keyTable.bootstrap4.js",
    paths.vendor + "datatables-editor/datatables.editor.js",
    paths.vendor + "datatables-editor/datatables.editor.min.js"
   ];

paths.css = [
    paths.vendor + "mdbootstrap/css/bootstrap.css",
    paths.node + "font-awesome/css/font-awesome.css",
    paths.node + "fullcalendar/dist/fullcalendar.css",
    paths.node + "fullcalendar-scheduler/dist/scheduler.min.css",
    paths.node + "select2/dist/css/select2.css",
    paths.node + "datatables.net-bs4/css/dataTables.bootstrap4.css",
    paths.node + "datatables.net-buttons/css/buttons.dataTables.min.css",
    paths.node + "datatables.net-buttons-bs4/css/buttons.bootstrap4.css",
    paths.node + "datatables.net-select/css/select.dataTables.min.css",
    paths.node + "editor/css/editor.dataTables.min.css",
    paths.vendor + "mdbootstrap/css/mdb.css",
    paths.webroot +"css/vxa.css"
];

Can you suggest any solution to the problem?

Hi,

we recently had an accessibilty test and there were 2 problem they mentioned with our datatables. Both issues had to do with elements being disabled only by styling:

1. When Pagination is active but there aren't enough entries that it becomes neccessary, the pagination buttons become disabled (https://datatables.net/examples/basic_init/zero_configuration.html set pag size to 100). But the problem is that this is only happening visually but that is not visible for the screenreader which causes problems for visually impared users.

2.The column visibility (https://datatables.net/extensions/buttons/examples/column_visibility/simple.html) also has the problem that when columns are deactivated the only thing that happens is that the 'active' css-class is being removed but beside that there is no hint if a column is active or not andthat also is a problem for screenreaders.

I would like to ask if there are solutions for this problem or if they will be addressed in the future.

Thanks and kind regards
Kevin

Hello Forum,
trying to solve my issues I wonder why I Always should establish another Connection to my database instead of using the ApplicationDbContext, which is already open in my Controller?

How can I use this for the Editor in my MVC Project?

$("#btn").click(function () {
$("#myTable").DataTable({
"processing": true,
"serverSide": true,
"filter": true,
"orderMulti": false,
"ajax": {
"url": "/Receipt/test",
"dataSrc": "Data",
"type": "POST",
"datatype": "json"
},
"columnDefs":
[{
"targets": [0],
"visible": false,
"searchable": false
}],
"aoColumnDefs": [{
"bSortable": false,
"aTargets": [1, 2]
}],
"columns": [
{ "data": "Paid", "name": "Paid", "autoWidth": true },
{ "data": "Balance", "name": "Balance", "autoWidth": true },
{ "data": "TotalAssignedFee", "name": "TotalAssignedFee", "autoWidth": true },
]
});
});