Good day....

Currently working on the file upload section in our tool...

I select an existing row and edit it...then choose a file and upload it for processing...

So what "id" value in the "upload" array is the uploader expecting?

When uploading a file a reference will be entered in pgsql returning the unique fileid
which I use as the "id" value returning to file uploader...

But I see in the console:

uncaught exception: Unknown file id 5 in table files

When I return fixed 0 as id then it is fine...but won't work for multiple files....

thanks in advance
richard

Good afternoon (o;

Almost finished with the file uploading (o;

Let's say I display a table with just a few rows but want to be able to edit more columns that are displayed due to restricted display sizes...

Now my JSON returns also a "files" column which is not displayed in the table as many files can belong to a column.

But the editor seems to not like it when a column contains data which is not displayed, but in the JSON reply....
and the "Edit" button shows a spinning wheel forever and the console says:

uncaught exception: Unknown file table name: files

If the columns has no data then the editor dialog is launched...

thanks in advance
richard

I'm trying to use RowGroup extension but i noticed that if applied on a cell that has a custom render function, the group will be created with the row data, not with the rendered one. Is there a way I can show the rendered data instead?

Also, how can I start the extension as disabled and enable it only via UI? Like only after a click over a button or something like that?

I'm looking for a functionality like the one shown in this page that is available for another library. Is there any chance to have something similar in DataTables?

I am trying to connect to an oracle database in my .net project. I am getting an error in the line

using (var db = new Database(settings.DbType, settings.DbConnection))

error is: unable to find the requested .net framework data provider. it may not be installed

do I need add a reference to something?

html5 has a text/dropdown combo box so the user can free-type or select from drop-down.: https://stackoverflow.com/questions/5650457/html-select-form-with-option-to-enter-custom-value

Is there a way to use this in Editor?

Hello everybody

I've been sitting on a more complex topic for days.

I have a lot of input fields with prices in an editor form (e.g. db.reg_price and db.red_price). You can enter this by hand. Underneath there is the possibility to activate a checkbox. If this has been activated, the array should be taken from another table with these prices (reg_price and red_price without db. ).

Up to this point, this also works very well. Even the data in the table contain the values (reg_price and red_price) after saving the form. BUT! These values are not updated in the database in the original variables (db_reg_price and db_red_price). Only when you go into the editor field again and save again, does it take the values into the database.

1. Is there a possibility to update both variables with this new values from the second table?

I made some tests with ->on('preEdit', function and also with postEdit and so on in the staff.php. Also with editor.on( 'preSubmit', function in the Javascript. But I don't find the right solution.

1. Is there a possibility to block the fields in editor form if the checkbox were activated?

I'll be at one's wit's end....

Thanks a lot.
Mac

Javascript:

var editor; 

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
fields: [
   {
                type: "select",
                label: "Select price package:",
                name: "event.db_price_select_form",
                placeholder: "Please select"
            }, {
                label: "Regular price:",
                name: "event.db_reg_price",
                fieldInfo: "Format: 16.00",
                    
                }, {
                label: "Reduced price:",
                name: "event.db_red_price",
                fieldInfo: "Format: 16.00",
            },
.....

var table = $('#example').DataTable( {

 columns: [
            
            { data: "event.db_price_select",
                render: function (data, type, row) {
                    if (row.event.db_price_select == 1) {
                        return 'Yes';
                    } else {
                        return 'No';
                    }
                }
            },
            { data: "event.name_price_pack" },

            { data: "event.db_reg_price",
            render: function (data, type, row) {
                    if (row.event.db_price_select == 1) {
                        row.event.db_reg_price = row.price.reg_price;
                        return row.price.reg_price;
                    } else {
                        return row.event.db_reg_price;
                    }
                }
            },
......

staff.php:

......
        Field::inst( 'event.db_price_select_form' )
            ->options( Options::inst()
                ->table( 'price' )
                ->value( 'id' )
                ->label( array ( 'name_price_pack', 'reg_price', 'red_price' ))
            )
            ->validator( Validate::dbValues() ),
            Field::inst( 'price.name_price_pack' ),
            Field::inst( 'price.reg_price' ),
            Field::inst( 'price.red_price' ),

        Field::inst( 'event.db_reg_price' ),
        Field::inst( 'event.db_red_price' ),

->leftJoin( 'price', 'price.id', '=', 'event.db_price_select_form' )

.....

Hi

I'm trying to convert the following sql into valid server DT code but I'm struggling a bit translating the aliases and embedded select statement in the left join.

• Here's the sql:

SELECT V.ID, ISNULL(V.CustomerIndex, C.CustomerIndex) as CustomerIndex

FROM GlobalPriceLists as V

LEFT JOIN (SELECT CustomerIndex, ListType, ListName FROM GlobalPriceLists WHERE CustomerIndex = 0) as C

ON C.ListType = V.ListType AND C.ListName = V.ListName AND V.CustomerIndex = 1

• Server code so far:

editor = new Editor(db, "GlobalPriceLists", "GlobalPriceLists.id")
.Model<CustomerSNsDBModel.GlobalPriceLists>("GlobalPriceLists");
editor.Field(new Field("GlobalPriceLists.id")
.Set(false)
);
editor.MJoin(new MJoin("GlobalPriceLists")
.Model<PriceListsDBModel>()
.Name("GlobalPriceLists.CustomerIndex")
.Link("GlobalPriceLists.ListType", "GlobalPriceLists.ListType")
.Link("GlobalPriceLists.ListName", "GlobalPriceLists.ListName")
.Where(q =>
q.Where("GlobalPriceLists.CustomerIndex", lngCustIdx, "=")
)
.Order("GlobalPriceLists.id ASC")
.Field(new Field("id")
.Options(new Options()
.Table("GlobalPriceLists")
.Value("id")
.Label("CustomerIndex")
)
.Set(false)
)
.Set(false)
);
editor.Field(new Field("GlobalPriceLists.ListType")
.GetFormatter((val, data) => CommonUtilities.IsNullOrEmpty(val) == true ? 0 : val)
);
editor.Field(new Field("GlobalPriceLists.ListName")
.GetFormatter((val, data) => CommonUtilities.IsNullOrEmpty(val) == true ? string.Empty : val)
);
editor.LeftJoin("GlobalPriceLists AS C", "GlobalPriceLists.id", "=", "GlobalPriceLists.SubPackID");
editor.Where("GlobalPriceLists.CustomerIndex", 0);
editor.Debug(true);
editor.Process(formData);

Thanks a lot.

I'm currently working on a project that will load around 5000 entries with pictures and audio files. With only around 400 entries it already takes a while.
The link to the website is: http://humstaging.byu.edu/cambodianoralhistories
You can check the speed through inspecting the network.

I created a filter that loads all the data which might be a reason?
The code for the filter:
'''
jQuery(document).ready(function() {
var table = jQuery('#myTable').DataTable(
{
// "deferRender": true
}

            );

            jQuery.fn.dataTable.ext.search.push(
                        function( settings, data, dataIndex ) {
                            var min = parseInt( $('#min').val(), 10 );
                            var max = parseInt( $('#max').val(), 10 );
                            var age = parseInt( data[6] ) || 0; // use data for the age column

                            if ( ( isNaN( min ) && isNaN( max ) ) ||
                                ( isNaN( min ) && age <= max ) ||
                                ( min <= age   && isNaN( max ) ) ||
                                ( min <= age   && age <= max ) )
                            {
                                return true;

                            }
                            return false;

                        }
                    );
            jQuery.fn.dataTable.ext.search.push(
                function( settings, searchData, index, rowData, counter ) {
                var gender = jQuery('input:checkbox[name="gender"]:checked').map(function() {
                    return this.value;                   
                }).get();

                if (gender.length === 0) {
                        return true;
                    }

                if (gender.indexOf(searchData[8]) !== -1) {
                    return true;
                }


                return false;

                }
            );

            jQuery.fn.dataTable.ext.search.push(
                function( settings, searchData, index, rowData, counter ) {
                var birth = jQuery('input:checkbox[name="Birth"]:checked').map(function() {
                    return this.value;                   
                }).get();

                if ( birth.length === 0) {
                        return true;
                    }

                if ( birth.indexOf(searchData[9]) !== -1) {
                    return true;
                }

                return false;

                }
            );


            jQuery.fn.dataTable.ext.search.push(
                function( settings, searchData, index, rowData, counter ) {
                var storys = jQuery('input:checkbox[name="story"]:checked').map(function() {
                    return this.value;                   
                }).get();
                var stories = searchData[7].split(',');
                var text = "";
                for (x in stories) {
                    text += stories[x] + " ";
                }

               if (storys.length === 0) {
                    return true;
                }

                for(var i=0;i<storys.length;i++){
                    if(text.includes(storys[i])==true){
                        return true;
                    }
                }


                return false;


                }
            );


            // Event listener to the two range filtering inputs to redraw on input
            jQuery('#min, #max').keyup( function() {

                table.draw();


            } );

            jQuery('input:checkbox').on('change', function () {                 
                table.draw();                   
            });


        } );

'''

For editor updates (i.e., when it POSTs to the server), I have successfully implemented passing a custom form element called DatabaseName. I do this by adding to the editor upon initialization:

editor = new $.fn.dataTable.Editor({
    ...
}).add({
    name: "DatabaseName=" + (dbName || $(".ddlDatabases").val())
});

However, when I select a row and click the Delete button, it POSTs to the server BEFORE opening a dialog box (which contains a div with class "DTE_Action_Remove" which contains a nested Delete button). When it POSTs to the server BEFORE the delete dialog pops up, it DOES contain the custom DatabaseName element, but nothing actually happens on the server (until after the confirmation).

But, when I confirm the delete prompt by clicking the Delete button on the dialog, it POSTs to the server a second time. This is the action that is supposed to perform the actual delete, but on the second POST it no longer contains my custom element. How can I re-add my custom element to the actual POST action that performs the delete upon confirmation?

I have tried calling this on the ".DTE_Action_Remove button" click event, but it doesn't work:

editor.add({
    name: "DatabaseName=" + (dbName || $(".ddlDatabases").val())
});

Hi All,
I have been working with DataTables for a while now. I am trying to implement the "Search Box" feature for every column in the generated table. The issue I am facing is that even If I am clicking on the Input text box to place the cursor and make a column specific search, the column sorts it self. I understand the fact that I am cloning the "thead" and then making the search, but is there anyway to be able to prevent the sorting and just perform search. Here is the code. Any help would be greatly appreciated. Thanks!

 var table = $("#example2").DataTable();
        $('#example2 thead tr').clone(true).appendTo('#example2 thead');
        $('#example2 thead tr:eq(1) th').each(function(i) {
            var title = $(this).text();
            $(this).html('<input size="10" type="text" placeholder="Search ' + title + '" />');
            $('input', this).on('keyup change', function() {
                //console.log("Event in the INPUT");
                e.preventDefault();
                if (table.column(i).search() !== this.value) {
                    table
                        .column(i)
                        .search(this.value)
                        .draw();
                }
                $(this).attr("id", "someId");
            });
        });

This can be seen on this demo https://editor.datatables.net/examples/inline-editing/simple.html

How can I prevent the color change that occurs when a row is finish editing?

Greetings,
I'm using a subquery in the Field::inst() of PHP editor class.
For example, the main table is Sales:

Field::inst('(SELECT SUM(payments.price) FROM `payments` WHERE payments.sale_id = sales.id)','net_price')

This query works fine in Sqlite, I also copied the query from (debug) and run it in phpmyadmin, and worked fine. It is returning (3000) for example.
But the returned value is null in the JSON. I tried to put getFormatter and var_dump the $data variable. It is also Null.
Btw sorting works fine for the real net_price value of the record behind the seen, although it still appears as null.
Am I missing something ? or there is kind of protection between the Mysql result and formatting the value in response ?

Greetings,
I'm using a subquery in the Field::inst() of PHP editor class.
For example, the main table is Sales:

Field::inst('(SELECT SUM(payments.price) FROM `payments` WHERE payments.sale_id = sales.id)','net_price')

This query works fine in Sqlite, I also copied the query from (debug) and run it in phpmyadmin, and worked fine. It is returning (3000) for example.
But the returned value is null in the JSON. I tried to put getFormatter and var_dump the $data variable. It is also Null.
Btw sorting works fine for the real net_price value of the record behind the seen, although it still appears as null.
Am I missing something ? or there is kind of protection between the Mysql result and formatting the value in response ?

Hello Guys, what´s Up ?

Function

$.fn.dataTable.render.moment('YYYY-MM-DD HH:mm:ss', 'DD/MM/YYYY HH:mm:ss');

I have a problem getting the function above. The dataTable return me invalid Date when i use the following code:

{
    data: 'end_campaign',
    className: 'text-nowrap',
    render: function (data) {
        if(data != 'In progress'){
            return $.fn.dataTable.render.moment('YYYY-MM-DD HH:mm:ss', 'DD/MM/YYYY HH:mm:ss');
        }else{
            return data
        }
    }
}

I'm recieve this in back-end:

'end_campaign' => ($campaignEnd->format("Y-m-d H:i:s") != $campaignStart->format("Y-m-d H:i:s")) ?  $campaignEnd->format("Y-m-d H:i:s") : 'In progress',

Somebody can help me ?

Hi

This page gives a number of examples of how to load/reload some ajax data but how is this achieved with a js object array? I'm setting a DT with an array and have a refresh button but can't see how to reload the Dt with the array again after the array has been modified via ajax. Thanks.

This works on 1st load of the page only and the page above states a function needs to be used if data needs reloading:

(...)
dom: 'Bfrtip',
data: arrPrLiParams,
columns: [...]

I am working through the import process for my table using the example here:
https://editor.datatables.net/examples/extensions/import.html

I have this up and working as is, but am looking to add a blank selection to the select dropdowns that are used to match the import fields.
The goal is that if the user is bringing a doc in that has extra fields or no data for some of the fields of the table, they can select the blank choice and on import the field would just remain empty for each record imported.

Bonus points to be able to auto-match fields if there is an option that matches perfectly...any ideas for either?

Hello,
Use case if of synthetic column in view. A synthetic column is an extra column whose cell value s a function of existing column values.
Based on limited understanding of column.render function, defined a column as follows:

   'data': null, title: 'gain/loss', render;{'type':'number', 'display':'xxx'} . 

Hoping that  'xxx' would be replaced by a function to calculate 'gain/loss' column value ti display

However, with this setup, DataTable warns with familiar warning :
'DataTables warning: table id=data-table - Requested unknown parameter 'null' for row 0, column 7. For more information about this error, please see http://datatables.net/tn/4'

Once we go further from that warning, the browser console shows error

at jquery.dataTables.min.js:67 'Uncaught TypeError: can not read property 'style' of undefined' .

Any help on how to define synthetic column of table view?

Regards --

Hello everyone,
I create a json object ,

{"devices":[{"name":"D9123","id":"32","isOn":"true","automation":{"suspended":"true","expiration":"15 January 20:00pm 2020"}},{"name":"D9043","id":"45","isOn":"true","automation":{"suspended":"false"}},{"name":"D4120","id":"29","isOn":"false","automation":{"suspended":"false"}}]}

and i am working on ajax i want to create a datable which has this elements but i cannot see objects in it.
This is my table:

@section scripts
{

<script>
    $(document).ready(function () {


        $('#table').DataTable(
            {

                "ajax": {
                "url": 'myurl',
                "type": 'GET',
                "datatype": 'json',
                "dataSrc" : "data"
                },
                columns: [

                    { "devices": 'name' },
                    { "devices": 'isOn' },
                    { "devices": 'automation.suspended' }

                ]


            });


    });


</script>

}

what is the problem please help me

When I render my table with the JQuery command, if the table is less wide than my screen, the headers appear left aligned, while the table is centered. Below is most of the html file (it is a thymeleaf template)

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <!--JQuery install-->
    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.4.1.js"></script>

    <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

<!--    <link href="/css/navbar.css" rel="stylesheet">-->

    <!--Data tables doc: https://datatables.net/manual/index -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

    <script>
        $(document).on('click', function(event) {
            ...

                    $("#main").DataTable({
                        scrollY: 400,
                        scrollX: 400,
                        "ordering": false,
                        paging: false
                    });
               });

            }
        });
    </script>

    <meta charset="UTF-8">
    <title>Home</title>
</head>

<body>
<div id="resultWrapper">
    <span id="resultTable">
        <th:block th:if="${table} != null and ${tableHead} != null">
            <table id="main" class="display cell-border">
                <thead>
                    <tr>
                        <th:block th:each="columnHeader: ${tableHead}">
                            <td th:text="${columnHeader}"></td>
                        </th:block>
                    </tr>
                </thead>
                <tbody>
                    <th:block th:each="row : ${table}">
                        <tr>
                            <th:block th:each="column : ${row}">
                                <td th:text="${column}"></td>
                            </th:block>
                        </tr>
                    </th:block>
                </tbody>
            </table>
            <div class="complete">
            </div>
        </th:block>
    </span>
</div>
</body>
</html>

This renders fine if I change the initializer to not have the scrollX value, but I do want it to fit on the screen.