I have a list of online courses in a table, and the data is short except for class description. I followed the ideas in this post https://datatables.net//forums/discussion/comment/73046/#Comment_73046 to get my table to display the class description (which I output via PHP in a column of my table that is hidden via CSS) in a child row when I click on the title column (the first column) in the parent row. I was so happy to finally get it working!

But now when I shrink my web browser window, the responsive functionality I had before is no longer working. It hides the other columns I specified in my columnDefs, but I cannot expand the child row anymore to see the data. I think because I specified a custom format for the child row that only contains the class description, I have created some sort of conflict. When I try to expand the row details and then resize the browser window, I can see the hidden columns until I click on the event title, and then the child row data gets replaced with my class description. How can I make it so that my class description is displayed in addition to the other columns which are hidden for mobile devices?

Perhaps this makes sense as-is... but I am trying to get a JSFiddle going so you can see my problem in action. I will post that when I have it ready. Thanks!

I've gotten the Bootstrap Toggle plugin to work with inline editing with the following:
http://www.bootstraptoggle.com/

        columnDefs: [
            {
                createdCell: function (td, cellData, rowData, row, col) {
                        $(td).children()
                            .bootstrapToggle({size: 'mini'})
                            .addClass('toggle' + row);
                        console.log(row);
                    },
                targets: 6
            }
        ],
        rowCallback: function ( row, data ) {
            // Set the checked state of the checkbox in the table
            //.change() is bootstrapToggle plugin
            $('input.editor-active', row).prop( 'checked', data.coll.enabled == 1 ).change();
        }
    } );

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

Are there any options (maybe the field().def() api) that can be used to change the checkbox on the edit from to use the toggles provided by this API?

Kevin

when I use inline edit, there seem to be a bug with select field, the scenario is as follows:
1.the field type is select;
2.the options for select are only one ;
3.in inline edit, first i click the select field, and the option appears, then I choose the only option, then click somewhere else outside the table,the edit field close as expected, but the option chosed disappears too,with a blank field left.

could you tell me why and how to solve the problem?

I am using jQuery Datatables to filter the table contents using inputbox.

I want the output similar to SQL QUERY SELECT * from <Table-Name> where Description Not Like '%(SC)%'

Basically, I would like to display all the contents which do not have "(SC)" in their description along with the input provided in input textbox '#myInputTextField'.

I managed to get fetch the results which display the contents with (SC) in their description.

 $(document).ready(function () {
        $('#myTable').DataTable({
            "ajax": {
                "url": "/home/loaddata",
                "type": "GET",
                "datatype": "json"
            },
            "columns": [
                    { "data": "IdNo", "autoWidth": true },
                    { "data": "Description", "autoWidth": true },
            ]

        });
        check();
    });

    //Radio Toggle

    function check(radiocheck) {

        if (radiocheck == 1) {
            oTable = $('#myTable').DataTable();
            $('#myInputTextField').keyup(function () {
                var key=$(this).val();
                oTable.search('^(?:(?!(SC)).)*$', true, false).draw();  <---- This is where I want to show the data without "(SC)" matching the text entered into the textbox.
            })

        }
        else if (radiocheck == 2) {
            oTable = $('#myTable').DataTable();
            $('#myInputTextField').keyup(function () {
                oTable.search($(this).val() + " (SC)").draw();
            })

        }
    }

Thanks

I need to create a filter on a tipical columns created with images: each field is an image with this format:

<img src='http://lab.onclud.com/psm/blackcircle.png' class='notasg'>

I've created a fiddle example here.

An explication:
* there are only 2 diferents status: [assigned/not assigned] although there are 4 diferents images (black, red, yellow and green).
* Only black image correspond to not assigned status. The others three ones (red, yellow and green) correspond to assigned status.
* As you could see, I've tried to differentiate those status by class HTML tag in img elements (notasg/asgn).

Thanks in advance.

Hi,

I am currently programming an ajax-based website, which loads ALL its content always via ajax. There are a lot of datatables initialised when surfing through the site, but only one specific table has the fixedColumns option to true.

When I load this table, then load some other stuff into the website (the datatable disappears) and load the pagecontent with this table again, I get this error in my console:

