Here are the files we are using in production.

``return '<a href=/bin/inspections2?uid=' + data.users.id + ' target="_new">Report</a>';

It correctly drops the $uid into the URL of the next table but it is invisible to the next DTE page. The URL displays as:

``/bin/inspections2?uid=2

Seems great. However in the laravel controller file, I cannot get the variable out of the URL. It comes up empty:

$uid = $request->input('uid'); // Get `uid` from the request \Log::debug("Received UID: " . $uid);

The $uid is necessary to set a where statement to limit result's to those of that user. Any ideas?

I'm using the .net code for the table that looks like this:

using (var db = new Database(dbType, dbConnection))
{
    var response = new Editor(db, "J")
        .Model<DTO>()
        .Field(new Field("Re")
            .Validator(Validation.Numeric())
        )
        .Field(new Field("J")
            .Validator(Validation.Numeric())
        )
        .TryCatch(false)
        .Process(Request)
        .Data();
    return Json(response);
}

An item with the same key has already been added.

What could be the cause and how can i debug the error to identify what keys are being added?

Here's my code:

• A class:

public class VoiceMYTABLEDataDBModel
{
    public class VoiceMYTABLEData
    {
        public long id { get; set; }
        public string Customer_ID { get; set; }
    }

    public class VoiceMYTABLEInvoice
    {
        public long id { get; set; }
        public long CustomerID { get; set; }
        public long MYTABLEDataID { get; set; }
        public string InvoiceNumber { get; set; }
    }
}

• Controller code:

        public DtResponse CRUDRatedVoiceMYTABLEData(string strFromDate, string strToDate, int intExportToFile, MYTABLEDataUISettings lblo)
        {
            Editor editor = null;
            NameValueViewModel[] arrNVVM = null;
            Task t;

            try
            {
                HttpRequest formData = HttpContext.Current.Request;

                CustomersModel CM = new CustomersModel();
                arrNVVM = CM.GetAllCustomerIDsNbrs_arr();
                CM = null;

                if (arrNVVM == null) arrNVVM = new NameValueViewModel[] { };

                using (Database db = new Database(SetGetDbType2, SetGetDbConnection))
                {
                    editor = new Editor(db, "VoiceMYTABLEData", "VoiceMYTABLEData.id").Model<VoiceMYTABLEDataDBModel.VoiceMYTABLEData>("VoiceMYTABLEData");
                    editor.Field(new Field("VoiceMYTABLEData.id")
                        .Set(false)
                    );
                    editor.Field(new Field("VoiceMYTABLEData.Customer_ID")
                        .Set(false)
                    );
                    editor.LeftJoin("VoiceMYTABLEInvoice", "VoiceMYTABLEData.id", "=", "VoiceMYTABLEInvoice.MYTABLEDataID")
                        .MJoin(new MJoin("VoiceMYTABLEInvoice")
                        .Model<VoiceMYTABLEDataDBModel.VoiceMYTABLEInvoice>()
                        .Name("VoiceMYTABLEInvoice")
                        .Link("VoiceMYTABLEData.id", "VoiceMYTABLEInvoice.MYTABLEDataID")
                        .Order("VoiceMYTABLEInvoice.InvoiceNumber ASC")
                        .Field(new Field("id")
                            .Options(new Options()
                                .Table("VoiceMYTABLEInvoice")
                                .Value("id")
                                .Label("InvoiceNumber")
                                .Order("InvoiceNumber ASC")
                                .Render(row =>
                                {
                                    return dicPCEAValues["InvoiceNumber"].ToString();
                                }).Order("InvoiceNumber ASC")
                            )
                            .Set(false)
                        )
                        .Set(false)
                    );

                    editor.Where("VoiceMYTABLEData.Date_Time_Called", CommonUtilities.ToDate2(strFromDate + " 00:00:01"), ">=");
                    editor.Where("VoiceMYTABLEData.Date_Time_Called", CommonUtilities.ToDate2(strToDate + " 23:59:59"), "<=");

                    editor.TryCatch(false);
                    editor.Debug(true);
                    editor.Process(formData);
                }
                arrNVVM = null;
            }
            catch (Exception ex)
            {
                
            }
            return editor.Data();
        }

