I'm new to DataTables and have been working on implementing & customizing the basic example to learn more about how to use this fantastic tool. I've learned a tremendous amount going through the examples, searching the support forum and exploring the docs/manual.

I am currently stuck on the following: I am trying to do make some minor cosmetic changes to the length object and the filter object using jQuery. The changes are being made the way I want them. However, in doing so, it appears that I have inadvertently disabled the functionality of the dropdown button and the search box. (Note: I am fairly new to JS/jQuery too).

I have my example posted at: http://live.datatables.net/kuyiqoku/3/edit.

The code in question is toward the buttom of the Javascript, inside a conditional statement. When the condition is TRUE, my questionable code is executed and the JS functionality is disabled. When the condition is FALSE, everything works fine.

Hope this is clear. Any help/suggestions would be greatly appreciated.

Hi,
I am finding that when clicking on a cell altering its contents & then tabbing to the next cell that although the border of the next cell changes colour the cursor remains in the previous one. I tried putting adding submission on blur but this had no effect. Am I missing something obvious in my set up?

Current editor & table implementations:

editor = new $.fn.dataTable.Editor({
data: data,
table: "#mileageTable",
idSrc: "EditingGridlineRowId",
keys: true,
fields: [
{ name: "car" },
{ name: "person" },
{ name: "mileage" }
],
});

        var table = $('#mileageTable').DataTable({
             "language": {
                "zeroRecords": "No records to display"
            },
            fixedColumns: true,
            responsive: true,
            dom: 'Bfrtip',
            ordering: false,
            searching: false,
            paging: false,
            info: false,
            data: mileageRecords,
            columns: [
                {
                    data: "car",
                    className: "centreColumn"
                },
                {
                    data: "person"
                },
                {
                    data: "mileage",
                    width: "20px",
                    className: "centreColumn"
                }
            ],
            rowId: "recordId",
            keys: {
                columns: ':not(.disableEditing, :first-child)',
                editor: editor,
                editOnFocus: true
            },
            autoFill: {
                columns:  ':not(.disableEditing, :first-child)',
                editor: editor
            }
        }); // end table

        $('#mileageTable').on('click', 'tbody td:not(.disableEditing, :first-child)', function (e) {    
            editor.inline(this);
                //editor.inline(this, {
                //    onBlur: "submit"
                //}); (this did not help with the cursor moving on issue)
        });

I am very new to DataTables/Editor - just bought and downloaded it. I'm playing with the Generator, I created a download for a table on my database, uploaded it to my server etc - the data comes in OK from the database, but there is no styling (Bootstrap) applied. Hmm. Also I don't see jQuery included in the file generated by the Generator. I tried it on the live Generator site (https://editor.datatables.net/generator/index) and hit "Run Now" - and the live page also lacks CSS styling completely. What am I missing?

I have two working pages: one with child rows and one with check boxes. When I try use both features on a single page, I get the error: "caught TypeError: Cannot read property 'style' of undefined"

Does anyone have time to skim this page and see if you can spot the problem.

/* Formatting function for row details - modify as you need */
function format ( d ) {
    console.log(d);
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Explanation:</td>'+
            '<td>'+d.explanation+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Groovydoc:</td>'+
            '<td>'+d.groovydoc+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Source Code for Class:</td>'+
            '<td>'+d.source_code+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Example of Use:</td>'+
            '<td>'+d.use_case+'</td>'+
        '</tr>'+
    '</table>';
}

var example;

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        "ajax": "../php/checkbox.php",
        "table": "#example",
        "fields": [ {
                label:     "Active:",
                name:      "active",
                type:      "checkbox",
                separator: "|",
                options:   [
                    { label: '', value: 1 }
                ]
            }, {
                label: "Category:",
                name:  "category"
            }, {
                label: "Test:",
                name:  "test"
            }, {
                label: "Automated:",
                name:  "automated"
            }, {
                label: "Request/Response:",
                name:  "request_response"
            }, {
                label: "Explanation:",
                name:  "explanation"
            }, {
                label: "Groovydoc:",
                name:  "groovydoc"
            }, {
                label: "Source Code for Class:",
                name:  "source_code"
            }, {
                label: "Example of Use:",
                name:  "use_case"
            }
        ]
    } );

    var table = $('#example').DataTable( {
        "dom": "Bfrtip",
        "ajax": "../php/checkbox.php",
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "category" },
            { "data": "test" },
            { "data": "automated" },
            { "data": "request_response" },
/*          { "data": "explanation" },
            { "data": "groovydoc" },
            { "data": "source_code" },
            { "data": "use_case" }, */
            {
                data:   "active",
                render: function ( data, type, row ) {
                    if ( type === 'display' ) {
                        return '<input type="checkbox" class="editor-active">';
                    }
                    return data;
                },
                className: "dt-body-center"
            }
        ],
        select: {
            style: 'os',
            selector: 'td:not(:last-child)' // no row selection on last column
        },
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ],
        rowCallback: function ( row, data ) {
            // Set the checked state of the checkbox in the table
            $('input.editor-active', row).prop( 'checked', data.active == 1 );
        },
        "order": []
    } );

    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        console.log('click event');
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
} );


    </script>