uncaught exception: FixedColumns already initialised on this table

Thing is: all datatables get created through the same js function I wrote, and there the option destroy is set to true. This should prevent the "already initialised" error from popping up, as - if I understand the destroy option correctly - whenever a datatable is already initialised, it will get destroyed and then initialised again, automatically...?

Furthermore, all the tables get saved in an array while created -->

datatables[tid]=$("#"+tid).DataTable( { destroy: true, .......

I already tried just manually destroying ALL available tables:

var _tmp=Object.keys(datatables);
$.each(_tmp, function( index,value ) {
    if ($("#"+value).length==1)
        datatables[value].destroy();
});

But still the error pops up. How is that even possible??

If there is no easy answer without reviewing all of my code (there is a lot), is there at least a way catch this error and "UNinitialise" the table on-the-fly?

Thank you for your suggestions!
Marcus

when create datatables, the columns are auto generated {sTitle: something} object.

how to remove this object?

it makes my table two same title in one table.

thank you!

Hi, I have to disable 'edit' button based on selected record, here is what I did

I used default button option for editer

    table = $("#POTable").DataTable
     buttons: [
    { extend: 'create', editor: editor, text: 'Create' },
    { extend: 'edit', editor: editor, text: 'Edit' },
...

    table.on('select', function (e,dt, type, indexes) {
        if (type = 'row') {
            var exdata = table.rows('.selected', { select: true }).data()[0];
            if (exdata.ReceptionStatus === 'C') {
                table.button(0).disable();
                table.button(1).enable();
            } else if (exdata.ReceptionStatus === 'D') {
                table.button(0).enable();
                table.button(1).disable();
            } else {
                table.buttons().disable();
            }

        }
    })

The issue is I cannot disable 'edit' button, the event works however the button was enabled by somewhere inside, please help.

Thanks,
Wenbin

Hi,

I am trying to show/hide columns in the datatable using the state information stored in a database.

When the user hides few columns, and saves the information in the database using some profile name.

Later, when the user selects one of the saved profile names, from a dropdown, I need to -
1. Load the new state information from the database. How can I trigger the load state event?
2. How can I update the table with state information

I am able to do the save information. However, I am having trouble loading the saved state information.

I am using jquery.dataTables.js 1.10.6

stateLoadCallback: function (settings) {
                    var o;
                    //Get the selected profile name from the drop-down
                    var profile_value = $("#selected_profile_name" ).val();
                    if(profile_value != null){
                        var url = "/state/"+user_name+"/"+table_id+"/profile1";
                        $.ajax({
                          "url": url,
                          "dataType": "json",
                          "type": "GET",
                          "async":false
                        }).done(function ( data ) {
                              o = JSON.parse(data);
                              console.log('In done of stateLoadCallback'+data);
                        }).fail(function ( data ) {
                          console.log('In fail of stateLoadCallback'+data);
                        });
                      return o;
                    }
                }

Thanks

Hi,

I tried this nice example https://datatables.net/blog/2016-03-25 and it worked pretty well until I added an user with the German special letters like Ä, Ö or Ü (äöü).

In that cases the php API shows a blank page. How can I update the PHP file for the Editor to use these special letters? In some cases I can't controll the datebase so it must be usible with these letters.

Kind regards

Hello,

I am new with Editor plugin and I have a question.
I have successfully use it with basic initialisation and a simple SQL table with two columns.
So the plugin works great in this case.

I have a table named "param", its primary key is also named "param"
When I try to fill fields on Editor Generator web page and generate scripts I have the following error:
The primary key is automatically included by Editor and is not required in its own field.

And if I use my working example and rename columns name in js and php scripts I have the following error:
**DataTables warning: table id=table-param-detail - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1**

What is the correct way to use Editor with this SQL table?

Thanks in advance and have a nice day.

My datatables uses web api to deliver the data in JSON format.
After the page loads, the code makes the request and builds an array of data on return
like so
$.each(data, function (key, val) {
items.push(
[
val.ISIN
, val.Valoren
, val.FundName
, val.NAV
, val.NAV_Date
, val.CCY
, val.MasterAssetClass
, val.AssetClass
, val.GUID
]);
});

Once the data array is constructed, I load the datatable with the data, with these options.
I find that in chrome and firefox, the speed is very quick, but in IE its incredibly slow.
Im using the render options to format the column data but it still seems to apply the formatting to every single row even though the table only display 25 records.
If I comment out these options, the speed in IE is just as fast as chrome and firefox.

How can I only have the format apply to records in view?

$('#tgdFundResults').dataTable({
//paging: false,
//autoWidth:true,
pageLength: 25,
scrollY: 600,
data: items,
deferRender: true,
scrollCollapse: true,
scroller: true,
columnDefs: [
{ // The data parameter refers to the data for the cell (defined by the
// data option, which defaults to the column being worked with, in
// this case data: 0.
"render": function (data, type, row) {
//if the row data is not an empty string
if (data != '') {
var anc = '

<

div style="text-align:left;"><a class="opnSecurity" onclick="return false;" title="open fund info" data-guid="' + row[8] + '" href="funds/fundsFundInfo/?securityGUID=' + row[8] + '" target="window">' + data + '</a>';
return anc;
}
else { return ''; }
}, "targets": 2
}
, {
"render": function (data, type, row)
{ if (data != '') { return '<span style="float:right;">' + Number(data).toFixed(4) + '</span>'; } else { return '';}}
, "targets": 3
}
, {
"render": function (data, type, row)
{ if (data != '') { var dt = new Date(data); return dt.toLocaleDateString();} }
, "targets":4
}
, { "visible": false, "targets": [ 3 ] }
]
, initComplete: function (settings, json) { $('#preLoadingImg').hide(); }
});

I hope this is enough information for you all. If not please let me know what else you need to know

thanks in advance

Exporting to excel is rendering currency strings (eg. $1,234) with the symbol '$ Cherokee (Cherokee)'; resulting in the output of '1,234 $'.

This person is experiencing the same: https://datatables.net/forums/discussion/39707/export-to-xlsx-with-customized-styles

When I define my column like this

{ data: "ReviewDate", type: "date", render: $.fn.dataTable.render.moment("DD-MM-YYYY","YYYY-MM-DD","en")

I always get "invalid date" returned.

I've noticed a couple of bugs in the the built-in datetime field-type control of Editor.
They are both to do with current date selection being at the end of a month and the number of months in the date being more than is valid for the month of the new date selection.

The issues can be reproduced on http://live.datatables.net/ziziwuse/4/edit

Follow these steps to reproduce:
1. Click the Edit button
2. On the form, click the Date entry box, the datetime picker will open.
3. Use the Month prev icon to find Dec 2016, click on 31 Dec 2016, the datetime control will close.
4. Click on the input box again, click the Month Prev button once. Here you will see this first bug, you have to click it twice to get it to go to November.
5. Click the Month Prev button again to display November 2016. Now click November 30th. Here you will see the second bug, the date selected is 30 DECEMBER 2016, not 30 November 2016.

These issues will be encountered whenever the date selected is the last of the month and the next/prev month has less days in it.
The bugs are present in Editor 1.5.6 and Editor 1.6.1

The issue seen at Step 4 can be fixed by adding

that._correctMonth( that.s.display, that.s.display.getUTCMonth() - 1);

as line 7577 (Editor 1.6.1) so it reads

                    if ( parent.hasClass(classPrefix+'-iconLeft') ) {
                        // Previous month
                        that._correctMonth( that.s.display, that.s.display.getUTCMonth() - 1);
                        that._setTitle();
                        that._setCalander();

                        that.dom.input.focus();
                    }

The issue seen at Step 5 can be fixed by adding

                        that.s.d.setUTCDate(1);

at line 7613 (Editor 1.6.1) so it reads:

                        that.s.d.setUTCDate(1);
                        that.s.d.setUTCFullYear( button.data('year') );
                        that.s.d.setUTCMonth( button.data('month') );
                        that.s.d.setUTCDate( button.data('day') );

Roger.

Hello,

I am completely new to this forum and to developing plug-ins, so please go easy on me.

I have followed the 'Sliding child rows' tutorial here and have used this functionality in my own web pages. But it occurred to me that I could create a plug-in to do some of the work for me.

Below is what I have come up with so far. Before I go any further with it (if indeed I do, depending on feedback), I though I'd open it up to the forum for discussion.

(function($) {
    var ToggleRow = function ( dt ) {
        this.toggle = function( dtRow ) {
            // if row already showing, close it.
            if (dtRow.child.isShown()) {
                this.closeRow( dtRow );
            }
            else {
                showRowData( dtRow );
            }
        };
        // code borrowed from the resource at: https://datatables.net/blog/2014-10-02
        this.closeRow = function ( dtRow ) {
            var showingRow = $(dtRow.node());

            $('div.slider', dtRow.child()).slideUp(function () {
                dtRow.child.remove();
                showingRow.removeClass('shown');

                $(dt.table().node()).trigger('rowClosed', [dtRow]);
            });
        };
        var showRow = this.showRow = function ( dtRow, data ) {
            var selectedRow = $(dtRow.node());
            dtRow.child(data).show();

            $('div.slider', dtRow.child()).slideDown(function () {
                selectedRow.addClass('shown');

                $(dt.table().node()).trigger('rowShown', [dtRow]);
            });
        };
        // relies on data attributes being present for the row being toggled
        var showRowData = function ( dtRow ) {
            var row = $(dtRow.node());
            var requestType = row.data('request-type') || "GET";
            var requestUrl = row.data('request-url');
            var requestData = row.data('request-data') || null;
            var contentType = row.data('content-type') || "application/json; charset=utf-8";
            var dataType = row.data('data-type') || "json";
            var callback = row.data('callback');
            $.ajax({
                type: requestType,
                url: requestUrl,
                data: requestData,
                contentType: contentType,
                dataType: dataType,
                success: function ( response ) {
                    var data = response;
                    if (callback) {
                        var fn = window[callback];
                        if (fn) data = fn(response);
                    }
                    showRow( dtRow, data );
                },
                error: function (response) { showRow( dtRow, response ); }
            });
        };
    };

    $.fn.dataTable.ToggleRow = ToggleRow;
    $.fn.DataTable.ToggleRow = ToggleRow;
}(jQuery));

Thanks in advance to anyone who cares to comment on this endeavour

I need to prevent a row from inline editing based on a data that is not displayed in grid, but available internally from ajax binding. Meaning some rows will be editable and some rows cannot be editable. The columns has different edit fields like dropdowns, checkbox list, text box etc.

Hello everyone,

i am now trying to modify the table before saving it as EXCEL and i don't know how to add two sentences before the table starts. For example add one new row before the table and input there a text. I am now using the following code to make the column G blue. I can use the customize ability, but no idea how

    buttons: [{
                        extend: 'excel',
                        text: 'Save in EXCEL',
                        filename: 'td900',
                        customize: function(xlsx) {
                            var sheet = xlsx.xl.worksheets['sheet1.xml'];
                           // $('c[r=A1] t', sheet).text( 'Custom text' );

                            // Loop over the cells in column `F`
                            $('row c[r^="G"] ', sheet).each( function () {
                                // Get the value and strip the non numeric characters

                                   if ( $( this).text() !== "needed Adjustment" ) {
                    $(this).attr( 's', '20' );
                }

                            });
                        }


                            }]

Hello,

is it possible to add a 2nd line with information to a row?

Thx for reply!

Hi , In my application iam intigrating jq-Datatable with gridview Control, with below code,
var table = $('#<%=GridView1.ClientID %>').prepend($('<thead></thead>').append($('#<%=GridView1.ClientID %>').find('tr:first'))).DataTable({ "paging": true, "ordering": false, "info": false, "pageLength": 10, "bLengthChange": false, });

and the functionalitlity working fine, but the problem is,In my gridview i have edit button for every row, if we click the edit button,the page is goes to server side and postback is occured. here if we are in gridview Page-Index 2 and click edit button, after postback gridview Page-Index possitin comes to 0. https://datatables.net/forums/discussion/573/how-to-stay-on-current-page-after-re-draw we have some stuff in above page but i am confusing to integrate. How can i solve the issue?
(Sorry For My English)