Hi

I've disabled the paging and enabled the KeyTable extension. When I press the Page Up or Page Down keys, the datatables moves to the next page. If I'm at row 1 and press Page Down I will be moved to row 11 and the first 10 rows disappears.

Is this a bug or by design?
I can prevent it by limiting the key to listen to and just listen for tab and arrow key.
Any other way to disable the page up/down paging functionality?

See http://live.datatables.net/qesomote/2/edit for example.

Regards
/Roger

Hi

Just noticed there is a columns property when initializing the KeTable to specify columns that can gain focus.
I might change my code to use this instead of manually coded key-focus and key-blur events.

But, I also have some rows in the table that I don't want to gain focus, for example a summary row at the bottom that automatically sums the values in the column.

It would be very nice to have a rows property similar to the columns property and then I can probably get rid of or at least simplify my key-focus, key-blur handlers.

Regards
/Roger

We are currently in progress of migrating our application to be more usable on phones and tablets and are using bootstrap for this. We also use Datatables a lot.

We have an issue with some tables with many non sortable columns. The columns are too wide due to a large right padding, even for non sortable columns, so they don't fit on our screen.

I think the right padding that's done in the bootstrap integration css (line 148-150) should only be done when we also have sorting and not for every condensed table.

table.dataTable.table-condensed > thead > tr > th {
padding-right: 20px;
}

If I just use ordinary bootstrap table with table-condensed the right padding is 5px, with Datatable it's 20px. Without the table-condensed Datatable has 30 or 8px as right padding depending on if sorting is enabled or not.

See http://live.datatables.net/novejeje/2/

Any comments on this?

Regards
/Roger

First of all, thank you for your great work.

I have a bootstrap datatable and editor with a datetime type field (though I use it to only show date), which uses both bubble editing when clicking on an element and main editing when selecting one or more rows and clicking edit.

When using the bubble editing the datetime picker appears normally, but when using the edit button or the new button no datetime picker shows up (and no js error is thrown as well).
It is behaving as it has not been initialized. Is it normall? How do I manually initialize the datetimepicker when the main editing form is shown?
Thank you.

In my datatable I have enabled both bubble editing and editing a single or multiple items after selection with main editing form.

If I disable multiEditable in a field, the field works only when clicking new button.
When I select a single item and click edit the field for which multiEditable has been disabled says that the input can only be edited individually. Is taht normal? Can i specify tomehow to the editing form that only a sinlge element is selected and why do i need to do that since the datatable knows how many elements have been selected anyway?
Even if I try to use bubble editing it says the same, even though bubble editing is by default for changing a single cell. Why?

For now I have left multiEditable enabled to avoid these issus but I would appreciate it if you could point me to the right direction.

I want descending order first column so i used below code that work well but on load it show the alert box that contain
"Data Tables Warning: table_id Sample_2 cannot reinitialize Data Table: For more information about this error please see https://datatables.net/tn/2"

so how i stop that alert?

Hello,

Currently i'm using the colvis button which obviously is used to hide / show columns.

However, the button is on the bottom of the table and if pressed the dropdown shows under the button and therefore extending the page. Is it possible to let the dropdown pop upwards?

Thanks in advance!

I have set the option stateSave to true and for some (one in example) set the columns.visible to false. unless I comment out
the stateSave option the column is still visible. I am using the buttons extension to allow the user to control which columns are
seen. The data is loaded via ajax one time.

If I allow responsive: true everything works (at least it looks like it does) but if I allow the stateSave the "base" column still
shows up (it can be turned off with the 'colvis' button but the colvisRestore puts the base back on).

This is the top of my datatables.js file:
Note DataTables 1.10.12

/*
 * This combined file was created by the DataTables downloader builder:
 *   https://datatables.net/download
 *
 * To rebuild or modify this file with the latest versions of the included
 * software please visit:
 *   https://datatables.net/download/#dt/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.12/af-2.1.2/b-1.2.2/b-colvis
-1.2.2/b-html5-1.2.2/b-print-1.2.2/cr-1.3.2/fc-3.2.2/fh-3.1.2/kt-2.1.3/r-2.1.0/rr-1.1.2/sc-1.4.2/se-1.2.
0
 *
 * Included libraries:
 *   JSZip 2.5.0, pdfmake 0.1.18, DataTables 1.10.12, AutoFill 2.1.2, Buttons 1.2.2, Column visibility 1
.2.2, HTML5 export 1.2.2, Print view 1.2.2, ColReorder 1.3.2, FixedColumns 3.2.2, FixedHeader 3.1.2, Key
Table 2.1.3, Responsive 2.1.0, RowReorder 1.1.2, Scroller 1.4.2, Select 1.2.0
 */

