Can't find an example anywhere.

I have the row index of tableInvoices

$('#dtInvoices').on( 'select.dt', function ( e, dt, type, indexes ) {
      selectedInvoiceID = tableInvoices.cell('.selected', 0).data();
        if (currentInvoiceID !== selectedInvoiceID )
            {
                selectedInvoiceIndex = table.row( this ).index() ;

            }
      } );

Elsewhere I calculate some totals and need to post these into dtInvoices

I see

editorInvoices.set( 'invoice.totalNett', (total));

What is the syntax to update ( column 'invoice.totalNett' row selectedInvoiceIndex )

Cheers

Steve Warby

Hi Allan,

I think there is a slight error in this section of the jQueryUI Dialog page

It shows JS script instead of styling.

Regards,

Sébastien

I'm trying use CSS to set a min-width for my columns, but when I do this the table's responsiveness is broken. I've tracked the problem down to the _resizeAuto() in the Responsive plugin.

The problem is the code creates a clone of the table and the headers and strips the min-width from the clone. When it does this, the minWidth property it calculates for each column ends up being different than the CSS enforced min-width actually on the table.

When _columnsVisiblity() runs, it's calculations end up all being wrong, so the columns do not resize and hide based upon the actual min-width of the column.

If I change the following lines in the _resizeAuto() function:

        var headerCells = dt.columns()
            .header()
            .filter( function (idx) {
                return dt.column(idx).visible();
            } )
            .to$()
            .clone( false )
            .css( 'display', 'table-cell' )
            .css( 'min-width', 0 );

... and remove the css( 'min-width', 0 ) to make it:

        var headerCells = dt.columns()
            .header()
            .filter( function (idx) {
                return dt.column(idx).visible();
            } )
            .to$()
            .clone( false )
            .css( 'display', 'table-cell' );

The code works as expected.

Why is it overriding the min-width property?

Is this something that can be changed?

Is there a better way to set a minimum width for a column?

I'm using the Responsive extension so my column resize and play nicely at different resolutions. One of the usability issues I'm running into is the column width can change when I click a column to change the sort order.

I know I can wrap the table in the "nowrap" class, but that's not the behavior we're after.

What I really want is for columns to have a minimum width and for text that doesn't fit in the column to have a text-overflow with an ellipsis.

I've been able to accomplish what I want by doing the following:

1. Adding an inner div (.datatable-column-width) to each cell w/a the text overflow rules (i.e. overflow: hidden; text-overflow: ellipsis; white-space: nowrap;)
2. Setting an min-width to each .datatable-column-width element
3. Attaching a column-sizing.dt event which: (a) sets the width of each header to it's current width (this shouldn't be necessary, but seems to be required) and (b) updating the max-width for each .datatable-column-width element to match it's heading width (using instance.column(idx).nodes()).

This works, but it's pretty expensive because it has to loop through every cell in the table each time the resize event fires.

I could speed things up by building dynamic classes and then updating those styles instead of updating the property on each cell directly. That should speed things up quite a bit.

However, before I do that, does anyone else have a better solution?

