When selecting a February 2017 date, it instead returns a March date.

Steps to reproduce:
1. Go to date example page.
2. Click "New" button.
3. Select a February 2017 date.

... but they do work with javascript source.

Here's a simple test case.

http://live.datatables.net/fupinifi/2/edit

If I move the input data to a file and use ajax to load it, the button clicks stop working. I have the few lines to load the ajax source commented out in the script. The content of example.json is just the same array that I have assigned to 'data' at the top of the script.

Appreciate some help!!

as i am saying on the title when i am using init of datatables more then once the each table has been initialized the select of all the tables gets the data from last table

            initComplete : function () {
                this.api().column(1).every(function(){
                    var column = this;
                    var select = $('<select class="form-control input-sm"><option value="">All</option></select>')
                        .appendTo( $('.filter_data2').empty() )
                        .on( 'change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );
                            column
                                .search( val ? '^'+val+'$' : '', true, false )
                                .draw();
                        } );

                    column.data().unique().sort().each( function ( d, j ) {
                        select.append( '<option value="'+d+'">'+d+'</option>' )
                    } );
                });

            }

Hello volks,

i've just got the editor licence and i'm struggeling to get my table showing the information i want it to.
The first screenshot shows my current table, second shows the edit select field.

I want to have the label of the selected value from the DB in the table by default not the value.
I do also have a readonly field which has options defined which is also only showing the value not label.

**Status **should display the label of the current status in the table (shows int) and select on edit (this works)
**Type **should display the label and does not need to be edited

here is my js:

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

$(document).ready(function() {

    editor = new $.fn.dataTable.Editor( {
        ajax: {
            url: 'libs/basic/datatables/orderposition.php',
            data: {
                "collectiveinvoice": 141
            }
        },
        table: "#datatable",
        fields: [
            {
                label: "Status:",
                name: "status",
                type: "select"
            },
            {
                label: "Beschreibung:",
                name: "comment",
                type: "ckeditor",
                opts: {
                    toolbarGroups: [
                        { name: 'forms', groups: [ 'forms' ] },
                        { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
                        { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
                        { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
                        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
                        { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
                        { name: 'links', groups: [ 'links' ] },
                        { name: 'insert', groups: [ 'insert' ] },
                        { name: 'styles', groups: [ 'styles' ] },
                        { name: 'colors', groups: [ 'colors' ] },
                        { name: 'tools', groups: [ 'tools' ] },
                        { name: 'others', groups: [ 'others' ] },
                        { name: 'about', groups: [ 'about' ] }
                    ],
                    removeButtons: 'Source,Save,Templates,NewPage,Preview,Print,Cut,Copy,Paste,PasteText,PasteFromWord,Find,SelectAll,Scayt,Replace,Form,Checkbox,TextField,Radio,Textarea,Select,Button,ImageButton,HiddenField,Subscript,Superscript,CreateDiv,BidiLtr,BidiRtl,Language,Anchor,Image,Flash,Smiley,SpecialChar,Iframe,Font,About,Maximize'
                }
            }, {
                label: "Menge:",
                name: "quantity"
            }, {
                label: "Preis:",
                name: "price"
            }, {
                label: "Steuer:",
                name: "tax",
                type: "select"
            }
        ]
    } );
    // Disable KeyTable while the main editing form is open
    editor
        .on( 'open', function () {
            table.keys.disable();
        } )
        .on( 'close', function () {
            table.keys.enable();
        } );

    // Activate an inline edit on click of a table cell
    $('#datatable').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this, {
            // Submit on leaving field
            onBlur: 'submit'
        } );
    } );


    table = $('#datatable').DataTable( {
        dom: "<'row'<'col-sm-4'l><'col-sm-4'B><'col-sm-4'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-5'i><'col-sm-7'p>>",
        ajax: {
            url: 'libs/basic/datatables/orderposition.php',
            data: {
                "collectiveinvoice": 141
            }
        },
        order: [[ 1, 'asc' ]],
        columns: [
            { data: "id" },
            { data: "type" },
            { data: "status" },
            { data: "comment" },
            { data: "quantity" },
            { data: "price" },
            { data: "tax" }
        ],
        select: false,
        buttons: [
            // Export Button
            {
                extend: 'collection',
                text: 'Export',
                buttons: [
                    'copy',
                    'excel',
                    'csv',
                    'pdf',
                    'print'
                ]
            },
        ]
    } );
} );

here is server side php:

Editor::inst( $db, 'collectiveinvoice_orderposition' )
    ->where( 'status', 0, '>' )
    ->where( 'collectiveinvoice', $_REQUEST['collectiveinvoice'] )
    ->fields(
        Field::inst( 'id' )->set(false)->validator( 'Validate::unique' )->validator( 'Validate::numeric' ),
        Field::inst( 'status' )->options( function () {
            return array(
                array( 'value' => '0', 'label' => 'gelöscht' ),
                array( 'value' => '1', 'label' => 'aktiv' ),
                array( 'value' => '2', 'label' => 'deaktiviert' ),
            );
        }),
        Field::inst( 'quantity' )
            ->validator( 'Validate::numeric' )
            ->getFormatter( 'Format::toDecimalChar' )
            ->setFormatter( 'Format::fromDecimalChar' ),
        Field::inst( 'price' )
            ->validator( 'Validate::numeric' )
            ->getFormatter( 'Format::toDecimalChar' )
            ->setFormatter( 'Format::fromDecimalChar' ),
        Field::inst( 'tax' )->options( Options::inst()
            ->table( 'taxkeys' )
            ->value( 'value' )
            ->label( 'value' )
        ),
        Field::inst( 'comment' ),
        Field::inst( 'type' )->set(false)->options( function () {
            return array(
                array( 'value' => '0', 'label' => 'Manuell' ),
                array( 'value' => '1', 'label' => 'Artikel (Kalk)' ),
                array( 'value' => '2', 'label' => 'Artikel' ),
                array( 'value' => '3', 'label' => 'Perso' ),
            );
        }),
        Field::inst( 'file_attach' )->set(false),
        Field::inst( 'perso_order' )->set(false)
    )
    ->process( $_POST )
    ->json();

In addition, i want to display buttons based on the DB values of "file_attach" and "perso_order" so that they only show and have a reference in them to the db field, how would one do that? Or in other words how do i add a custom field to the table anyways (which is readonly)?

Thanks for this great tool!

Regards

How do you add the length menu to the Editor DataTables:
$('#datatable-table').DataTable( {
dom: "Bfrtip",
pageLength: 25,
lengthMenu: [ 25, 50, 75, 100, "All" ],
ajax: {
url: "../../server/admin_data.php",
type: "POST"
},
serverSide: true,
columns: [
{ data: "clli" },
{ data: "address" },
{ data: "iris" },
{ data: "client_name" },
{ data: "fic_bay" },
{ data: "panel" },
{ data: "jack_number" },
{ data: "reserved_by" },
{ data: "notes" }
],
select: true,
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );
} );