/*!

My example JS code

$(document).ready(function() {
    var table = $('#item-select').DataTable( {
        ajax: '/mbme/ajax/select',
        colReorder: true,
        fixedColumns: true,
        //responsive: true,
        // columns not visible interfears with save state.
        //stateSave: true,
        "order": [[1, 'asc']],
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
        keys: true,
        dom: 'lBfrtip',
        buttons: [
            {
                extend: 'colvis',
                text: 'Columns',
                postfixButtons: [
                    {
                        text: 'Restore Default',
                        extend: 'colvisRestore'
                        }
                    ]
                },
            {
                extend: 'copyHtml5',
                exportOptions: {
                    columns: ':visible'
                    }
                },
            {
                extend: 'csvHtml5',
                exportOptions: {
                    columns: ':visible'
                    }
                },
            // for now PDF is too slow
            //{
            //  extend: 'pdfHtml5',
            //  exportOptions: {
            //      columns: ':visible'
            //      }
            //  },
            {
                extend: 'print',
                exportOptions: {
                    columns: ':visible'
                    }
                }
            ],
        columns: [
            {
                "visible": true,
                data: "itemid"
                },
            {
                "visible": true,
                data: "name"
                },
            {
                "visible": true,
                data: "description"
                },
            {
                "visible": true,
                data: "type"
                },
            {
                "visible": true,
                data: "sell"
                },
            {
                "visible": true,
                data: "price"
                },
            {
                "visible": false,
                data: "base"
                },
            ]
        });
    });

I am using the following buttons definition to provide export options.

     "buttons" :
       [
          'colvis',
         {
           extend: 'collection',
           text: 'Export',
           buttons:
           [
             {
               extend: 'print',
               exportOptions: {
                 columns: [ ':visible' ]
               }
             },
             {
               extend: 'copyHtml5',

               exportOptions: {
                 columns: [ ':visible' ]
               }
             },
             {
               extend: 'csvHtml5',
               exportOptions: {
                 columns: [ ':visible' ]
                }
             },
             {
               extend: 'pdfHtml5',
               exportOptions: {
                columns: [ ':visible' ]
               }
             }
           ]
         }
       ]

I have 19 columns in the table and a variable number of rows. When I select the print button all of the data appears on the output page but the header does not adhere to the page size. The header appears every 13 rows. When I hide a single column the behavior is exactly the same except, as expected; the hidden column is not included in the output. However; if I hide 2 columns the result output only includes 9 columns instead of the expected 17. And the header row does adhere to the page size even if the layout or page size is changed.

If I use the copy or csv button the behavior is as expected and the 17 columns are present in the output and using the pdf button evokes the same behavior as the copy button. This leads me to believe that the formatting (particularly page sizing) is a problem.

I have looked at some of the examples and end up at points that I just do not understand or cannot determine how to apply. If there is an obvious problem in my use that someone can point to I really appreciate the assistance.

John

Is it possible to disable multi-row edit support only for specific fields? Ideally I'm looking for a way that wouldn't just block the multi-row edit after the user enters data but instead inform the user at the form level that that field is unavailable for multi-row editing (but still available for single-row edits). Does this exist in Editor 1.5.6/DT 1.10.11? Is it planned for a future release?

Thanks!

I can get the data() object on the table and do statements like

data[x][y] = 123;

but it doesn't actually update the table. Using the table.cell(row, col).data(123) method of updating cells is insanely slower when trying to update about 600 records. It ends up being around 1 second per 100 records. Moreover, the column I'm updating is hidden so the UI doesn't even need to change.

Is there a faster way to update cells than using table.cell(row, col).data(123)?

I've asked the same question here on SO so feel free to answer it there for points if you care.

I am using server side processing for my tables. I have tables that have 60000+ rows with 65+ columns, so using client side is not an option for me. My end users want to pull up the tables and then use the filtering and sorting to narrow down what they are seeing. Then they want to Export All, usually still 30k - 40k rows with the 65+ columns and with the sorting in place too. I have tried a few things that I've found elsewhere and am hoping that you can help. Here's what I've tried so far:

{ extend: 'excel',
    text: 'Export Current Page',
    exportOptions: {
        modifier: {
            page: 'current'
        }
    },
    customize: function (xlsx)
    {
        var sheet = xlsx.xl.worksheets['sheet1.xml'];
        $('row:first c', sheet).attr('s', '7');
    }
}

This does not do what I would like. It exports only the current page (which is why I made the text for it 'Export Current Page')

I've also tried this:

{
    text: 'Export All to Excel',
    action: function (e, dt, button, config)
    {
        dt.one('preXhr', function (e, s, data)
        {
            data.length = -1;
        }).one('draw', function (e, settings, json, xhr)
        {
            var excelButtonConfig = $.fn.DataTable.ext.buttons.excelHtml5;
            var addOptions = { exportOptions: { 'columns': ':all'} };

            $.extend(true, excelButtonConfig, addOptions);
            excelButtonConfig.action(e, dt, button, excelButtonConfig);
        }).draw();
    }
}

This simply sends the whole table to the screen instead of sending it to an excel file. Though it does pull the whole data set.

I'm sure that through the two of these I'm missing something that would allow me to Export the whole data set without sending it to the screen first.

URL:
http://www.warrencountyia.org/testing/directory.shtml

My page has a directory that references a CSV file- when it is edited in Excel or any other csv editor either for content or to add/remove columns etc. it breaks the page and I get an error on the second to last line (195 of 196)... If I delete lines 195 and 196, then the error just moves on up to 193.

Error:
DataTables warning: table id=directory - Requested unknown parameter '2' for row 195. For more info.... http://datatables.net/tn/4

Debug Data
http://debug.datatables.net/okuleb

I have looked through the referenced page but just have found nothing. I either am missing something silly or there is something deeper that I have just not seen.

I can't quite get the syntax here correct, I'm trying:

table.cells(null, altitudeColumn).invalidate();

...but this isn't invalidating that column's values. A table.rows().invalidate() invalidates everything, but it's expensive. I tried also table.column( 'altitude' ).cells().invalidate() as well, but this is even slower than table.rows().invalidate(), which doesn't make sense given that we're only invalidating one row, rather than the whole table!

What's wrong with my current call?

Hi,

I’m a licenced user and have been implementing DataTables and Editor for an internal project. I’ve prechecked the documentation / forums and can’t get my head around this issue.

I have a Editable datatable, which is loading JSON data successfully from the server.

JSON from server:

{
"data": [
{
"DT_RowId": "row_3",
"FUND_MANAGER": "Graham K4-D15 (Innocap Track)",
"NO_MULTI_MGR_OR_PORT_ALPHA": "ABC",
"PERCENT_SUBINVESTMENT_GRADE": "DEF",
"BENCHMARK_DRIVEN": "",
"MINIMU_SIZE": "",
"UCITS_III": "",
"TOTAL_ASSETS_FUND": "",
"SCORE": "",
"COMMENT": ""},
{
"DT_RowId": "row_1",
"FUND_MANAGER": "SPDR Gold Tracker",
"NO_MULTI_MGR_OR_PORT_ALPHA": "",
"PERCENT_SUBINVESTMENT_GRADE": "",
"BENCHMARK_DRIVEN": "",
"MINIMU_SIZE": "",
"UCITS_III": "",
"TOTAL_ASSETS_FUND": "",
"SCORE": "",
"COMMENT": ""},
{
"DT_RowId": "row_2",
"FUND_MANAGER": "Transtrend (Innocap Track)",
"NO_MULTI_MGR_OR_PORT_ALPHA": "",
"PERCENT_SUBINVESTMENT_GRADE": "",
"BENCHMARK_DRIVEN": "",
"MINIMU_SIZE": "",
"UCITS_III": "",
"TOTAL_ASSETS_FUND": "",
"SCORE": "",
"COMMENT": ""}
],
"options": [],
"files": []
}

On inline editing a cell value and then clicking out, the AJAX request is sent and the server returns the expected JSON but the rows are not being updated. Instead, I get an error message: ‘A system error has occurred (More information)’ under the field taking me to: https://datatables.net/manual/tech-notes/12.

JSON returned:
Have tried returning the above JSON (using the same URL for param ajax: under editor), as well as the following:

{
   "data":    [
        {
            "DT_RowId": "row_3",
            "FUND_MANAGER": "Graham K4-D15 (Innocap Track)",
            "NO_MULTI_MGR_OR_PORT_ALPHA": "ABC",
            "PERCENT_SUBINVESTMENT_GRADE": "DEF",
            "BENCHMARK_DRIVEN": "GEF",
            "MINIMU_SIZE": "",
            "UCITS_III": "",
            "TOTAL_ASSETS_FUND": "",
            "SCORE": "",
            "COMMENT": ""
        }
    ]
}

• I have extracted the HTML and javascript from our page and can be viewed here: https://jsfiddle.net/zsaeed/39brvysm/4/#
• This being an internal application is not accessible outside the site.
• The response headers shown by the browser are correct too:
  Content-type: application/json
• A thought, could it be a version issue with Jquery?

Kind regards

When initializing DataTables using the Javascript data option, is it faster to provide data as a 2D array or an array of objects?
https://datatables.net/reference/option/data

Hi @allan,

I think I've found a bug when using Bootstrap styling in combination with scrollX and scrollY enabled. As you can see in the example provided, the table footer becomes misaligned when you scroll all the way to the right.

http://live.datatables.net/niqenaho/1/edit?output

Thanks,
Andrew

Does Ajax data need to be provided in the format shown in the examples? https://datatables.net/examples/ajax/defer_render.html

I've started with export functionality in my project. Mainly print and pdf... But some questions arise...
1. When printing, I don't get all columns, I have some fields in child rows and they don't show. I even get the plus icon for child rows showing, it's more like an image of the screen than a printout of data?
2. In print, I also get a black background where title and message is, with purple text? I understand it has something to do with css, maybe from bootstrap or somewhere else. Is there a way to ignore css-rules on the page?
3. Is there no way to center align contents in the cells (and headers)? Now everything is left aligned in both.
4. Print preview is 100% width, but not the pdf. Can I make width 100%?

I really tried to search and there are questions for the same things, but no clear answer anywhere that I can find..... Sorry if I missed something already posted regarding this...

My buttons look like this on client side editor:

buttons: [
            { extend: 'create',
                editor: editor,
                text: '<i class="fa fa-user-plus"></i> Ny användare',
                formTitle: '<i class="fa fa-user-plus"></i> Skapa ny användare',
                formButtons: [{
                        label: '<i class="fa fa-undo"></i> Avbryt',
                        fn: function() { this.close(); }
                },
                '<i class="fa fa-floppy-o"></i> Spara'
            ]
            },
            { extend: 'collection',
                text: '<i class="fa fa-download"></i> Exportera',
                autoClose: true,
                buttons: [
                    { extend: 'copy',
                        text: '<i class="fa fa-clipboard"></i> Kopiera',
                        title: function (){
                            return 'Användare Team Tillredning' + searchVal;
                        },
                        message: moment($.now()).format("YYYY-MM-DD HH:mm")
                    },
                    { extend: 'excel',
                        text: '<i class="fa fa-file-excel-o"></i> Excel',
                        title: function (){
                            return 'Användare Team Tillredning' + searchVal;
                        },
                        message: moment($.now()).format("YYYY-MM-DD HH:mm")
                    },
                    { extend: 'csv',
                        text: '<i class="fa fa-clipboard"></i> CSV'
                    },
                    { extend: 'pdf',
                        text: '<i class="fa fa-file-pdf-o"></i> PDF',
                        title: function (){
                            return 'Användare Team Tillredning' + searchVal;
                        },
                        message: moment($.now()).format("YYYY-MM-DD HH:mm"),
                        exportOptions: {
                            columns: '1,3,5',
                            stripHtml: true
                        }
                    },
                    { extend: 'print',
                        text: '<i class="fa fa-clipboard"></i> Skriv ut',
                        title: function (){
                            return 'Användare Team Tillredning' + searchVal;
                        },
                        message: moment($.now()).format("YYYY-MM-DD HH:mm"),
                        addClass: 'compact',
                        exportOptions: {
                            columns: '1,3,5',
                            stripHtml: true
                        }
                    }
                ]
            }
        ]

I'm using DataTables with the Responsive extension. Right now it's setup in my first column and I get the nice action of showing any hidden columns when I click on the row. My problem is that I have several custom buttons in the first column and when I click on those buttons, it shows and hides the data as well.

What would I need to add to the custom button onclick code to prevent the extra data from showing. But still leave that functionality in place if they click on the row around the buttons or the icon that the Responsive extensions includes before the buttons.