I'm having some difficulty getting something very simple to load using the ajax option. I've tried a variety of different solutions, involving both modifying my AJAX as well as my JavaScript, and nothing seems to be working. My JSON is valid, and follows the pattern shown here:

Just as a test, I'd simply like this table:

To display the value in "location" from each element inside of "data."

My JavaScript looks like this:

I always get this warning:

And nothing displays inside the table. Is there something I'm missing?

here's the complete server side endpoint:

let db = require('../db');
let router = require('express').Router();
let moment = require('moment');
let clientFrmt = "M/D/YYYY h:mm a";
// let dbFrmt = "YYYY-MMM-DD";
let dbFrmt = "YYYY-MMM-DD HH:mm:ss.SS";


let {
    Editor,
    Field,
    Validate
} = require("datatables.net-editor-server");

router.all('/dtables/inout/:EMPNO', async function (req, res) {
    let editor = new Editor(db, 'IN_OUT', 'IDNO')
        .fields(
            new Field('IO_DATE').validator(Validate.notEmpty())
                .getFormatter((val, data)=>{return moment(val).format(clientFrmt)})
                .setFormatter((val, data)=>{return moment(val).format(dbFrmt)}),
            new Field('ORIG_IO_DATE').validator(Validate.notEmpty())
                .getFormatter((val, data)=>{return moment(val).format(clientFrmt)})
                .setFormatter((val, data)=>{return moment(val).format(dbFrmt)}),
            new Field('STATUS').validator(Validate.notEmpty()),
            new Field('CMNTS')
        )
        .where('EMPNO', req.params.EMPNO)
        .where('ORIG_IO_DATE', '>', 
            moment()
                .subtract(3, 'weeks')
                .format('DD-MMM-YY') // had to do the date this way, in order to comply with nls database/oracle standard
                .toUpperCase());

    
    await editor.process(req.body);
    res.json(editor.data());
});

module.exports = router;

If I change dbFrmt to 'YYYY-MMM-DD' it works, but sets the time to midnight (expected).
But I want to be including time information in my updates. So when I set dbFrmt to 'YYYY-MMM-DD HH:mm:ss.SS' I get the following error:

Unhandled promise error:  [object Promise]Error: update IN_OUT set IO_DATE = :1 where IDNO = :2 - ORA-01861: literal does not match format string
stack: Error: ORA-01861: literal does not match format string

Please anyone help? I know i'm most likely doing something very small and silly in error.

Hello,

I am using the following code to update a row which also has some html controls(update,delete). The data in the table gets updated but the buttons that are re-drawn are losing their click events and so I cannot update or delete this row the second time. Any reason why and how can I fix it?

var myTable = $('#details-data-table').DataTable();
var curGridRowNum = parseInt($('#hfRowNumber').val());

        var currRow = myTable.row(curGridRowNum);
        var currRowData = currRow.data();

                     //update some columns
                       currRowData[1] = k1.Linetype;
                        currRowData[2] = k1.Itemnumber;
                        currRowData[3] = k1.Itemdescription;
                        currRowData[4] = k1.Itemquantity;
                        currRowData[5] = k1.Itemtime;
                        currRowData[6] = k1.Itemprice;

myTable.row(curGridRowNum).data(currRowData).draw();