• client js code:

function CRUDRatedVoiceMYTABLEData(strFromDate1, strToDate1, intExportToFile1) {

    var strSelOpt = '';
    var strSelSta = '<select class="form-control">';
    var strSelEnd = '</select>';

    var token = $('input[name="__RequestVerificationToken"]').val();

    dataTable2 = $('#tblRatedVoiceMYTABLEDataTable').DataTable({

        destroy: true,
        responsive: true,
        processing: true,
        deferRender: true,
        select: true,
        order: [[0, 'desc']],
        pageLength: 10,
        columnDefs: [
            { 'bVisible': false, 'targets': 0 },
            {
                'targets': [0, 1, 2],
                className: 'text-center'
            }
        ],
        dom: 'Bfrtip',
        ajax: {
            url: '/users/' + strAccountIdx1 + '/Admin/MYTABLEData/CRUDRatedVoiceMYTABLEData/',
            data: function (d) {
                return $.extend({}, d, {
                    strFromDate: strFromDate1,
                    strToDate: strToDate1,
                    intExportToFile: intExportToFile1,
                    __RequestVerificationToken: token
                });
            },
            //type: 'GET',
            type: 'POST',
            dataType: 'json',
            //contentType: 'application/json; charset=utf-8',
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
            async: true,
            cache: false
        },
        columns: [
            {
                data: 'VoiceMYTABLEData.id',
                className: 'text-left'
            },
            {
                data: 'VoiceMYTABLEData.Customer_ID',
                className: 'text-left'
            },
            {
                data: 'VoiceMYTABLEInvoice',
                className: 'text-left'
            }
        ],
        buttons: [
            { extend: 'edit', editor: editor3, formButtons: [] }
        ]
    });
}

• create script for the db tables:

CREATE TABLE IF NOT EXISTS `[DBNAME]`.`VoiceMYTABLEData` (
  `ID` BIGINT NOT NULL AUTO_INCREMENT,
  `Customer_ID` BIGINT DEFAULT '0',
  PRIMARY KEY (`ID`),
  UNIQUE INDEX `Index_PrimaryKey` (`ID`),
  INDEX `Index_Customer_ID` (`Customer_ID`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

DROP TABLE IF EXISTS `[DBNAME]`.`VoiceMYTABLEInvoice`;;
CREATE TABLE IF NOT EXISTS `[DBNAME]`.`VoiceMYTABLEInvoice` (
  `ID` BIGINT NOT NULL AUTO_INCREMENT,
  `CustomerID` BIGINT DEFAULT '0',
  `MYTABLEDataID` BIGINT DEFAULT '0',
  `InvoiceNumber` VARCHAR(55) DEFAULT NULL,
  PRIMARY KEY (`ID`),
  UNIQUE INDEX `Index_PrimaryKey` (`ID`),
  INDEX `Index_CustomerID` (`CustomerID`),
  INDEX `Index_MYTABLEDataID` (`MYTABLEDataID`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

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

table: '#tblDataTable1',
    //template: $('#divEditorForm1').clone(),
    template: '#divEditorForm1',
    fields: [
        {
            label: '',
            name: 'ContactTrans.id',
            type: 'hidden'
        }, {
            label: captionsarray.filter(p => p.label == 'lblContactType')[0].value + '*:',
            name: 'ContactTrans.ContactType',
            type: 'select',
            options: [],
            def: '-1'
        }
        }
    ],

dataTable1 = $('#tblDataTable1').DataTable({

        order: [[1, 'desc']],
        pageLength: 10,
        dom: 'Bfrtip',
        ajax: {
            url: '/' + strAccountIdx1 + '/Admin/ContactTrans/CRUDContactTrans/',
            data: function (d) {
                return $.extend({}, d, {
                    intContTpe: booIsGlobal1 == 1 ? -1 : intContTpe1
                });
            },
            type: 'GET',
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            async: true,
            cache: false
        },
        responsive: true,
        processing: true,
        deferRender: true,
        orderClasses: false,
        paging: true,
        //serverSide: true,
        columns: [
            {
                data: null,
                defaultContent: '',
                orderable: false
            },
            {
                data: 'ContactTrans.id',  //1
                className: 'text-left'
            }
            //...
        ],
        rowCallback: function myRowCallback(row, data) {

            if (IsTransTypeInvoiceLike(data.ContactTrans.TransType)) {
                $('td:eq(0)', row).removeClass();
                $('td:eq(0)', row).addClass('details-control');
            }
            else {
                $('td:eq(0)', row).removeClass();
                $('td:eq(0)', row).addClass('nodetails-control');
            }
        },
        footerCallback: function (row, data, start, end, display) {

            var api = this.api(), data;
            // Remove the formatting to get integer data for summation
            var intVal1 = function (i) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '') * 1 :
                    typeof i === 'number' ? i : 0;
            };
            var intVal2 = function (i) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '') * 1 :
                    typeof i === 'number' ? i : 0;
            };
            var intVal3 = function (i) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '') * 1 :
                    typeof i === 'number' ? i : 0;
            };
            // Total over all pages
            dblNetTotal = api
                .column(19, { search: 'applied' })
                .data()
                .reduce(function (a, b) {
                    return intVal1(a) + intVal1(b);
                }, 0);
            dblTaxTotal = api
                .column(20, { search: 'applied' })
                .data()
                .reduce(function (a, b) {

                    var dblTaxAmount = 0;

                    $.each(data, function (i, e) {
                        $.each(e.ContactTransTaxes, function (i, e) {
                            dblTaxAmount += e.TaxAmount;
                        });
                    });

                    return dblTaxAmount;
                }, 0);
            dblGroTotal = api
                .column(21, { search: 'applied' })
                .data()
                .reduce(function (a, b) {
                    return intVal3(a) + intVal3(b);
                }, 0);
            // Update footer
            $('tr:eq(0) th:eq(1)', api.table().footer()).html((booIsGlobal1 == 0 ? strCurrency1 + ' ' : '') + ManageDecimals(4, dblNetTotal));
            $('tr:eq(1) th:eq(1)', api.table().footer()).html((booIsGlobal1 == 0 ? strCurrency1 + ' ' : '') + ManageDecimals(4, dblTaxTotal));
            $('tr:eq(2) th:eq(1)', api.table().footer()).html((booIsGlobal1 == 0 ? strCurrency1 + ' ' : '') + ManageDecimals(4, dblGroTotal));
        },
        select: {
            style: 'os',
            selector: 'td:not(:first-child)'
        },
        initComplete: function () {
            var dt = new Date();
            var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
            PrintToOutput('Open complete: ', time);
        }
    });

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

var table = $( '#program_table' ).DataTable( {
                responsive: true,
                "pageLength": 50,
                columnDefs: [ {
                    targets: [1],
                    render: $.fn.dataTable.render.ellipsis( 100, true )
                } ],
                ajax: "program_data/program_data.php",
                dom: "Bfrtip",
                columns: [ {
                    data: "program_name"
                }, {
                    data: "program_details"
                }, {
                    data: "modified"
                }, {
                    data: "modified_by"
                } ],
                select: {
                    style: 'os',
                    selector: 'td:first-child'
                },
                buttons: []
            } );

I tried searching in the forums but didn't see anything on this topic yet, just wanted to check if there is an existing api for this something like this:

1. Have an input field, where we can enter in data (in our case we will scan a barcode) to search in the first column, if there is a match, select that row.
2. Repeat step 1, and continue to add to the selection of rows.
3. When finished searching, we then hit edit to do whatever task is needed for all selected rows.

If it does not exist, I'll just write something up that searches in the first column based on the entered input text, if there is a match we just select the row, something similiar to this code below

$('#example tbody').on('click', 'tr', function () {
$(this).toggleClass('selected');
});

Found on this example page:
https://datatables.net/examples/api/select_row.html

$.fn.dataTable.moment('YYYY-mm-dd HH:mm:ss tt zz');

