Is it possible to cancel all KeyTable navigations when a field contains an error?

Example: https://editor.datatables.net/examples/extensions/keyTable.html

1. Click any first name field. This field is required.
2. Hit the Delete key to clear the field
3. Click any other column to trigger key-blur

The behavior right now is that the selected "first name" is reverted to its original value, because an empty value is a field error.
Instead I'd like the field to stay focused until the user fixes their mistake, or until they explicitly hits the Esc key.

Can it be done? Perhaps with the right combinations of form-options and some custom code in close/blur events.

Hi all,

i have a problem with one of my tables. It has joined data on an oracle-db, when trying to edit a row or insert a new one.

Here are my codes:

PHP

<?php

/*
 * Editor server script for DB table STG_TAB_ARTIKEL
 * Created by http://editor.datatables.net/generator
 */

// DataTables PHP library and database connection
include( "lib/DataTables.php" );

// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Options,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate;


    // Build our Editor instance and process the data coming from _POST
    Editor::inst( $db, 'STG_TAB_ARTIKEL a', 'a.PK_ARTIKEL_ID' )
        ->debug(true)
        ->fields(
            Field::inst( 'a.ARTNR' )
                ->validator( 'Validate::unique' )
                ->validator( 'Validate::required' )
                ->validator( 'Validate::numeric' ),
            Field::inst( 'a.FK_STG_TAB_ARTKAT' )
                ->options( Options::inst()
                    ->table( 'STG_TAB_ARTIKELKATEGORIE' )
                    ->value( 'ARTKATNR' )
                    ->label( 'ARTKAT' )
                )
                ->validator( 'Validate::dbValues' ),
            Field::inst( 'a.ARTBEZ' )
                ->validator( 'Validate::notEmpty' ),
            Field::inst( 'a.ARTMAß' ),
            Field::inst( 'ak.ARTKAT' )
        )
        ->leftJoin( 'STG_TAB_ARTIKELKATEGORIE ak', 'ak.ARTKATNR', '=', 'a.FK_STG_TAB_ARTKAT')
        ->process( $_POST )
        ->json();

?>

JS

/*
 * Editor client script for DB table STG_TAB_KUNDEN
 * Created by http://editor.datatables.net/generator
 */

(function($){

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        ajax: 'sources/table.STG_TAB_ARTIKEL.php',
        table: '#STG_TAB_ARTIKEL',
        fields: [
            {
                "label": "Artikel:",
                "name": "a.ARTNR"

            },
            {
                "label": "Artikelkategorie:",
                "name": "a.FK_STG_TAB_ARTKAT",
                "type": "select",
                "placeholder" :  "Bitte Kategorie auswählen.."
            },
            {
                "label": "Bezeichnung:",
                "name": "a.ARTBEZ"
            },
            {
                "label": "Maße:",
                "name": "a.ARTMAß"
            }
        ]
    } );


    var table = $('#STG_TAB_ARTIKEL').DataTable( {
        dom: 'Bfrtip',
        ajax: 'sources/table.STG_TAB_ARTIKEL.php',
                serverSide: true,
        scrollY:        '70vh',
        scrollCollapse: true,
        paging:         false,
        cache: true,
        columns: [
            {
                "data": "a.ARTNR"
            },
            {
                "data": "ak.ARTKAT"
            },
            {
                "data": "a.ARTBEZ"
            },
            {
                "data": "a.ARTMAß"
            }
        ],
        select: "single",
        lengthChange: false,
        buttons: [
            { extend: 'create', editor: editor }
            ,{ extend: 'edit',   editor: editor }
        ]
    } );
} );

}(jQuery));

On debbuging the data-Header seems correct:

data[row_5760][a][ARTNR]:-2
data[row_5760][a][FK_STG_TAB_ARTKAT]:23
data[row_5760][a][ARTBEZ]:HTV - Einweg
data[row_5760][a][ARTMAß]:0x0

But on the debugSql-array on Preview Page doesn't start an update:
(see attachment) [2]query: SELECT a.PK_ARTIKEL_ID as "a.PK_ARTIKEL_ID", a.ARTNR as "a.ARTNR", a.FK_STG_TAB_ARTKAT as "a.FK_STG_TAB_ARTKAT", a.ARTBEZ as "a.ARTBEZ", a.ARTMAß as "a.ARTMAß", ak.ARTKAT as "ak.ARTKAT" FROM STG_TAB_ARTIKEL a LEFT JOIN STG_TAB_ARTIKELKATEGORIE ak ON ak.ARTKATNR = a.FK_STG_TAB_ARTKAT WHERE a.PK_ARTIKEL_ID = :where_0