</head>
<body class="wide comments example">

    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Category</th>
                <th>Test</th>
                <th>Automated</th>
                <th>Request/Response</th>
                <th>Active</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Category</th>
                <th>Test</th>
                <th>Automated</th>
                <th>Request/Response</th>
                <th>Active</th>
            </tr>
        </tfoot>
    </table>

</body>
</html>

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

trying to get datatables to scroll to the bottom row.

my code:

        transactions_table.on('draw', function () {
            var num_rows = transactions_table.data().length;
            //transactions_table.scroller.toPosition(num_rows - 1);
            transactions_table.row(num_rows - 1).scrollTo();
        });

I have tried either of the 2 lines toposition() and scrollto() and neither works, the table just stays at the top row.

paging, searching, ordering, info are all set to false.

I have tried replacing the "num_rows-1" with just the number 100, still no scroll.

The num_rows variable does get set to the correct # of rows in the data, so the issue is with the scrolling.

Not sure what I'm missing.

Thanks

My page reads a lot of data from my database when I bring it up. But it doesn't read and write the values of my check boxes. (This worked at one time.) Does anyone see an error in this code?

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
"ajax": "../php/checkbox.php",
"table": "#example",
"fields": [ {
label: "Active:",
name: "active",
type: "checkbox",
separator: "|",
options: [
{ label: '', value: 1 }
]
}, {
label: "Category:",
name: "category"
}, {
label: "Test:",
name: "test"
}, {
label: "Automated:",
name: "automated"
}, {
label: "Request/Response:",
name: "request_response"
}
]
} );

$('#example').DataTable( {
    order:[],
    dom: "Bfrtip",
    ajax: "../php/checkbox.php",
    columns: [
        { data: "category" },
        { data: "test" },
        { data: "automated" },
        { data: "request_response" },

/* { data: "explanation" }, */
{
data: "active",
render: function ( data, type, row ) {
if ( type === 'display' ) {
return '<input type="checkbox" class="editor-active">';
}
return data;
},
className: "dt-body-center"
}
],
select: {
style: 'os',
selector: 'td:not(:last-child)' // no row selection on last column
},
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
],
rowCallback: function ( row, data ) {
// Set the checked state of the checkbox in the table
$('input.editor-active', row).prop( 'checked', data.active == 1 );
}
} );

$('#example').on( 'change', 'input.editor-active', function () {
    editor
        .edit( $(this).closest('tr'), false )
        .set( 'active', $(this).prop( 'checked' ) ? 1 : 0 )
        .submit();
} );

} );

</script>

</head>
<body>

Editor example Always shown checkbox

        <table id="example" class="display" style="width:100%">
            <thead>
                <tr>
                    <th>Category</th>
                    <th>Test</th>
                    <th>Automated</th>
                    <th>Request/Response</th>

<th>Active</th>
</tr>
</thead>
</table>
</body>
</html>

Hi,

I've got inline editing enabled. When the user clicks into the row and then clicks out, it automatically updates the row with default values for every dropdown. It's set to save on exit of any TD. Is there a way to prevent this from happening?

Thanks!

Hi,
I have a problem updating calculated column when ordering.
My HTML is composed from :
an Input text
a table with (3) three columns, titled respectively , column1, column2, column3.
the value of column3 in each row will be: the input text value from witch I subtract the sum of column2 value in all previous rows including the current row.
My issue is : when I order my table, let's say based on column1, I want to update column3 following the same logic as described above. the values in column3 aren't calculated as they should.
this is my JsFiddle to reproduce the case : https://jsfiddle.net/rgzk097b/62/.
Any suggestions!
Thanks.

Hi Everyone,
I have a problem updating calculated column when ordering.
My HTML is composed from :
an Input text
a table with (3) three columns, titled respectively , column1, column2, column3.
the value of column3 in each row will be: the input text value from witch I subtract the sum of column2 value in all previous rows including the current row.
My issue is : when I order my table, let's say based on column1, I want to update column3 following the same logic as described above. the values in column3 aren't calculated as they should.
this is my JsFiddle to reproduce the case : https://jsfiddle.net/rgzk097b/62/.
Any suggestions!
Thanks.

Hi,

On our Enterprise application we are facing a issue on IE.11, we are using data-table inline-editor for tables in that we are using on click event, after submit of edited fields we are facing this issue.

Usage:
when user clicks on outside of the table after editing the exiting fields in table.

Current Behavior: In our table we are using date picker(type : 'datetime') for our requirement, In IE browser after updating the exciting date to new date then click out side and trying to update another field its not working, its completely freezes the section until we click out side one more time.