My DB is set to accept null values for this field in particular, but as I coded the below script, the default value entered is '0' and not null.

    var editor_todos = new $.fn.dataTable.Editor({
    ajax: 'php/table.user_todos.php?user_id=' + user_id,
    table: '#user_todos',
    fields: [
         {
            "label": "Assign To Staff:",
            "name": "assigned_to_user_id",
            "type": "select2",
            "opts": {
                "ajax" { my ajax url code and script },
                "allowClear": true,
                "placeholder": {
                    "id": "",
                    "text": "(you)"
                }
            }

Any idea why the default is not being saved as NULL instead of 0, as it is now? I'm wondering if it has something to do with select2.

hello guys,why datables not showing new record after submit with modal form, but when press f5 ( refresh) it show , do i miss something in the coding?

I successfully put an advanced smart search to the left of a datatable (like Amazon.com):
https://datatables-ecommerence.000webhostapp.com/

But the tables overlap on small screens and the datatable responsive plug in seems to fail (though it seems to work on a smart-phone). Maybe my float messes up the responsive code? Might be an interesting "glitch" or a simple fix (probably the second one).

I will try to resize things on a smaller screen (like font). Maybe that will get it to fit?

Hi,
recently we have updated the data table plugin to 1.10.16 and fixed columns to 3.2.5. We have a grid with 100 records and 4 columns are fixed columns. When search with any word in the search filter, the grid is the response is too late and sometimes it is not working. Can you please help me out to fix this.
Thanks in advance

..?

Hello

I'm a beginner with datatables editor.
I use Generator to make a page from where I edit a Postgresql table. The table hava about 170 record and 3 columns.
Success.

I repeat the procedure for a table with about 8000 record and more then 150 fields. I use only 9 from this fields in my form. the table was created by others in Microsoft SQL, I imported it in Postgresql.
When I load the page i got No data available in table.
I use the debugger and i see this response for table.mytable...

{"data":[],"options":[],"files":[]}

I got no data but I don't know why? I think the table is to big?

I have this array
Array
(
[action] => create
[data] => Array
(
[0] => Array
(
[employee_age] => 8
[employee_name] => Patrik
[employee_salary] => 1233
[lat] => 55.3324
[lng] => 25.32342
)

            )

    )

Can I use Datables Editor php validation library in this case :

$data['employee_age'] = $_POST['data'][0]["employee_age"];

Below function do not work:
Field::inst("employee_age")
->validator(Validate::minNum( 16 ));

Not sure if it helps but this is debuger information: ifezor

Hi there,

Is there a php function in editor to provide orthogonal data?
If not, would it be possible to provide a subarray instead of the value for a field?
Providing the different data types in php would be mich easier for me, because I have already many of the needed functions... how do you handle this „problem“?

Thx!
Bernhard

Hello guys, i have a big problem for all the week, i try to integrate a script php to Laravel php, with contains a part javascript witch download information from a Json file and print it with a dataTable, the problem is that i can't find unstand this error that i all tried to solve withount a success.

here you have the attached file containing a part of my algorithme if you can healp me pleaaaase, thank you in advance.

(

@extends('layouts.app')

@section('content')

<link rel="stylesheet" href="http://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "http://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": "/jalil/public/data.json"
    } );
} );

</script>

<style>
        .content {
            text-align: center;h
        }
</style>

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Dashboard</div>

                <div class="panel-body">
                    @if (session('status'))
                        <div class="alert alert-success">
                            {{ session('status') }}
                        </div>
                    @endif

                  Bienvenu  jalil Interface CSV
            </div>
            </div>
        </div>

    </div>
</div>

<div class="content">

      <table id="example" class="display" style="width:100%" border ='1'>
              <thead>
            <tr>
              <th>Host</th>
              <th>file System</th>
              <th>CSV</th>
              <th>Zabbix</th>
              <th>Warning csv</th>
              <th>Warning zabbix</th>
              <th>Critique csv</th>
              <th>Critique zabbix</th>
              <th>Procédure csv</th>
              <th>Procédure zabbix</th>
              <th>Conforme</th>
            </tr>
              </thead>
          </table>

</div>


@endsection

)

i have a question about how can i sorting a data in table with data type
EX.
if i press sort at 5Y output will be like this

so how can i sort N/A append to the last numeric data in this column

I tried the code -

$('#NACH-User-Table').on( 'click', 'tr', function () {
var userId = table.row( $(this).parents('tr') ).data();
alert( "UserID = "+userId[0] );
} );

But getting UserID = undefined.

Hi guys,

I'm using the daterange filter on my Datatables: https://datatables.net/plug-ins/filtering/row-based/range_dates

This works perfectly when the variables are set to numbers like in the original JS plugin.

But when I'm changing the 'var iStartDateCol' or 'var iEndDateCol' numbers to the selector $('table').DataTable().column('.filter-start-date').index() i get a Cannot set property '_DT_CellIndex' of undefined error when selecting a new date.

Am I using the wrong type of selector or am I doing something different wrong?

I have created a table using datatable and want to make a "Select All" column, on clicking on which, it must trigger scope function that will check all the enabled checkboxes.

This is the working code snippet that I have used

var dataTableOptions = {
        "pageLength" : 5,
        "order" : [ [ 1, "asc" ] ],
        "createdRow" : function(aRow, aData, aDataIndex) {
            aTransferObj.universalMap[aData.memberId + aData.lastName] = aData;
        },
        "dom" : '<"top"ip>rt<"bottom"><"clear">',
        "bPaginate" : false,// hide pagination
        "bFilter" : false, // hide Search bar
        "autoWidth" : false,
         "fnDrawCallback": function( oSettings ) {
        /* Code commented in order to stop Download button from getting disabled
         * $(".grpPlanChecked").prop('disabled', 'disabled');
         * $("#downloadCardButton").attr('disabled','disabled');*/
         $(".grpPlanChecked").prop('onclick', 'selectAll()');
         $("#searchError").hide().find('.msgTxt').remove();
         $("#searchAlert").hide().find('.msgTxt').remove(); },
        "columns" : [

                {
                    "className" : "dt-head-left",
                    "title" : "Select All",
                    "select": true,
                    "orderable" : false,
                    "id" : "selectAll",
                    "mRender" : function(data, type, full, meta) {
                        return "<input type='checkbox' id='grpPlanChecked' name='grpPlanChecked' "
                                + "class='grpPlanChecked' value='"
                                + full.bin
                                + "," + full.pcn +
                                // "disabled={{grpPlanChecked}} " +
                                "'/>";
                    }
                },
                {
                    "className" : "dt-head-left",
                    "title" : "Plan ID",
                    "defaultContent" : "",
                    "data" : "plnId"
                },
                {
                    "className" : "dt-head-left",
                    "title" : "Group",
                    "defaultContent" : "",
                    "data" : "group"
                },
                {
                    "className" : "dt-head-left",
                    "title" : "Group Description",
                    "data" : "grpName",
                    "defaultContent" : "",
                    "orderable" : false
                },
                {
                    "className" : "dt-head-left",
                    "title" : "Print Qty",
                    "defaultContent" : "",
                    "orderable" : false,
                    "mRender" : function(data, type, full, meta) {
                        var _html = "";
                        _html += "<input type='text' id='eachCount'  class='eachCount' "
                                + "onkeypress='return isNumber(event)'"
                                + "ng-model='count' maxlength='3'"
                                + "class='form-control'  />";
                        return _html;
                    }
                } ]
    };

    aTransferObj.dataTable = $('#managePlanGroupDT')
            .DataTable(dataTableOptions);

    $("#managePlanGroupDT tbody").on('click checked unchecked',
            "input#grpPlanChecked",
            aTransferObj.scope.validateUniversalDwnldBtn);
    $("#managePlanGroupDT tbody").on('change keyup paste mouseup',
            "input#eachCount", function() {
                aTransferObj.scope.enablecheckBox();
                aTransferObj.scope.validateUniversalDwnldBtn();
            });
    $("#managePlanGroupDT thead").on('user-select','.dt-head-left',function( e, dt, type, cell, originalEvent ){
        aTransferObj.scope.selectAll});