To format the date and it works and sorts fine in Chrome, but the sort button does nothing in FireFox, it does display the date correctly in both. I'm assuming I need to render it somehow, but I've been unable to solve it.

                columnDefs: [
                    { 
                        targets: 6, 
                        render: [DATETIME AM/PM TIMEZONE]
                    }],

https://editor.datatables.net/examples/datatables/select.html

Currently I'm on 1.96, is another purchase required for to gain the type: "datatable" with the join feature?

https://datatables.net/examples/ajax/objects.html

Here is my code that includes the editor portion:

editor = new $.fn.dataTable.Editor({
    ajax: 'config_clientsVersion2.txt',
    table: "#table",
    fields: [ 
        {
            label: "G Number:",
            name: "gNumber"
        }, 
        {
            label: "Diagram Types:",
            name: "diagramTypes"
        },
        {
            label: "Require Gleason Score:",
            name: "showGleasonScore"
        },
        {
            label: "Require Percentage:",
            name: "showPercentage"
        },
    ]
});

$('#table').DataTable({
    dom: 'Bfrtip',
    ajax: 'config_clientsVersion2.txt',
    columns: [
        { data: 'gNumber' },
        { data: 'diagramTypes' },
        { data: 'showGleasonScore' },
        { data: 'showPercentage' }
    ],
    buttons: [
        { extend: "create", editor: editor },
        { extend: "edit",   editor: editor },
        { extend: "remove", editor: editor }
    ]
});

2022-05-18 09:23:47 PM US/Central
2022-05-18 09:22:11 PM US/Central

I could just move the time zone into a new column but as of now, the client perfers it all in one.

The forms with minimal fields load quickly, mostly < 3 seconds whereas those with many update field (100+) might take 12-13 seconds for the form to load. Even with 10-15 items in the table they take a long long time to load.

Is there anything that can be done to optimize the performance of the really big forms?

  {
    label: "Order",
    name: "articles.rowOrder",
    type: "hidden",
    default: 1,
  },

How do you reverse the ordering sequence so that when you add a new item it gets the rowORder # as the highest number rather than #1 (which pushes everything else down)?

  // ROWORDER BLOCK
  ->on('preCreate', function ($editor, $values) {
    if (!$values['articles']['rowOrder']) {
      $next = $editor->db()->sql('select IFNULL(MAX(rowOrder)+1, 1) as next FROM articles')->fetch();
      $editor->field('articles.rowOrder')->setValue($next['next']);
    } else {
      $editor->db()
      ->query('update', 'articles')
      ->set('rowOrder', 'rowOrder+1', false)
      ->where('rowOrder', $values['articles']['rowOrder'], '>=')
      ->exec();
    }
  })
  ->on('preRemove', function ($editor, $id, $values) {
    $order = $editor->db()
    ->select('articles', 'rowOrder', array('id' => $id))
    ->fetch();

    $editor->db()
    ->query('update', 'articles')
    ->set('rowOrder', 'rowOrder-1', false)
    ->where('rowOrder', $order['rowOrder'], '>')
    ->exec();
  })
  // ROWORDER BLOCK

Now i want to sort columns with i.e. 12,40 correctly like this:
https://datatables.net/examples/basic_init/comma-decimal

Is this possible in 1.9.x?

However I have an events form which the same core but only for this form there are about 30 additional fields. What I would like to do is move all the events-related fields to a separate table and link the 2 tables by a common ID. Something like articles and events tables

articles table:
id
title
slug
publish
etc.

events table:
id
event_title
event_date
event_time
etc.

simple query:

select
articles.id,
articles.title,
articles.slug,
events.event_title,
events.date,
events.time
from articles, events
where articles.ID = events.ID
-- and articles.ID = 100

Pretty simple query. What this does is eliminate a bunch of unneeded rubble from the articles table. The question is, when you create a NEW entry in DTE can you make it create the same ID in 2 tables?

```
table.on('search.dt', function() {
//number of filtered rows
console.log(table.rows( { filter : 'applied'} ).nodes().length);
//filtered rows data as arrays
console.log(table.rows( { filter : 'applied'} ).data());
})

Also is their anyway to find out what column datatables found the result in.

```
script type="text/javascript">

