Hello ,
i have two tables on the same Display with different column names . i want to change both lengthMenu at the same time .
Thanks

Hello,
In my laravel 5.7/ blade / jQuery v3.3.1 / Bootstrap v4.1.2 app

I use "yajra/laravel-datatables-oracle": "~8.0" library (as I can see it is based on datatables.net)
and it works ok, but when data are retrieving I do not like how Processing message looks as :
https://imgur.com/a/Otebuku

I can hardly read this message and it is over my table header and as common it looks poor.
I have blade block :

                <div class="table-responsive">
                    <table class="table table-bordered table-striped text-primary" id="get-storage-space-dt-listing-table">
                        <thead>
                        <tr>
                            <th>Id</th>
                            <th>Box Room No.</th>
                            <th>Selling range</th>
                            <th>Warehouse</th>
                            <th>Level</th>
                            <th>Storage Capacity</th>
                            <th>Check In</th>
                            <th>Paid through date</th>
                            <th>Job Ref No</th>
                            <th>Status</th>
                            <th>Created At</th>
                            <th></th>
                            <th></th>
                        </tr>
                        </thead>
                    </table>

                </div>

and javascript initialization :

backendStorageSpace.prototype.StorageSpacesLoad = function () {
    Mustache.tags = ["<%", "%>"];
    var template = $('#storage_space_details_info_template').html();

    var ins = this
    oTable = $('#get-storage-space-dt-listing-table').DataTable({
        processing: true,
        serverSide: true,
        "lengthChange": true,
        "lengthMenu": this_backendLengthMenuArray,
        ajax: {
            url: this_backend_home_url + '/admin/get-box-rooms-dt-listing',
            data: function (d) {
                d.filter_status = $("#filter_status").val();
                ...
            },
        }, // ajax: {

        columns: [

            {data: 'id', name: 'id'},
            {data: 'number', name: 'number'},
            {data: 'selling_range', name: 'selling_range'},
            {data: 'warehouse_name', name: 'warehouse_name'},
            {data: 'level', name: 'level'},
            {data: 'storage_capacity_name', name: 'storage_capacity_name'},
            {data: 'check_in_date', name: 'check_in_date'},
            {data: 'check_out_date', name: 'check_out_date'},

            {data: 'job_ref_no', name: 'job_ref_no'},
            {data: 'status', name: 'status'},
            {data: 'created_at', name: 'created_at'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
            {data: 'action_delete', name: 'action_delete', orderable: false, searchable: false}

        ],

        "drawCallback": function (settings, b) {
            ...
I search and did not find where this mesage appearance is controled ? Are there some css style to manipulate ?

If there is a way to make it look better, say show this message below of table row with head block ?

Thanks!

Is there a possibility for mobile devices enabling the specific keyboard layout in forms or inline edit as provided in HTML5 (Input-Types)?

Is there a way of having additional computed columns when using an Array datasource? We'd prefer not to use an array of objects due to the additional download size (even when gzipped), I know I can parse to objects on the client, but there's a lot of data and wondered if there was a built in method.

Thanks

I have a table that has a specific column. If that column says: "completed" only then allow it to be reordered.. so like a conditional statement but in the selector.. does that make sense? @kthorngren

Id like to be able to search the forum for duplicate questions on specific topics so that I don't waste my time writing questions that have already been asked.

How do you edit a forum post?

Banging my head for days on this.

I'm using the json-api spec for my API. The request and response structure is basically like this:

{
    data: {
        type: 'widgets',
        id:  5,
        attributes: {
            key: 'abc',
            name: 'Blue Widget'
        }
    }
}

DataTable works great, I can retrieve a list of widgets with this:

 vm.dataTable = $('#gridFields').dataTable({
            ajax: {
                url: ENV_CONFIG.API + '/fields',
                dataSrc: 'data',
                contentType: 'application/vnd.api+json',
                headers: {
                    'Authorization': "Bearer " + $auth.getToken(),
                    'Accept': 'application/vnd.api+json'
                }
            },
            buttons: [
                {extend: 'create', editor: editor},
                {extend: 'edit', editor: editor},
                {extend: 'remove', editor: editor}
            ],
            rowId: 'id',
            responsive: true,
            columns: [
                {data: "id", title: "ID"},
                {data: "attributes.key", title: "Key Field"},
                {data: "attributes.name", title: "Name"},
            ],
            columnDefs: [
                {
                    className: "width-20",
                    "targets": 0
                }
            ],
            select: true,
            bStateSave: true,
            pageLength: 10,
            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
            dom: 'Bflrtip'
        });

Editor works great, but row disappears after create or edit. Here is my editor and event:

editor = new $.fn.dataTable.Editor({
            ajax: {
                create: {
                    type: 'POST',
                    contentType: 'application/vnd.api+json',
                    url: ENV_CONFIG.API + '/fields',
                    headers: {
                        'authorization': "Bearer " + $auth.getToken(),
                        'accept': 'application/vnd.api+json'
                    },
                    url: ENV_CONFIG.API + '/fields',
                    data: function (d) {
                        id = Object.keys(d.data)[0];
                        var ownData = {
                            data: {
                                type: "fields",
                                attributes: d.data[id].attributes
                            }
                        };

                        return JSON.stringify(ownData);
                    }
                },
            /*
            //  Other methods omitted for readability
            */
            },
            table: '#gridFields',
            idSrc: 'id',
            fields: [
                {label: 'Field No', name: 'attributes.key'},
                {label: 'Field Name', name: 'attributes.name'},
            ]
        });
        editor.on('postSubmit', function (e, json, data, action) {
            if (action !== 'remove') {
                newJson = {};
                newJson.data = [{id: json.data.id, attributes: json.data.attributes}];
                json = newJson;
            }
        });

I'm at a loss. I'm pretty sure it's a mismatch in the structure but not sure. I don't think I have to have DT_RowId (I'm using "id"). I have read the server response spec, but I'm altering it to fit the DT column data.

Any ideas?

I have JSON data that is passed into DataTables. Each row is clickable, I want it to pass the the "id" from the row into a function that will perform an Ajax call (query function). However, I'm unable to get the "id" from the row itself. When I click on the row the alert pops up with "undefined id"

Below is my code.

[code]
// READY FUNCTION
$(document).ready(function() {
    var obj = $('#tempDataForm').serializeJSON();
    query('discrepancyList',obj,refreshDiscrepancyTable,0,"queryDiscrepancy.php");


});

function refreshDiscrepancyTable(response) {
    if(response.result.state == 'success') {
        var refreshedData = response.result.data.results;
        var colNames = response.result.data.colNames;
        console.log(colNames);

        if ( $.fn.DataTable.isDataTable('#discrepancyQueue') ) {
            $('#discrepancyQueue').DataTable().destroy();
        }

        $('#discrepancyQueue').DataTable( {
            data: refreshedData,
            // fnDrawCallback function
            "fnDrawCallback": function( oSettings ) {
                ```$('#discrepancyQueue').on( 'click', 'tr', function () {
                    var table = $('#discrepancyQueue').DataTable();
                    // Gets the row id value
                    var id = table.row( this ).id();
                    console.log("ID is "+id);
                    alert( 'Clicked row id '+id );
                });```
            },
            columns: colNames,
            // Datatables extension that will optimize table layout for different screen size through dynamic insertion and removal of columns from the table
            responsive: true,
            // Hides "Id" columns and makes it not searchable
            "columnDefs": [
                {
                    "targets":  [ 0 ],
                    "visible": false,
                    "searchable": false
                }
            ]
        } );

        var myTable = $('#discrepancyQueue').DataTable();
        notify('success','Test!');
    } else {
        notify('warn','Error!');
    }
}
[/code]

I've followed instructions to install and evaluate the examples for Editor. It does't work. I don't see any data. I don't see any data errors. I can't fine any logs. I can't find any trouble shooting guides for the database connection. I don't see any errors on the console about the connection or it's status. It talks about removing the error_reporting lines, but why? Nothing is being reported. Why not have an example RIGHT AT THE TOP for testing your database connection? Editor is base on DataTables, and they are heavily base on databases. WHY NOT MAKE CONNECTING AND DIAGNOSING those problems something to figure out? Why not have a forum search instead of site wide search?

I am using the javascript datatable and it exporting all the column except the first level heading Employee,Monday, Tuesday, SysHoliday. It is keeping as merged heading. But when I exporting the first heading will not be exported . This is the code . The first <Tr> Heading not exported. Please can you given any help on this Javascript Datatable
I have attached the code below

https://datatables.net/extensions/keytable/examples/initialisation/stateSave

Question 1: Can this be initialized via data tags? I tried data-state-save="true" and data-keys="true" but that didn't seem to work.

Question 2: I have a table with column filters. It looks like it's restoring state correctly with the filters that I specified, but It doesn't repopulate the search params in the column filters themselves (so the user can't tell easily that it's actually a filtered list).

I am using Editor .NET Framework libraries v1.8.1 and mssql server.
When Editor writes to a varchar() field, the text is html encoded
i.e. "&" is written as "&"

Is there a way to disable this encoding?

I'm having a strange issue when I use "stateSave" option to retain the state of the table. When I use the "stateSave" option, then the page number wording starts showing up as below:

even when the pageLength is set to 50.

If I remove the "saveState" option, then everything works fine.

Not sure if anyone else if having a similar issue but this is strange and I'm not able to use the "saveState" feature.

The code I'm using is below for DataTable:

$(document).ready(function(){
            $("#tblLOI").DataTable({
                "pageLength": 25,
                "stateSave": true,
                "columnDefs": [
                { "orderable": false, "targets": [0, 1, 15] }
              ]
            });
        });

I have a problem when I register a record in datatable to see it does not appear registered but I do a refrest on the chart of the record it shows me current

I have a datatable which shows all records from a database table. It is loaded via an AJAX call. Works great.

After the dataTable is instantiated and populated, I then prepend a drop down selection box to the dataTables_length div to select from. Works great.

When I make a change to the selected option, I make an AJAX call to the backend, and get a different set of records back. Works great.

How do I redraw my existing dataTables WITHOUT loading the entire datatables object? Or, put more precisely, how can I reload only the rows with the new data?

There seems to be a lot of related info out there but nothing I've found works.

Thank you

Hello,
The objective is that I should get a mail at a field change.
I use these functions to check DB before and after edit.

    $editor->on( 'preEdit', function ( $editor, $id, $values )
    {
        logChange2( $editor->db(), 'pre-edit', $id, $values );
    } );
    $editor->on( 'postEdit', function ( $editor, $id, $values, $row )
    {
        logChange2( $editor->db(), 'post-edit', $id, $values );
    } );

If I check the database row at preEdit and postEdit, they show the same result: both are BEFORE edit. How can I check the final, edited values?

Or do you have a better idea to get which fields are modified with edit?

Thank you and best regards:
Endre, Szak

My datatable works fine, except for paging, it is disabled.

        $('#datatable').dataTable({
            'paging': true,
            'ordering': true,
            'info': true,
            'order': [[2, 'desc']],
            "columnDefs": [
                {"orderable": false, "targets": 6}
            ],
            "processing": true,
            "serverSide": true,
            "ajax": 'list-load.php',
            "deferRender": true
        });

        public function loadListAction(Request $request)
        {
            $strSearch = $request->query->get('search');
            $start = (int)$request->query->get('0');
            $length = (int)$request->query->get('length');
    
            $rep = $this->getDoctrine()->getRepository(Reserva::class);
    
            // Filtered results
            $bookings = $rep->findForDatatable($strSearch, $start, $length)->getQuery()->getResult();
    
            // All records
            $total = $rep->countAll();
    
            $data = [];
            
            foreach ($bookings as $b) {
    
                $data[] = [
                    $b->getAd(),
                    $b->getCl(),
                    $b->getStart(),
                    $b->getEnd(),
                    $b->getEstado(),
                    $b->getGain(),
                    'html',
                ];
            }
    
            // Array for response
            $res = [
                'recordsTotal' => $total,
                'recordsFiltered' => count($bookings),
                'data' => $data,
            ];
    
            return new JsonResponse($res);
        }

Hi,

Before trialing Editor, I was using just DataTables and the SSP class
In there I could save the SQL query to a var before passing it to sql_exec() then add it to the output array so I can display it in the console using:

initComplete: function(settings, json) {
    console.log(settings);
    console.log(json);
}

Can something similar be done with Editor to view the full SQL query used when querying the database?

I would like to manipulate and alter the data being sent through Editor on the server-side. It appears this might be possible through something like within the initialization of Editor like so:
->on( 'preCreate', function ( $e, $id, $values, $row ) {
echo 1;
error_log("Test");
})

The ajax php examples provided are very strange. Anytime I attempt to print to a debug output, 500 errors are being thrown without any error messages. Even just trying to work anywhere in the php Editor/ajax file causes 500 errors to be thrown.

What I would really like to understand is where the actual entry point is to work with the data and have access to my other PHP libraries I have built.

I may just be getting confused by the shorthand being used by the code that I am finding quite troubling to use. I'm really not sure and help would be appreciated. I can provide more information as we go along. Below is the ajax php request that both the DataTable and Editor are using ajax for. Without any ->on code, it works and writes back as expected. My actual code has multiple leftjoins that do not write back correctly despite being built as the documentation describes.

I'd really appreciate getting to the point I can use other code to manipulate this object. If I can get that far I can probably figure out what I need to do from there.

<?php

/*
 * Example PHP implementation used for the index.html example
 */
 
require_once($_SERVER['DOCUMENT_ROOT'] .'path/to/file/Id/like/to/include');//This file has static methods I'd like to use.  Any calls to them just fail.
 
// DataTables PHP library
include( $_SERVER['DOCUMENT_ROOT']. '/php/DataTables.php' );
//At this point any echo/system log print for $_POST['action'] just to even check the action causes 500 error


// 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, 'table' )
    ->fields(
        Field::inst( 'table.id' ),
        Field::inst( 'table.first_name' )->validator( 'Validate::notEmpty' ),
        Field::inst( 'table.last_name' )->validator( 'Validate::notEmpty' )
    )
        ->on( 'preCreate', function ( $e, $id, $values, $row ) {
        echo 1;
        error_log("Test");//etc..Doing anything besides what this example initially did just throws 500 errors constantly
        })
    ->process( $_POST )
    ->json();