//"tr.dt-head-left", aTransferObj.scope.selectAll);

Just the last section of code is where I am trying.
Below is the html generated with one row(tr) using this script for your reference to understand how script is working:

<table id="managePlanGroupDT" class="table table-striped table-hover table-condensed display compact dataTable no-footer" aria-describedby="managePlanGroupDT_info" role="grid" style="width: 100%;">
<thead>
<tr role="row">
<th class="dt-head-left sorting_disabled" rowspan="1" colspan="1" aria-label="Select All">Select All</th>
<th class="dt-head-left sorting_asc" tabindex="0" aria-controls="managePlanGroupDT" rowspan="1" colspan="1" aria-label="Plan ID: activate to sort column descending" aria-sort="ascending">
Plan ID</th>
<th class="dt-head-left sorting" tabindex="0" aria-controls="managePlanGroupDT" rowspan="1" colspan="1" aria-label="Group: activate to sort column ascending">
Group</th>
<th class="dt-head-left sorting_disabled" rowspan="1" colspan="1" aria-label="Group Description">
Group Description</th>
<th class="dt-head-left sorting_disabled" rowspan="1" colspan="1" aria-label="Print Qty">
Print Qty</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td class=" dt-head-left">
<input type="checkbox" id="grpPlanChecked" name="grpPlanChecked" class="grpPlanChecked" value="bin4,pcn4" disabled="disabled"></td>
<td class="dt-head-left sorting_1">ABCDEF</td>
<td class=" dt-head-left">A</td>
<td class=" dt-head-left">A</td>
<td class=" dt-head-left"><input type="text" id="eachCount" class="eachCount" onkeypress="return isNumber(event)" ng-model="count" maxlength="3"></td>
</tr>
</tbody></table>

Preview like this(without css)

This is the function needed to be triggered on clicking on Select All

$scope.selectAll=function() {
        $('#managePlanGroupDT tr').each(function(row, tr) {
            if ($(tr).find('input[type="checkbox"]').prop("checked") == true) {
                $(tr).find('#grpPlanChecked').prop('checked', true);
            }
        });
    };

I am getting an ajax error when I try to load the base url for my MVC 5 application that uses DataTables. However, it works fine when I add Home/Index to the end of the url. How can I ensure that the base url works without throwing an ajax error?

Ajax:

            "ajax": {
                "url": "../Home/GetTaskLogList",
                "type": 'POST',
                "content-type": "application/json; charset=utf-8",
                "processData": false,
                "dataType": "json",
                "headers": "headers",
                "data": "window.JSON.stringify(obj)",
                //"headers": { "__RequestVerificationToken": $('input[name=__RequestVerificationToken]').val() },
                //"data": { "__RequestVerificationToken": $('input[name=__RequestVerificationToken]').val() },
                "traditional": true,
                "dataSrc": function (data) {
                    return JSON.parse(data);
                },
            },

Route config:

     public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }

I defined something like that

 $.extend( true, $.fn.dataTable.defaults, {
 [...]
"language": {
      "url": contextPath + "/resources/i18n/jquery.datatable.messages_" + GLOBAL_LOCALE + ".json"
    },
[...]

When I define a dataTable how can I access i18n function inside datatable?

 var table = $('#table').DataTable({
[...]

  "columns": [
              {"data": "project.name"},
              {"data": "project.title"}, 
              {
                "data": function (row, data, index) {
                       // HERE HOW CAN I INVOKE i18n() function? this.i18n('token','default') doesn't work.            
                     }


})

how to remove dropdown Search filter
how to hide show enteries
how to Search box in center