Don't know why it isn't working, i have another table w/o the leftJoin() param which is working perfectly.

Looking forward to any help!
Thanks in advance

Br Toni

Is it possible to add a span behind the DTE input field and additional css classes depending on different values? So that the input looks like:

<div class="DTE_Field_InputControl has-success has-feedback" data-dte-e="input-control" style="display: block;">
    <input id="DTE_Field_status" class="form-control" type="text">
        <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true">
</div>

Based on Bootstrap Example 'Input with Success' (http://getbootstrap.com/css/#forms):

<div class="form-group has-success has-feedback">
    <label class="control-label">Status:</label>
    <input type="text" id="Status" class="form-control">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
</div>

If yes, what's the best way to do this?

I want to select a row after adding it to my table, but I have deferred rendering on, so the row is not in the DOM to select using the .node() API. Is there anyway around this? Obviously I can turn off deferred rendering, but that isn't an option.

When a table is made both responsive and has vertical dynamic height, e.g.:

$('#examples').DataTable( {
                responsive: true,
                scrollY: '80vh',
                scrollCollapse: true,
                paging: false,
                ajax: "getsamples.php",

there is a long lag to load and perform ajax operations. Is there a workaround?

Good Day

Am trying to save a date value to a MySQL database and am getting the error below.
SQLSTATE[22007]: Invalid datetime format: 1292 Incorrect datetime value: '2017-01-26T16:15:27+02:00' for column 'create_date' at row 1

the code setting the date value is

    ->on('preCreate', function ( $editor, $values ) {
        $editor
        ->field('members.creator_id')
        ->setValue($_SESSION['user_id']);
        $editor
        ->field('members.create_date')
        ->setValue(date('c'))
        ->getFormatter( 'Format::date_sql_to_format', 'Y-m-d H:i:s' );
    })

@@GLOBAL.sql_mode is set to
STRICT_TRANS_TABLES,NO_ENGINE_SUBSTITUTION

and it can not be changed.

Is there a way I can set the date and save to database with the current database @@GLOBAL.sql_mode setting.

I'm using DataTables with jquery ui integration and the scroller add-on. It works fine for the most part, but the loadingIndicator isn't working properly when searching.

When scrolling down quickly the loading indicator appears, but when searching, nothing appears.

My initialization code is:

    var dt = $this.DataTable({
        'processing': true,
        'serverSide': serverSide,
        'searchDelay': searchDelay,
        'ajax': url,
        'columns': cols, // array with column definitions
        'pageLength': 15,
        'lengthMenu': [15, 30, 50, 100, 250, 500],
        'scrollY': height,
        'order': order,
        'deferRender': true,
        'scroller': {
            'loadingIndicator': true,
            'serverWait': 500
        },
        'autoWidth': autowidth
    });

So I've got both processing and scroller.loadingIndicator set to true, but still no indicator appears when searching. Any clues?

If I am viewing several pages of results, I click a link to navigate to the detail/update view of that record. Once done editing, is there a way to go back to the results where I left off? i.e. if I am on page 3 of the results, if I navigate away, make my changes, then come back to the dataTable I want to go back to page 3. I would actually love if the edited record would highlight for a few seconds to reflect that record was changed.

Hello
Do you have any example of data table parent child row that the child row is multi selection data table that have a botton that show all I'd of selected row?

So i am saving a datatable state to database and the server is returning valid json
{"time":"1485446348443","start":"0","length":"10","order":[["8","asc"]],"search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"},"columns":[{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"true","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"true","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}}],"ColReorder":["0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15"]}

stateLoadCallback: function (settings) {
var o;
$.ajax( {
url: "{{path('to state load')}}",
async: false,
dataType: 'json',
success: function (json) {
o = json;
}
} );
return o
}
2- can i disable automatic state saving and only trigger save when i want ,
i am using DataTables 1.10.13

Hi Alan,

I am presented with an issue.

I am trying to find a way to display to the user two separate fields from my database concatenated using datatables and c# server side.

On the Database side i have a table Item - reference Planner(int)

I have a Planner table which has 3 column id, Name, Description

'''in my select list or drop down list i need the viewer to see Name + "-" + Description
SO please see below and let me know if there is a way using options to complete this task,

or any other way you could think of that i can complete displaying two fields in the same select list.

Thanks,
Nick

My model contains

Item which includes Planner

and Planner which includes, id, Name, Description

Below is an excerpt from my controller

public IHttpActionResult ProjectItem(int projectid)
{
var request = HttpContext.Current.Request;
var settings = Properties.Settings.Default;

        using (var db = new Database(settings.DbType, settings.DbConnection))
        {
            var response =
            new Editor(db, "Item", "ItemID")

            .Model<ItemGenModel1>()

                .Field(new Field("Item.Planner")
               .Options("Planner", "id", "Description", q => q.Where("description", "%do not use%", "NOT LIKE"))


        )

I have a page with several datatables tables
I'm using the same var for each, only the ID is different.

var table = $('#list1').DataTable();
var table = $('#list2').DataTable();

First is it good to do that or I should use different var for each table?
If there are no problem to use the same var, how can I init Yadcf the the ID instead of the var?

Now I'm using
yadcf.init(table, [],);
and I'd like to init using ID instead of the var

could you provide the good syntax if possible

Thanks

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 have focused the cursor to the search field and as soon as any character is entered, the header aligns correctly. Sorting on any column also aligns the header. I have googled this and tried many many "fixes", but to no avail.
Here is the code

$(function() {
    var table = $('#visis-table').DataTable({
    processing: true,
    serverSide: true,
    ajax: '{!! url('datatables_thcas_p') !!}',
    "columns": [{"visible": false,"searchable": false, data: 'id',name: 'id'},
        {data: 'visi_patn.name', name: 'visi_patn.name',
        "fnCreatedCell": function(nTd, sData, oData, iRow, iCol) {
            $(nTd).html('<a href="#"' +
            ' onclick="fill_visi(\'' + oData.visisID + '\',\'' +
             oData.visi_patn.name + '\')">' +
             oData.visi_patn.name + '</a>');
        {data: 'visi_patn.init', name: 'visi_patn.init'},
        {data: 'filn', name: 'filn'},
        {"searchable": false,"sortable": false, data: 'visi_dept.desc', name: 'visi_dept.desc'}, ],
    "order":          [[1, 'asc']],
    "fixedHeader":    true,
    "scrollY":        "450px",
    "paging":         false,
    });
    $('#modal-visi-select').on('shown.bs.modal', function () {
        $('#visis-table_filter input').focus();
    });
});

Hi, I discovered a problem using checkboxes formatted using the bootstrap-switch plugin from bootstrap-switch.org/ in a datatable using the responsive plugin. The checkboxes work fine in the normal datatable, but as soon as the browser is resized and the responsive plugin kicks in to hide the checkbox column(s), the checkboxes are no longer clickable until resizing again so that the data all fits on the screen again. I'm really not sure if this is a problem on the datatables responsive plugin side or bootstrap-switch but their website is currently down at the moment so it makes it more difficult to ask the question there. I'm usually fairly good at debugging this type of issue but I've looked at the code and really cannot figure out what could be causing the issue. Any hints or tips are very much appreciated, as well as any workaround suggestions.

Here is a simple jsfiddle demonstrating the behavior: https://jsfiddle.net/w9kgge7b/5/

Thank you in advance!

I am using version 1.10.7 of DataTables.

I have five data tables on a single web page that are independent. They all pull from fixed AJAX sources.

I have the data loading great. But there ends up being a "calculated" margin that makes the data columns not line up with the header columns.

One table ends up perfect. The others end up with left/right margins of: 26, 19.5, 13, and 6.5.

All five data tables are setup in functions which are called in the $(document).ready section.

All look very close to the following(no columns in code stub below)

function SetUpMyInvDataTable() {
    var oTable = $('#MyInvDT').DataTable({
        "serverSide": true,
        "ajax": {
            "type": "POST",
            "url": '/Inv/MyDT',
            "contentType": 'application/json; charset=utf-8',
            'data': function (data) {
                return data = JSON.stringify(data);
            }
        },
        //        "dom": 'frtiS',
        "dom": 'C<"clear">lfrtip', //this display adds entries at top, allows show/hide columns at end
        "scrollY": 500,
        "scrollX": true,
        "scrollCollapse": true,
        "scroller": {
            loadingIndicator: false
        },
        "processing": true,
        "paging": true,
        "deferRender": true,
        "order": [0, "asc"],
        "language": {
            "emptyTable": "No Inventory To Display"
        }, //end langauge
        "pagingType": "full_numbers",
        "stateSave": false,
        "Paginate": true,
        "jQueryUI": true
        } //end initComplete
    });
}// end setup

The four other functions use actionTable1 to 4 instead of oTable. And all have different identifiers than MyInvDT. And the url for each is also different.

Are the table variables like oTable supposed to be global?

Is there a method to squelch the odd width calculation?

The HTML looks like:

    <div class="MyAction groupbox">
        <h4 class="section_divide">My Items Being Requested</h4>
        <div class="MyAction">The following items in your possession are being requested.  Please Approve/Deny the requests.</div>
        <table id="MyRequestedDT" class="table table-striped display" width="100%">
            <thead>
                <tr>
                    <th>Project</th>
                    <th>Is Part Of Config</th>
                    <th>Product Code</th>
                    <th>Serial</th>
                    <th>Description</th>
                    <th>Lot</th>
                    <th>Location</th>
                    <th>Requested By</th>
                    <th>More Info</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
   <div class="MyAction groupbox">
        <h4 class="section_divide">Items Being Reassigned To Me</h4>
        <div class ="MyAction">The following items are being reassigned to you.  Please Accept/Reject the requests.</div>
        <table id="ReassignedToMeDT" class="table table-striped display" width="100%">
            <thead>
                <tr>
                    <th>Project</th>
                    <th>Is Part Of Config</th>
                    <th>Product Code</th>
                    <th>Serial</th>
                    <th>Description</th>
                    <th>Lot</th>
                    <th>Location</th>
                    <th>Reassigned By</th>
                    <th>More Info</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

Did I miss something in my table setup?

This issue is happening in Chrome(55) and Internet Explorer(11) under Windows 10 machine.

I've attached a truncated picture showing a good example of what is happening. In this example, the bottom table is good, the middle table got 6.5 margin, and the top table got 13 margin. But it doesn't always put the same margin to the same table.

Hello, in the following a sample of my code

fields: [
...
{
    "label": "DATE:",
    "name": "date",
    "type": "datetime",
    "format": "ddd, D MMM YY",
    opts: {
      disableDays: [ 0, 6 ],
      minDate: new Date('2017-01-18'),
      maxDate: new Date('2017-01-23')
    }
},

I would like to have "today" as minDate and ("today" +4 working days) as maxDate, taking also into account that Saturday and Sunday have been disabled (this means that if "today" is Thursday, ("today" +4 working days) should be Wednesday.
Any suggestion?
Many thanks in advance

Hello all,

I inherited a project that included DataTables. It had used a column that a client wanted to sort by. I figured out how to remove my column's index from the orderable:false columndefs, but I still get the ajax error "unsupported sorting column index" when they try to sort the column.

Thanks in advance for the help.

Regards,

Adam

I need to include the option to select a few individuals from a very large list and I would preferably do that not with a select but with a popup contain a datatable that allows rapid searching for the specific data. Is that possible?

Hi, I'm having a problem getting the following (essential) feature to work with the latest DataTables (v1.10.13). This feature has worked fine for us in all DataTables versions up to and including our latest, which is v1.10.5.

The problem is that when dynamically changing the height of a data table on a browser resize event, the "scrolllCollapse=true" setting is not maintained, and the data table displays empty rows to fill the specified height.

Here is the problem live (note that you must resize the browser to see the problem):
http://live.datatables.net/begahafe/1/edit

Note that for DataTables v1.10.5 (old APIs), the following resize code worked properly (the old "bScrollCollapse=true" setting was maintained during the resize):

var oSettings = dataTable.fnSettings();
oSettings.oScroll.sY = <new height>;
dataTable.fnDraw();

I'm looking forward to upgrading to the latest DataTables version (v1.10.13), but we will have to stay at v1.10.5 if there is no solution for this issue, as this feature is essential for our UI.

Thank you!
Marc