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?

Hello, I'm exporting a table with Arabic content after specifying filename and title:null on export I get this error (before specifying title:null it worked fine!) "Excel found unreadable content in filename.xslx. Do you want to recover the contents of the workbook? If you trust the source of this workbook, click Yes." On clicking Yes the file opens and I get this message:

Excel completed file level validation and repair. Some parts of this workbook may have been repaired or discarded.
Repaired Part: /xl/worksheets/sheet1.xml part with XML error. Catastrophic failure Line 1, column 0.

Clicking on the XML link at the bottom of the error window shows this

<repairedPart>Repaired Part: /xl/worksheets/sheet1.xml part with XML error. Catastrophic failure Line 1, column 0.</repairedPart>

Couple of other forum posts mentioned this error, but they were a year or two earlier when a fix was committed.

Hi

I am using DataTables and the Editor plugin on a semi-complex project . The thing I am stuck on at the moment is the following

Some of the values in the rows are dropdowns... I need to bind this when the "Create" Button is clicked. Normally these are pulled back via Ajax and and i am using the following code on the "render" method for that column

editor.field('dropdown').update(op['dropdown']);

with op being an array in which I i store the dropdown values pulled back via ajax (there are several dropdown per row) , so this way I don't need to do an Ajax call for everyrow and can simply render the relevant dropdown

So if there is no data for the particular Datatable then the "render" method is never called and the code above never executed hence on the "Create" Popup the dropdown is empty.

My solution is this

 buttons: [
    { extend: "create", editor: editor, action: function ( e, dt, node, config ) {
   editor.field('dropdown').update(op['dropdown']);
        editor.create();
    }},
    ]

The above code works but strangely the actual "Create" button which submits the popup is no longer visible , I am unsure what the command is to show it or render it again.