The Length Menu is not displaying.

How style this example, but using datatables.bootstrap.css?

The image attached shows my current result.

Hi,

I'm trying to use the editor to remove items from my server, programmatically without the datatables. I managed to use create() and edit() in a following way: editor.edit(id,false); editor.val('name', 'Joe'); editor.submit(). This works fine for create() and edit() but when I user a similar approach to remove() it doesn't seem to send anything else than 'action: remove' to my server within the form data.

What I'm doing wrong here?

Hi!

I need to use server-side pagination so I end up with the examples page, but I realize that the asp classic example only work with datables old version so I began to look over the internet how make it work...

after several hours I realize that I need to parse JSON object that datable send in tubthe Request; I found this library to parse json https://github.com/rcdmk/aspJSON

but I can´t parse the request object... Is there any example with asp classic in version 1.10+ ? is there any way to function any way?? the only solution I have left is to use backward compatibility its ok?

Thnks in advance!
LDM

Hi yall!
thank you for this awesome plugin!

i'd like to extend my table header with a select box which contains several option like "SUM, AVG, MIN, MAX" and so on.
i've added the select box to every column like

$(".dataTable thead").first().each(function(i) { $('<tr class="combos"></tr>').prependTo($(this)); $('<tr class="bigheader"></tr>').appendTo($(this)); $(this).find('th').each(function(i) { $('<th><select><option value="ciao">Ciao</option></select></th>').appendTo($('.combos')); $('<th><input type="text" class="columnfilter"/></th>').appendTo($('.bigheader')); }) })
First question: Is there a way to set the select only the columns which type is number?

Second question: When i set the "on Change" method to the select box, how can i perform the operation to that single column?

Thankyou

I'm experimenting with the Scroller extension to see if I can use it a log message display. As new messages are added to the table the log window should scroll to the bottom (only if the user is not somewhere else in the display) to display the latest messages. The scrolling works with `table.row(':last').scrollTo(false);' but the problem is the Scroller doesn't always display the data. It seems that after a certain number of rows (100 maybe) the Scroller has problems displaying the data if the window is being scrolled.

Here is the test case. It starts out with 25 rows then the script adds 4 rows at a time at 1 second intervals. When it reaches ~80 rows the output changes to a 45 degree linear gradient. Scrolling above this then back down will properly display the rows.

Currently I have another method using things like $('.dataTables_scrollBody')[0].offsetHeight) and $('.dataTables_scrollBody').scrollTop() to control the scrolling. I wrote the code when I didn't understand anything about DT and JS and it has a memory leak. Instead of fixing it I was going to try Scroller for the API's available. If Scroller won''t work I will fix my original code.

Kevin