$(function () {

 var myTable =  $('#allSubmissions').DataTable({
     'iDisplayLength': 15,
     "bSort": true,
     "sPaginationType": "full_numbers",           
     "bLengthChange": false,
     "bDestroy": true,
     "bRetreive": true,
     "searching": true,
 });

 $('#search-inp').on('keyup', function () {
     myTable.search($(this).val()).draw();
 });
 });

</script>

Also How do I get my new search box in the location the old one was it was to the far right of the table

The part in question is the collection of buttons in a dropdown that lets you set the "status" field of selected rows to "active", "project", or "closed". I'm trying some different things in the 3 cases, and none trigger a call to my update script.

So- fundamental question- since the editor is working and calls my updateProjectRecord.php, why is this not called when I call either row.data(d) or row.invalidate() in my buttons?

Here are the editor and the datatable configurations (with some irrelevant parts skipped for brevity).

var editor = new $.fn.dataTable.Editor( {
    ajax: 'projecteditor/php/updateProjectRecord.php',
        table: '#project',
        fields: [
            {
                "label": "name:",
                "name": "name"
            },
    
            {
                "label": "status:",
                "name": "status",
                type:  "select",
            label: "Status:",
              options: [
                    "active",
                    "project",
                    "closed"
                ]
            },
            {
                "label": "city:",
                "name": "city"
            },
            {
                "label": "state:",
                "name": "state"
            }
        ]
  });