(NOTE: I'm also doing something similar so I can create columns with a fixed width. I have some columns where I want to set a specific width for the column and setting the width, min-width and max-width on the cell data seems to be the only way to reliable do this.)

I made a Table with Ajax and setting the columns like this:

var table = $('#customerTable').DataTable({
        "ajax": {
            "url": "api.php?getUsers&type=customers",
            "type": "GET",
            "dataSrc": ""
        },
        "columns": [
            { "data" : "id" },  // Get User ID
            { "data" : "email" },   // Get User Email
            {
                // Convert Usergroup
                "data" : "usergroup",
                render: function(data){
                    ConvertUserGroup(data).done(function(){
                    });

                }
            },

In my DataBase, usergroup is the id of a group which is in another Mysql table (for example -> 1, 2 or 3).

So I want to convert these numbers into a Bootstrap Badge, thats why i do this line:

ConvertUserGroup(data).done(function(){
});

And the function contains this:

// Convert Account Status
function ConvertUserGroup(usergroupID) {
    $.ajax({
        url: "api.php?getGroups&single="+usergroupID,
        type: "GET",
        dataType: "json",
        success: function(data){
            var returnString = '<span class="badge badge-'+data.groupcolor+'">'+data.groupname+'</span>';
            console.log(returnString);
            return returnString;
        }
    });
}

But this isn't working because i can't use two Ajax methods at once. I can't find a callback for render.

So my Question is, how can i tell to ajax in DataTables (while the columns are creating) that it has to wait until ConvertUserGroup() is finished?

I know this has been asked before, probably it's still not possible to make the table responsive to printing/PDF exporting.

But is there a way I can make the columns go to a new page when they don't fit?

My situation: http://prntscr.com/hp2csi

PS: It will not only happen with many columns, but also when I have big values on columns.

I have used Semantic UI styling with NPM before and it works well with DataTables.

However, for another project I decided to take the "Download" approach and bundle the features that I want.

When executing the necessary scripts, I found that the length change menu is not getting the Semantic UI styles applied to it. The wrapping div is not present. I went back and downloaded the bundle a second time and still presented with the same problem.

See screenshot below.

I have a node.js program that I am working on but have not been able to get my dropdown column to work properly. I query a sql server database and populate the datatable. The last column is my "Format" column with a dropdown list where the user can select a format number (1-10). I need to be able to save whatever format selection is made and update the database after. I haven't been able to even get the correct selection to console.log.

//Here is where I have tried to console.log the selection after a selection is made.
//I only get whatever value is selected in the first row, not the row that was actually changed.

$('#Slapper').on('change', function(){
var value = $('#Slapper option:selected').val();
console.log(value);
});

//Here is where I create the datatable. The dropdown list looks fine visually but doesn't function at all:

function createBarcode(data){
mainTable = $('#Slapper').dataTable({
data: data,
columns: [
{title: "Barcode ID",
data: "barcodeID",
orderable: true,
visible: false},
{title: "Print",
data: "printYesNo",
render: function ( data, type, row ) {
if ( type === 'display' ) {
printArray[row.barcodeID] = row.printYesNo;
// console.log(printArray);
return '<input type="checkbox" class="editor-print" id='+ row.barcodeID+' >';
}
return data;
},
orderable: true,
visible: true},
{title: "Code",
data: "codeText",
orderable: true},
{title: "Commodity",
data: "Commodity",
orderable: true},
{title: "Variety",
data: "Variety",
orderable: true},
{title: "Grade",
data: "Grade",
orderable: true},
{title: "Style",
data: "Pack",
orderable: true},
{title: "Size",
data: "Size",
orderable: true},
{title: "Is Active",
data: "active",
orderable: true,
visible: false},
{title: "Label",
data: "Label",
orderable: true,
visible: true},
{title: "PLU",
data: "Lot",
orderable: true,
visible: true},
{
title: "Format",
data: "Format",
render: function(d,t,r){
var $select = $('<select id=' + r.barcodeID + '></select>', {
'id': r +'start',
'value': d,

        });
        $.each(formats, function(k,v){
               var $option = $('<option></option>', {
                'text': v,
                'value': v
            });
            if(d === v){
                formatArray[r.barcodeID] = r.Format;
                $option.attr('selected', 'selected')
            }
            $select.append($option);
        });
        return $select.prop('outerHTML');
    }
  },
],

The export to pdf button in datatable is not working for me in IE 11 running in IE 10 mode. If I run in Edge mode using developer tools, it works fine. I am using Buttons plugin 1.4.2. My setup info is here - https://debug.datatables.net/uporoc

I get InvalidStateError in datatables.js. I cannot change IE to run in Edge mode as its controlled by master page. Are there any workarounds?

I can not get buttons to appear on the page no matter what I try. Used to work, but somehow I broke it.

https://debug.datatables.net/ilekiy

Anybody help me find the error of my ways?

I'm having trouble loading an array that contains a subarray into DataTables correctly. It's structured like this:

I have two semi-working Plunkers that demonstrate what I've tried already.
1) The problem with this first Plunker is that the entire subarray (which contains all of the the x and y values) appears in concatenated form within a single cell of the row in the DataTable that corresponds to the parent row of the main data array.

2) In this second Plunker, also unsuccessful, the problem is that the same x and y values appear for every row.

I've set a bounty for a solution to this problem on Stack Overflow.

What I'm trying to do is get all of the values contained in dataset — specifically, state, record, x, and y — to display correctly in the DataTable. Can anyone demonstrate a solution that would fix one of these Plunkers?

Hello,

I might be wrong but somewhere I saw feature for DataTables Editor AUTO-SAVE. When you type or change any fields, the form autosaves.

But I did not find it anyhere.

Was it removed? Or was it never there?

Peter

PS: I do not mean state saving https://datatables.net/examples/basic_init/state_save.html.

I'm using DataTables and jQuery to create a set of checkboxes to filter the table using the search box. This is implemented fully at http://www.lynden.com/about/brochures-test.html. Basically, when you select an option with the checkboxes, it'll take that option as a string and insert it in the DataTables search box. It works great, except for the fact that the caseInsensitive feature is just straight up not working when entering input into the search box without any prior filtering, which is weird. Weirder still is that when searching with "mi" it will pull up three results with the word Dynamic in them, but will totally ignore the Milky Way company category. Does anyone have any idea why it can sort of search case insensitively but ignores the beginnings of capitalized words?

    $('.dropdown-container')
.on('click', '.dropdown-button', function () {
    $('.dropdown-list').toggle();
})
.on('input', '.dropdown-search', function () {
    var target = $(this);
    var search = target.val().toLowerCase();
console.log(search);
    if (!search) {
        $('li').show();
        return false;
    }

    $('li').each(function () {
        var text = $(this).text().toLowerCase();
        var match = text.indexOf(search) > -1;
        $(this).toggle(match);
    });
})
.on('change', '[type="checkbox"]', function () {
    var numChecked = $('[type="checkbox"]:checked').length;
    $('.quantity').text(numChecked || 'Any');
});

$(document).ready(function () {
table = $('#brochure').DataTable({
    "search": {
"caseInsensitive": true
  },
    "pageLength": 25,
    "order": [
                [2, "desc"]
            ],
    "lengthMenu": [
                [25, 50, 75, -1],
                [25, 50, 75, "All"]
            ],
    "columnDefs": [{
        "targets": [2, 4, 5],
        "visible": false
            }]
});
var pID = location.search; //grab everything after and including the "?" in the URL
console.log(pID);
mloc = pID.indexOf("=") + 1; //identify the location of the actual value
pID = pID.slice(mloc) // captures the value of the parameter
table.search(pID, [1, 2, 3, 4], true, false, false, true).draw(); // assigns the parameter to the hidden input tag's value
})

function filter() {
//build a industry string
var filters = $('input:checkbox[name="filter"]:checked').map(function ()    {
    return this.value;
}).get().join(' ');
console.log(filters);
//now filter in column 3, with a regular expression, no smart filtering, no inputbox, not case sensitive
table.search(filters, [1, 2, 3, 4], true, false, false, true).draw();
}

I'd love some help on this issue!

I'm using DataTables-1.10.16.

All works fine with Firefox and Chrome.

But with IE11 I get the DataTables warning: table id={id} - Requested unknown parameter '{parameter}' for row {row-index}, column{column-index}.
It clearly appears for each cell having content = ''.
The warning fires not only when initially displaying the table content, but also each time a cell content is changed to ''.

Since it happens with IE11 only, my first guess was about a comma after the last member of an object or array. But:
* IE uses to fire a console alert when it happens, and it's not the case here
* nevertheless I carefully checked for that and didn't found anything
* and actually, regarding the tech-note suggestion about if using dt-init columns, my dt-init is dynamically populated by push() so no additional comma can appear

Then I examined the very content of the involved cells. But:
* their content comes from a source that I can console.log() and they well appear as a simple empty strings, not undefined nor null.
* anyway, in case there is some unidentified bug in my code when the data is processed between source and DataTable.row.add(), I just tried to add defaultContent: '' to each of the dt-init.columns members, and it keeps firing the warning.

So now I feel totally stuck: what else should I examine to explain what is happening?
TIA.

I have a little question about when modify DataTable data row.
For example:

// Object DataTable get data row
var dataCell = Dtable.row(row).data();
dataCell.id = 10;

When I modify the property value of data object row, in automatically modify in the DataTable JavaScript Object? And is not necessary to do

Dtable.row(row).data(dataCell);
Dtable.row(row).invalidate();  // Is necessary to Add .draw() when invalidate()?
// Or to do
Dtable.rows().invalidate();  // Is necessary to Add .draw() when invalidate()?

I understood what I need to execute .draw() when I want to update the DOM, but is not clear for me how works .invalidate() and if the data row object is modify automatically modify de JavaScript Object contained by DataTable instance.

I'm waiting for you feedback.

I'm storing some data on the client (localStorage) that contains a list of ids that should be excluded from the table on initialization. I don't have the ids server-side, so this has to happen on the client. I thought this would be simple by using the rowCallback, but I can't seem to figure out how to remove the row if it's in my list of excludes. Here's my best attempt so far. I don't get any errors, just nothing happens and the rows are still there:

rowCallback: function( row, data, index ) {
  if ( aScanCult.indexOf(data[1]) > -1 ) row.remove();
}

Surely this can be done before the table builds rather than after it's all ready, right?

i want to add individual search in column head when user press head text create input box and search and beside this box i want to add sorting functionality...is it possible.?? if yes then how......?

Hoe can I put check-box in filter, so I can select multiple and filter accordingly.
Say for an example : here I want data of London as well as New York.
https://datatables.net/examples/api/multi_filter_select.html

hi I want change data entries dropdown like that's picture what should I do ? someone can help me please ?

Hi everyone, I have used Datatables to create a paginated Table and show sum of the current page as the footer, it is working as expected, on every page it will recalculate the sum, but the problem is when I print using PDF or Excel, the sum is same as per page, but the rows are the complete match of the search criteria. Can any of you please help me? if needed here's the jquery code of the table:
```<script>
$( document ).ready(function() {

    var table = $('#table').DataTable({
        'initComplete': function (settings, json){
            this.api().columns('6,8,7', {page:'current'}).every(function(){
                var column = this;
                var sum = column
                .data()
                .reduce(function (a, b) {
                    a = parseFloat(a, 10);
                    if(isNaN(a)){ a = 0; }

                    b = parseFloat(b, 10);
                    if(isNaN(b)){ b = 0; }

                    return (a + b).toFixed(2);
                });
                if(!sum.includes('€'))
                    sum +=' €';
                $(column.footer()).html(sum);
            });
        },
        footerCallback: function () {

            this.api().columns('6,8,7', {page:'current'}).every(function(){
                var column = this;
                var sum = column
                .data()
                .reduce(function (a, b) {
                    a = parseFloat(a, 10);
                    if(isNaN(a)){ a = 0; }

                    b = parseFloat(b, 10);
                    if(isNaN(b)){ b = 0; }

                    return (a + b).toFixed(2);
                });
                if(!sum.includes('€'))
                    sum +=' €';
                $(column.footer()).html(sum);
            });
        },
        dom: 'Bfrtip',
        buttons: [
            {
                    extend: 'copyHtml5',
                    exportOptions: {
                        columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ]
                    },
                    footer: true
            },
            {
                extend: 'excel',
                exportOptions: {
                    columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ]
                },
                footer: true
            },
            {
                extend: 'pdfHtml5',
                exportOptions: {
                    columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ]
                },
                footer: true
            }
        ]
    });
});

</script>```