Is it possible to combine the Select Inputs and the Text Inputs? I use DataTables on several tables, always the same initialization. I would like to chose the column for the Select Inputs by the column header since the column that I want the select list on is not always in the same position. Then all the others I want to have the Text Inputs. This way I'll have one column that has the Select Inputs and all others that have the Text Inputs.

I have been able to implement the different Select and Text Inputs from these two examples. But I'm not good enough with jquery and javascript to figure out how to select the right column for the Select input and have all the others be Text inputs. The tables that I use can be anywhere from 3 columns to 75+ columns. And I want to select the column by the header name for the Select input.

And on top of all of this, is there a way to make the Select Input a MultiSelect Input? I am having it a selector for the state and would like to be able to select multiple states at once.

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

I am using fixed columns. I have it working as desired, however, I am getting a weird error, which is making all data beyond the initial page not viewable.

Uncaught FixedColumns already initialised on this table
m @ dataTables.fixedColumns.min.js:6
(anonymous) @ dataTables.fixedColumns.min.js:35
dispatch @ jquery-2.2.3.min.js:3
r.handle @ jquery-2.2.3.min.js:3
trigger @ jquery-2.2.3.min.js:4
(anonymous) @ jquery-2.2.3.min.js:4
each @ jquery-2.2.3.min.js:2
each @ jquery-2.2.3.min.js:2
trigger @ jquery-2.2.3.min.js:4
s @ datatables.min.js:136
wa @ datatables.min.js:109
xb @ datatables.min.js:100
(anonymous) @ datatables.min.js:97
i @ datatables.min.js:95
success @ datatables.min.js:95
i @ jquery-2.2.3.min.js:2
fireWith @ jquery-2.2.3.min.js:2
z @ jquery-2.2.3.min.js:4
(anonymous) @ jquery-2.2.3.min.js:4

I got a database with 738.600 Rows and 20 ( + 1 uniqueID) columns.
This is my app.js and the error is "invalid JSON response".
If i manually set the LIMIT in the simple function from ssp.class.php to e.g. 0, 10000 i get data displayed, non paginated and non filterable, 10000 on one site.

If i manually open my webiste + getData.php i see blank page.

$(document).ready(function() {
  $('#ItemList').DataTable({
    "processing": true,
    "serverSide": true,
    "paging": true,
    "ajax": {
      "url": '../getData.php',
      "dataSrc": 'data', //data because ssp.class.php adds data to it
      "type": 'POST'
    },
    "columns": [
        { "data": 'Held' },
        { "data": 'Waffe' },
        { "data": 'Schild' },
        { "data": 'Ring' },
        { "data": 'Amulett' },
        { "data": 'Mantel' },
        { "data": 'Off' },
        { "data": 'OffT' },
        { "data": 'Def' },
        { "data": 'DefT' },
        { "data": 'Hybrid' },
        { "data": 'HybridT' },
        { "data": 'DefA' },
        { "data": 'DefAT' },
        { "data": 'OffA' },
        { "data": 'OffAT1' },
        { "data": 'OffAT2' },
        { "data": 'HybridA' },
        { "data": 'HybridAT1' },
        { "data": 'HybridAT2' },
        { "data": 'ExtraTruppen' }
      ]
  });
});

Hello all,
I use the last DataTables 1.10.12 and Scroller 1.2.0 , when I use ajax.reload() refresh data, the scroll bar position will move to the top of table . How can I move the scroll bar to the exact row after reload data.

Thanks,
August

I am attempting to check/uncheck a checkbox that is a column on each row. If I examine $('#grid').DataTable().rows().nodes(), this only returns the rows that are visible on the current page. Of course if I examine $('#grid').DataTable().rows(), this returns the indexes of all rows. It appears that I have to use the nodes method to actually manipulate the DOM.

Do I have to loop through all of the rows to do this?

Is there a way an easier way to check/uncheck all of the results on all pages?

Thanks.

I have two drop-down lists. I wish to have the second list populate, based on the selection within the first list. Searching the site, I found a previous question (from 2013), which suggested that an updated method may have been implemented in a later version. Any guidance will be greatly appreciated. Here is the previous discussion: https://datatables.net//forums/discussion/16835.

Hello Alan,

Please provide me a solution for this problem.

Please find (picture 1) - this is how the datatable looks. Each column is using column search filter provided under YADCF plugin.
What is happening (picture 2) is that when you export the grid using cvs or pdf.. it shows that 'x' beside the title.

I have tried, customize option with no luck. Is there a spot in the button.min.js or pdfmaker.min.js file.. which I can edit ?

Thanks for your help.

I am using your product in our company's applications and it's easy to use, documented well and works great. I did notice that Allen seems to be the only one from the "company" that answers questions. He does a great job answering questions and providing support. However, I'm concerned if something happens to Allen. Are there others that do provide support or can provide support?

Thanks.
Tom

How can I change the color of Column 14 to #000000?

Something similar to $('td', row).css('backgroundColor', '#000000'); but only cells in column 14

I have tried columndefs too but it just changes the header cells in the datatable and not the child rows.