var table = $('#project').DataTable( {
    dom: 'Bfrtip',
    order: [1,'asc'],
    ajax: 'projecteditor/php/getProjectList.php',
    table: '#project',
    columns: [ ....... ],
    buttons: [
    { extend: 'create', editor: editor },
    { extend: 'edit',   editor: editor },
    { extend: 'remove', editor: editor },
    {
        extend: 'collection',
        autoClose: true,
        text: 'Set Selected To:',
        buttons: [
        {
            text: "Active",
            action: function ( e, dt, node, config ) {
                table.rows({ selected: true }).every( function ( rowIdx, tableLoop, rowLoop ) {
                    var d = this.data();
                    d.status = "active";
                    this.invalidate();
                });
                // Draw once all updates are done
                table.draw();
            }
        },
        {
            text: "Project",
            action: function ( e, dt, node, config ) {
                table.rows({ selected: true }).each( function ( index ) {
                    var row = table.row( index );
                    var data = row.data();
                    data.status = "project";
                    row.invalidate();
                });
                // Draw once all updates are done
                table.draw();
            }
        },
        {
            text: "Closed",
            action: function ( e, dt, node, config ) {
                table.rows({ selected: true }).every( function ( rowIdx, tableLoop, rowLoop ) {
                    var d = this.data();
                    d.status = "closed";

                    this.data(d);
                    this.invalidate();  // redundant
                    console.log(d.name);
                    console.log(rowIdx);
                    console.log(rowLoop);
                    console.log(this);
                });
                // Draw once all updates are done
                table.draw();
            }
        }
    ]               
}       

->where( function ($q){                     
           $q->where(function ( $s ) {
                $s->where('Completed', 0);
                $s->where( "ifnull(inactiveflag,'')", '');
           });         
           $q->or_where( function ( $r ) {
                $r->where('Completed', 1);
                $r->where('cmbt_modified_date', 'DATE_ADD( NOW(), INTERVAL -1 DAY )', '>', false);
           });

While we reorder column it raise sever call.(Nightly Build version)

Can we avoid this?

$('#example').DataTable({
order:[[3, 'desc'], [0, 'asc']]
});

But is there a way to alter to original order so that if a user selects a header it always sorts in descending order rather than in ascending order as happens now.

I have a lot of columns that are numeric which hold a lot of empty or zero values and the users have to click the header twice: once to sort in the default ascending order and the second time to sort in the descending order.

Ideally the first column would sort ascending as it is alphabetical, but all other columns should sort descending as they are numerical.

Milton.

Here is the link to the fiddle : https://jsfiddle.net/s3hLdjv9/2/

1- initially by making an ajax call when building the datatables. in the servlet I call I then store the json array in a session managed bean so I do not have to read the database everytime I call the page.
2 - when the managed bean contains the json array I read the values from the into a js variable and use that as datasource

hereby I can reduce the time to collect the data from 9 to 2 seconds.

However in situation 2 I do not get the processing message, which I get when making the ajax call.

Is that suppose to be?

Can I force that message to appear in situation 2?

Below is a snippet of the code in situation 2:

function loadCustomers(id, sort, data) { //data contains the json array in string format
    console.log('loadCustomers()')
    $.growl({
        message: "loadCustomers()"
    });
    var element = $(document.getElementById(id));
    var table = element.DataTable();
    table.state.clear()
    table.destroy();
    var customersList = $.parseJSON(data);
    element.DataTable({
                retrieve: true,
                data: customersList,
                'stateSave': true,
                'language': {
                    'url': getLanguage(),
                    'loadingRecords': msgLoading,
                    'processing': 'DataTables is currently busy'
                },
                'processing': true,
                scrollY: 400,
                deferRender: true,
                scroller: true,
                scrollY: '50vh',
                scrollCollapse: true,
                'paging': max_rows,
                'responsive': false,
                'order': [
                    [1, 'asc']
                ],
                'columnDefs': [{
                    'targets': 1,
                    'render': $.fn.dataTable.render.ellipsis(dispEllipsis)
                }], ..... //rest of the code not of interest

Code for situation 1 is: (I thought you were gonna ask)

function initCustomers(id, sort) { //no data provided
    console.log('initCustomers')
    $.growl({
        message: "initCustomers()"
    });
    var element = $(document.getElementById(id));
    var table = element.DataTable();
    table.destroy();
    element.DataTable({
                'ajax': 'xsp/customers',
                'stateSave': true,
                'language': {
                    'url': getLanguage(),
                    'loadingRecords': msgLoading,
                    'processing': 'DataTables is currently busy'
                },
                'processing': true,
                scrollY: 400,
                deferRender: true,
                scroller: true,
                scrollY: '50vh',
                scrollCollapse: true,
                'paging': max_rows,
                'responsive': false,
                'order': [
                    [1, 'asc']
                ],
                'columnDefs': [{
                    'targets': 1,
                    'render': $.fn.dataTable.render.ellipsis(dispEllipsis)
                }], ..... //rest of the code not of interest

The data string might look as followed:

'[{"obj":{"unid":"AE2E4C0DB863DB08C12587B90055F4D1","dateK":"10-24-2021","unit":"06109","comm":"06109","lvl":"sdd","gcn":"","resp":"Nu Present","name":"Nordic News Co","id":"00000000034664","lvlK":"Avslag","type":"PRIVATE"}},{"obj":{"unid":"E8E58FD3EB2453D2C12587BB004B5737","dateK":"4-18-2021","unit":"06409","comm":"06409","lvl":"bordlaggning","gcn":"","resp":"Heute Idag","name":"Universal Deutsche Gemeinte Unlimited","id":"00000000161479","lvlK":"Återremittering","type":"COMPANY"}},{"obj":{"unid":"A13C7AA174FF28B0C12587B90056E6EA","dateK":"10-3-2021","unit":"06325","comm":"06325","lvl":"bordlaggning","gcn":"","resp":"Manana Morgen","name":"Common Deutsche Gemeinte Inc","id":"00000000277853","lvlK":"DD","type":"CORPGROUP"}},{"obj":{"unid":"3DD65EBABE97C603C12587BB004B5D00","dateK":"4-6-2021","unit":"06142","comm":"06142","lvl":"avslag","gcn":"","resp":"Nu Present","name":"Red Firm Corp Co","id":"00000000486674","lvlK":"EDD","type":"PRIVATE"}},{"obj":{"unid":"5F0ECCC070EE16C5C12587B90056B4FC","dateK":"7-27-2021","unit":"06325","comm":"06325","lvl":"avslag","gcn":"","resp":"Past Förtiden","name":"Cosmic Hello World Online Enterprise","id":"00000000517436","lvlK":"DD","type":"CORPGROUP"}}]'

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