Expected Behavior: we are expecting on first-click it should work as normal, its should not freeze

"keys" : {
"columns" : ".inlineEditable",
"keys" : [ 9 ], // 9 = tab
"editor" : _taskEditor,
"editOnFocus" : true
},

inline : {
onBlur : 'submit'
}

Please give us suggestion on this, Thanks

Greetings,

Pranesh Pamulapati

When I have a responsive table inside of a tab, it is not working properly when going to (either resizing or emulating) a small screen size. Outside of a tab it is fine. I am using datatables 1.10.18 with Foundation 6. In both cases, I still haven't solved the wrapping on the # per page/search at the top, but the bigger issue is the responsive within a tab. Here is a test page:

https://sandbox.jhavalanche.org/dt-test.php

Thanks.

Hello!

I noticed that when my browser's scrollbar is displayed, the breakpoints are not triggered at the exact widths defined. For instance, in Google Chrome, if I have a breakpoint with the width 1200, the breakpoint will actually trigger when my window's size is 1217px. By looking at the source code, I noticed that in the "_resize" function, you compare the breakpoints' widths with the window's width defined in the following way:var width = $(window).width(); which does not include the scrollbar in Google Chrome (and perhaps other browsers). Meanwhile, window.innerWidth returns a consistent cross-browser result. Would you consider using that property instead in future versions or add the ability to include or exclude the scrollbar? Or can I already achieve that in a way that I'm not aware of?

Thank you!

Changing browser from IE to Chrome results in an Inline Bubble edit no longer working. Internal site, and unable to post the code. Is this a known bug / issue?

Out of the box, it looks like server-side processing will generate ajax calls that may look like this:
?draw=1&columns[0][data]=someColumnXYZ&columns[0][name]=&columns[0][searchable]=true&columns[0][orderable]=true&columns[0][search][value]=&columns[0][search][regex]=false

I'm interested in whether this information can be sent as JSON instead for easier processing on server side. For reference, I am looking to process these with a Java backend (Spring MVC). Having to parse this information manually seems quite inelegant. Is there a better way?

Hello friends,
I ran the editors samples application and the Duplicate button in it works perfectly. However, I tried to replicate the code in my application, all buttons work except the Duplicate button. The only difference I can think of between my application and editor's samples application is that I'm trying to duplicate row from only one table, but the samples application has a join function in it involving two tables.

The other thing I noticed "e, dt, node, config" in my application are shown grey, but in the samples application which works perfectly those are white. should I configure "e, dt, node, config" somewhere?

Thanks so much!
Alan

I have an api response of data that im using to populate my table. the data looks like this:
{ code: 'CPX154', identity: '108', name: 'Joshua Laryea', created_at: '12:23 pm', phone: '0559546287', pickup: [ {desc: 'Shirts', quantity: '15'}, {desc: 'Suit', quantity: '2'}, {desc: 'Jeans', quantity: '6'} ] }, { code: 'CGH154', identity: '108', name: 'Gloria Fynn', created_at: '15:23 pm', phone: '0249563287', pickup: [ {desc: 'Shirts', quantity: '5'}, {desc: 'Trouser', quantity: '2'}, {desc: 'Shorts', quantity: '1'}, {desc: 'Suit', quantity: '2'}, {desc: 'Jeans', quantity: '6'} ] }
After doing a JSON.parse(data) i am able to access the data like any other normal object and have used it to populate the datatable. My issue is that on click of any of the table row, when i get access to that row's data the field 'pickup' shows [object object] and i cannot parse it with JSON also. it results in an error.

please help

I want to display 4 level row grouping data in datatable using jquery .please help me on this

Is there a way to update the title attribute of a cell with the newly edited data value after an inline edit?
I currently use the createdCell callback function to add a title to the td when the table is created:

function (td, cellData, rowData, row, col) {
    $(td).attr('title', cellData)
}

Is there a way to update the title attribute (or any other attr I guess) after an inline edit?

I'm using datatables incorprated inside OctoberCMS - a Laravel based flatfile cms.
So as to make best use of the generator, I'd like to keep datatables related files in a separate folder off the webroot.

I need to pass a user ID to the datatables php backend - backend for security reasons then send a backend filtered dataset to the datatables front end.

Has anyone got any ideas on best practices?

Always greatly appreciate any help

Hello,

I have been playing around with DataTables a bit, but of late to fix some performance issues I am looking at implementing a pagination method with the large amount of data i have to deal with. So I have about 100k records in my database, i retrieve only 500 records at a given time, when the user clicks on the last page of the table the next 500 records are retrieved. Now i have been able to enable the retrieval of small chunks but when i try to use the table.row(":last", {order:"applied"}).data() i am unable to get the data of the page that was clicked but instead i get the data of the previous page that i was on. Does anyone know how i can retrieve the very last row on the page i just clicked or of the very last row among all the rows that exist in the table currently?