Thanks in advance

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>```

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've built a trouble-ticket application which allows technicians to post a note to a ticket. (The relation is that a ticket may have zero or more notes attached.) In posting a note to a ticket, the technician may indicate that the ticket has been resolved. I would like to be able to close the ticket when a note is posted that indicates that the ticket has been resolved. In the "submitSuccess" handler for notes (client-side), I can determine that the ticket has been resolved. I haven't figured out how to update the ticket to set its status to be 'closed' from the event handler for the note.

Is it possbie to do this? The Javascript file that does this contains editor instances and datatables for both the tickets and the notes.

Thanks,
Tom

Hello,
I have a datatable with ajax pagination, when you click several times in the pagination button it shows an ajax error.
When I open the ajax error, the response has all the records:

I tried disabling the button after it is clicked but the problem persists:
.on('draw',function(){
$(".paginate_button.previous").click(function(){
$(this).attr('class','paginate_button previous disabled');
});
$(".paginate_button.next").click(function(){
$(this).attr('class','paginate_button next disabled');
});
});

What could be the problem?.. thanks

Are there any ones that stand out over other ones? Do any support Editor? Are there any plans to release an 'official' rails backend library?

This is one way to show by default a child rows of row.

function format(data){
    // Code for format data
    return 'New data with format';
}

dTable = $('#myDTable').DataTable({
    rowCallback: function(row, data, index){
    var dtApi   = this.api();
    var jqTr    = $(row);
    var dtRow = dtApi.row(row);

    if(!dtRow.child.isShown()){
        dtRow.child(format(dtRow.data())).show();
    }
});

Share this and waiting for feedback for corrections and sugestions.

Is possible edit a cell and when press enter key pass to edit cell below?

So my app is all happy, and this datatable is pretty nice and its editor works create, with bubbles.
Then I add the "require" to get datatable-select and datatable-buttons, and everything is ok.
Then finally I add "buttons: [ {extend: 'create', editor: simpleEditor} ] " to the definition of my datatable.

For some reason, in its initialization, the datatable-buttons module seem to use jQuery.extend on a data-structure that may be referring to itself (or a part of itself), which sends jQuery.extend into an infinite recursion until

Uncaught RangeError: Maximum call stack size exceeded
...

simpleEditor is built with new $.fn.dataTable.Editor( { ... } ).
and the buttons: [ {extend: 'create', editor: simpleEditor}] refers to it - so perhaps there is a weird self-reference loop happening.

but this seems to be exactly like every other datatable with button...

So, I am at a loss...

Has anyone encountered such conditions and found the root cause and fixed it?
I've upgraded to jQuery 1.12.4, latest datatable-select and datatable-buttons. I haven't upgraded Editor in a little more than a year.

thank you!

Hey guys I created a custom binding that works with knockout 3.4 out of the box. I know that alot people have been trying to get this to work and the solution was not intuitive. I first had to edit the knockout source code and create a pull request in the knockout repository to have two events added to the source. These events were, beforeRenderAll and afterRenderAll. The best way to make datatables play nicely with knockout seemed to be, destroy the datatable, let knockout render its bindings, then reinitialize the datatable. I have created a pull request with knockout to add two events to the foreach binding that will make things easier for knockout to play nice with many jQuery plugins that break the knockout bindings. Those changes aren't too far off. Maybe 5 or 6 months or so. Should be in 3.5 or 4.0.

But with a hint from one of the top knockout devs, I was able to create a binding that works with knockout right out of the box!!

This binding is located here --> https://github.com/zachpainter77/DatatablesForEach-Custom-Knockout-Binding

Pull Request for knockout --> https://github.com/knockout/knockout/pull/1856

Example --> JSFIDDLE

If you like this binding, please give me a star on git hub!

Here is the code:

ko.bindingHandlers.dataTablesForEach = {
    page: 0,
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

        valueAccessor().data.subscribe(function (changes) {
            var table = $(element).closest('table').DataTable();
            ko.bindingHandlers.dataTablesForEach.page = table.page();
            table.destroy();
        }, null, 'arrayChange');
        var nodes = Array.prototype.slice.call(element.childNodes, 0);
        ko.utils.arrayForEach(nodes, function (node) {
            if (node && node.nodeType !== 1) {
                node.parentNode.removeChild(node);
            }
        });
        return ko.bindingHandlers.foreach.init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
    },
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var options = ko.unwrap(valueAccessor()),
            key = 'DataTablesForEach_Initialized';
        ko.unwrap(options.data);
        ko.bindingHandlers.foreach.update(element, valueAccessor, allBindings, viewModel, bindingContext);
        (function() {
            var table = $(element).closest('table').DataTable(options.dataTableOptions);
            if (options.dataTableOptions.paging) {
                if (table.page.info().pages - ko.bindingHandlers.dataTablesForEach.page == 0)
                    table.page(--ko.bindingHandlers.dataTablesForEach.page).draw(false);
                else
                    table.page(ko.bindingHandlers.dataTablesForEach.page).draw(false);
            }
        })();
        if (!ko.utils.domData.get(element, key) && (options.data || options.length))
            ko.utils.domData.set(element, key, true);
        return { controlsDescendantBindings: true };
    }
};

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

I use datatable with looping php like be the below, but this condition not work on datatable server side.

**Current php looping **

$saldo = 5000;
if ( $result ) { while($transaksi = mysqli_fetch_array($result) ) {
            $saldo = $saldo + $transaksi['amount'];
        ?>
        <tr class="<?php echo $transaksi['type']; ?>" id="trans_<?php echo $transaksi['id']; ?>">
            <td class="right"><?php echo uang$saldo; ?></td>
        </tr>
<?php } } ?>

Server side

array(
        'db'        => '`trans`.`amount`',
        'dt'        => 'view_td6_saldo',
        'formatter' => function( $d, $row ) use ( $saldo ) {
            $saldo = $saldo + $d;
            return uang($saldo,false);
        },
        'field' => 'amount'
    ),

If amount[0] = 200; amount [1] = 300; and amount [2] = 700;
so saldo[0] = 5200; saldo[1] = 5500; and saldo[1] = 6200;
but if i use datatable server side, the the result for saldo[0] = 5200; saldo[1] = 5300; and saldo[1] = 5700;

Hi,

I have a requirement where i have to select some columns in a listbox and based on column selection i have to get data from DB and add data to data tables. Column numbers and headers may vary based on listbox selection. Does anyone have any idea about this?

How do i bind this to datatables and create datatable?

I know I know, it's been talked about to death.
First question, because I cannot find the place in code:

1) Does DT create all the html for a page first and then insert it into the dom, or does it push each row into the dom separately?

Hi, Im try to do a left Join between two tables

table 1 products_shop

id_product | price
1 | 34$

table 2 product

id_product . | . reference
1 | Pen

Im try that the result will be this table

Id_product . | reference . . | price
1 . | pen . | 34€

With this code

Editor::inst( $db, 'product_shop')
                ->fields(
         Field::inst( 'product_shop.id_product' ),
         Field::inst( 'product_shop.price' ),
         Field::inst( 'product.reference' )
     
                )
                ->leftJoin('reference as primary', 'product_shop.id_product', '=', 'product.id_product' )
                ->process( $_POST )
                ->json();

show a errror

You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near 'primary ON product_shop.id_product = product.id_product at line 1

where is the problem? Thank you very much for the help.

can you tell me allan...

KeyTable and select not working with rowReordering???

I'm new with datatables and I'm trying to use inline editor with edit-icon.
My problem is that when I click on the edit icon the inline field appear but it is empty, it doesn't get the text.
The same thing happens with bubble editor.
Where am I doing wrong?
Thanks in advance for the help,
Alida

My datatable is this:

$('#table').DataTable({
dom : '<"H">rtB<"F">'
, language : { url : (curlang === 'it-it' )? snsbaseurl + "/sns/js/it-it.txt" : '' }
, processing : true
, serverSide : false
, data: $.map( data, function (value, key) {
return value;
} )
, jQueryUI : false
, responsive : true
, deferRender : true
, pagingType : "full_numbers"
, renderer : "bootstrap"
, idSrc: "id"
, createdRow: function( row, data, dataIndex ) {
JQ(row).attr('data-editor-id', data.DT_RowId);
}
, columns : [
{ className : "never" , data:"id", name:"id" }
, {
className : "center",
data:"field1",
name:"field1",
editField: "table.field1",
render: editIcon,
createdCell: function (td, cellData, rowData, row, col) {
$(td).attr('data-editor-field', "field1");
}
}

                          ]

                      , order : [[1, 'asc']]
                      , select: true
                      , buttons: [
                                { extend: "create",
                                  text: "Create new",
                                  editor: editr,
                                  className: "btn",
                                  formTitle: "Insert new",
                                  formButtons: [
                                        'Add',
                                        { label: 'Cancel', fn: function () { this.close(); } }
                                      ]
                        }]

                });

And the editor is:
var editor= new $.fn.dataTable.Editor( {
table: "#table"
, idSrc: "id"
, fields: [
{
label: "Label for field1:",
name: "table.field1"
}
]
, ajax: function ( method, url, d, successCallback, errorCallback ) {
// creation new element
}
} );

$('#table').on( 'click','td i.edit', function (e) {
e.stopImmediatePropagation(); // stop the row selection when clicking on an icon

        editor.inline( $(this).parent() );

    } );

hi all,
when we have searched data between two dates less than 6000 data display but when more than 6000 than data is not show on datatable cshtml page table.
please help me.
i'm new.
thank you
Ram