Hey guys I'm still a noob with node, and I'm having issues testing out the demo files:

1. I got the Demo DB setup in MSSQL successfully
2. I downloaded & unzipped the Demo/Node files to a new folder: c:\NodeProject3
3. Using a terminal, from c:\NodeProject3, I ran npm install, npm install express, and datatables.net-editor-server (not necessarily in that order)
4. I configured the DB.js, trying both my own username/password, and also Windows Authentication with msnodesqlv8 (unable to confirm if either worked...)
5. when I run npm start, I get the message indicated below

Any ideas on what I'm missing?

Error: listen EADDRINUSE 0.0.0.0:8081
    at Server.setupListenHandle [as _listen2] (net.js:1286:14)
    at listenInCluster (net.js:1334:12)
    at doListen (net.js:1460:7)
    at process._tickCallback (internal/process/next_tick.js:63:19)
    at Function.Module.runMain (internal/modules/cjs/loader.js:744:11)
    at startup (internal/bootstrap/node.js:285:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:739:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! datatables.net-editor-demo@1.9.2 start: `node index.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the datatables.net-editor-demo@1.9.2 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\<DON'T HACK ME>\AppData\Roaming\npm-cache\_logs\2020-01-10T16_49_28_933Z-debug.log

Hi there!

I'm trying to implement a column filtering menu into my Datatable, similar to the following image:

Currently I have both the Show/Hide feature and the Responsive modes turned on. However, these two seem to contradict each other when in use. It seems that when I attempt to Hide a column, the Responsive feature automatically chooses another that I didn't select to fill it's place. Or if I try and Show a column, if there are too many columns for the width of the page already in place, it simply will not do anything.

See below for a GIF of what is occuring.

Has anyone else encountered this type of issue? Are there any existing plugins or features that I'm missing which will accomplish this for me?

Thanks!

Mike

I'm using DataTables and Editor and am getting this dialog popup:

"DataTables warning: table id=ImmigrationNotes - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4"

And when I click to make it go away, the table shows up with the correct number of records yet, there is no text in any of the fields.

No colspan or rowspan in the tbody. The number of columns are equal in the header and table body and are what's in the HTML.

What more can cause the warning? and Why does the correct number of rows show up but no text in any cell?

I would like to make available to the user the option to define the columns of the size that he only wants by dragging them, would it be possible ?

Hi
I want to have two users of my datatable, read-only users and administrators. So a user has either 0 (read-only) or 1 in var admin. The page loaded is editable, so I want to disable the buttons, that are used for create, edit, duplicate and delete. I've tried class, name and index for controlling the buttons, but it seems, that I can only controle the first of my buttons. When I select a row it seems to me, that select overrules the disabled buttons, so that button index 1, 2 and 3 gets enabled.

Has anyone got an idea to why this is?

buttons: [       
        { extend: 'create', text: 'Opret', editor: editor},
        { extend: 'edit', text: 'Rediger', editor: editor },
        { extend: "selected", text: 'Kopier',
                action: function ( e, dt, node, config ) {
                    // Start in edit mode, and then change to create
                    editor
                        .edit( table.rows( {selected: true} ).indexes(), {
                            title: 'Kopier fag',
                            buttons: 'Opret'
                        } )
                        .mode( 'create' );
                }
            },
        { extend: 'remove', text: 'Slet', editor: editor},
        { extend:'pageLength', text: 'Vis'},
        { extend: 'collection', text: 'Eksporter',
            buttons: [
                'copy',
                'excel',
                'csv',
                'pdf',
                'print'
            ]
        },
        { extend: 'colvisGroup', text: '- efterår',// koden, der skjuler efterårs ugerne
          hide: [ 11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33 ] //efterårskollonner
          },
        { extend: 'colvisGroup', text: '+ efterår', show: [ 11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33]}, //alle uger i efteråret
    ],//lukker button

(................. the if sentence is inside a onInitComplete function...........)

if ( admin = 0 )
                { table.buttons([0, 1, 2, 3]).disable();
                console.log(admin);
                 };

I hope someone has an idea. This is the last part I need to change between editable and read-only.

Claus

This error is happening because the query that returns the data is in the form of:

SELECT A.FIRST, A.LAST FROM TABLE A

So it is returning A.FIRST and A.LAST and while showing the data in the datatable above error is showing.

I have the table header and data dynamic since different queries returning different results can be executed.

var table_columns = [];
$.each(data[0], function(key, value) {
    var column_item = {};
    column_item.data = key;
    column_item.title = key;
    table_columns.push(column_item);
});

var table = $("#queryResult").DataTable({
    destroy: true,
    scrollX: true,
    data: data,
    "columns": table_columns,
    "paging": true
});

The workaround to fix this is to add an alias to the query to prevent returning tableAlias.tableField like below:

SELECT A.FIRST AS FIRST, A.LAST AS LAST FROM TABLE A

Is there any other way to prevent that error from happening other than changing the query?

I am trying to perform a left join with conditions, using this hack:
https://datatables.net/forums/discussion/30273/leftouterjoin-complex

unfortunately it does not work :-(

Could you be so kind an help me? Thx in advance!

$editor->leftJoin( 'clients_contact_persons as contact', 'clients.client_id', '=', 'contact.client_id AND contact.archived != 1');

In my editor code I have some fields that have datepickers or dropdown on them. When the ajax comes in it will send the value for the field I changed and a blank value for any row that has

"type": "date"

The problem is if I previously had a value in a datefield it will replace it with ''" when I edit any other field. Is there any way to stop datatables from submitting a field that hasn't changed? I have a validator that will remove any empty strings but then I can't "erase" any edits that were made either.

Here is an example of a response where I only edited the notes field.

action: edit
data[239178][method_sent]: 
data[239178][date_signed_invoice_returned]: 
data[239178][date_submitted]: 
data[239178][notes]:  I changed this field

Here is my full code.

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: {
             url: '/invoices/invoices/_id_/',
             type: 'PUT',
             headers: {'X-CSRFToken': '{{ csrf_token }}'},
            },
        "table": "#example",
        "idSrc":  'id',
        "fields": [

                {
                    "label": "Date sent for signature:",
                    "name": "date_sent_for_signature",
                    "type": "date",
                },
                {
                    "label": "Method Sent:",
                    "name": "method_sent",
                    "type": "select",
                    options: [
                    {label: "", value: ""},
                    {label: "SAL", value: "SAL"},
                    {label: "EMA", value: "EMA"}
                    ]
                },
                {
                    "label": "Person sent with invoice:",
                    "name": "person_sent_with_invoice",
                    "type": "select",
                    options: [
                        {label: "", value: ""},
                        {label: "astock", value: "astock"},
                        {label: "rguerra", value: "rguerra"},
                        {label: "kporras", value: "kporras"},
                        {label: "bsmith", value: "bsmith"},
                        {label: "lsanchez", value: "lsanchez"},
                        {label: "amadeiro", value: "amadeiro"},
                        {label: "jmoore", value: "jmoore"},
                    ]
                },
                {
                    "label": "Date invoice returned:",
                    "name": "date_signed_invoice_returned",
                    "type": "date",
                },
                {
                    "label": "Date submitted:",
                    "name": "date_submitted",
                    "type": "date",
                },
                {
                    "label": "Notes:",
                    "name": "notes"
                }
        ]
    } );

    // Activate an inline edit on click of a table cell
    $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
    } );

    $('#example').DataTable( {
        "dom": "Blfrtip",
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ],
        "order": [[0, 'desc' ]],
        "ajax": {
         url: '/invoices/api/unpaid_invoices/',
         dataSrc: '[]',
         processData: true,
            error: function (xhr, jqAjaxerror, thrown) {
                if (xhr.status == 403) {
                    top.location.href = '/accounts/login/';
                } else {
                    alert("Please contact Supper for support with this error information " + xhr.status + "  "+ thrown +". Please note the time and which item you were updating.");
                }
            //This tells dataTables editor that the update failed
                dtFailureCallback( jqAjaxerror );
            }
        },
        "columns": [
            { "data": "invoice_number" },
            { "data": "bill_name" },
            { "data": "ordered_by" },
            { "data": "job_type" },
            { "data": "well_name" },
            { "data": "contractor" },
            { "data": "creation_date"},
            { "data": "invoice_office_code" },
            { "data": "invoice_total", render: $.fn.dataTable.render.number( ',', '.', 0, '$' )  },
            { "data": "date_sent_for_signature" },
            { "data": "method_sent" },
            { "data": "person_sent_with_invoice" },
            { "data": "date_signed_invoice_returned" },
            { "data": "date_submitted" },
            { "data": "notes" },
        ],
        keys: {
            columns: ':not(:first-child)',
            editor:  editor
        },
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
    } );
     } );

Thanks very much for Datatables / Editor - awesome.
Is it possible or smart to render data as pads or buttons - ie something other than a table using the editor / datatables combination.

Does anyone have sample code?

Thanks for any tips or ideas
Mike

Hi ,
I am new to dataTable concept i am trying to search particuler date column between two dates ,here I am taking reference from this page https://datatables.net/examples/plug-ins/range_filtering.html but i am getting this error 'Uncaught TypeError: Cannot read property 'ext' of undefined ' .
I was searching this page 'https://datatables.net/forums/discussion/31476/uncaught-typeerror-cannot-read-property-ext-of-undefined' but i am not getting solution .

Here is my javascript code:

$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var min = parseInt( $('#min').val(), 10 );
        var max = parseInt( $('#max').val(), 10 );
        var age = parseFloat( data[3] ) || 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;
    }
);
 
$(document).ready(function() {
    var table = $('#example').DataTable();
     
    // Event listener to the two range filtering inputs to redraw on input
    $('#min, #max').keyup( function() {
        alert("test");
        table.draw();
    } );
} )
 ```

My HTML code:

        <div class="table-responsive">
            <div>
                <table id="example" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th>col 1</th>
                            <th>col 2</th>
                            <th>col 3</th>
                            <th>AGE</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>data 11</td>
                            <td>data 12</td>
                            <td>data 13</td>
                            <td>24</td>
                        </tr>
                        <tr>
                            <td>data 21</td>
                            <td>data 22</td>
                            <td>data 23</td>
                            <td>52</td>
                        </tr>
                        <tr>
                            <td>data 31</td>
                            <td>data 32</td>
                            <td>data 33</td>
                            <td>33</td>
                        </tr>
                    </tbody>
                </table>

```

Thanks

Greetings
I have a count field, I thought of providing calculation in it, so user can put 2+3 to get 5.
I'm using field.dependent for that.
Here is my code

let field = 'item_count';
editor.dependent(field, (val) => {
                            let obj = {values: {}};
                            try {
                                let r = eval(val);
                                if (r != val) {
                                    obj.values[field] = r;
                                }
                            } catch (e) {
                                obj.values[field] = 0;
                            }
                            return obj;
                        });

This works fine, when I put 2+5 and switch to another field, it will directly be 5.
The problem is when I put 2+5 and then click submit button. It seems that the editor send the data with the originial ("2+5") before the depenent funcion finishes.
Is there a way to make all depenedencies resolve and applied before submissionis sent ?

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

jquery.dataTables.min.js:170 Uncaught TypeError: Cannot read property 'appendTo' of undefined

I am trying to use a condition on the Joined table with MJoin - I do not want to show archived entries - but it does not work. What do I do wrong?

Thanks in advance!

// Build our Editor instance and process the data coming from _POST
$editor = Editor::inst($db, 'as_users', 'user_id');

########
# Joins
// für die as_user_details
$editor->leftJoin( 'as_user_details as details', 'as_users.user_id', '=', 'details.user_id' );

// as_user_roles
$editor->leftJoin('as_user_roles as roles', 'as_users.user_role', '=', 'roles.role_id');

// Join für den Namen des Users, der dein Eintrag erzeugt hat
$editor->leftJoin('as_user_details as created_details', 'as_users.created_by_user_id', '=', 'created_details.user_id');

// Join für die Qualifikationen 1:n

$editor->join(
    Mjoin::inst('qualifications_names')
        //->validator('qualifications_names[].id', Validate::mjoinMinCount(1))
        ->link('as_users.user_id', 'link_as_users__qualifications_names.user_id')
        ->link('qualifications_names.id', 'link_as_users__qualifications_names.qualification_names_id')
        // TODO archivierte nicht anzeigen
        //->order('name asc')
        ->fields(
            Field::inst('id')
                ->set(Field::SET_NONE)
                ->validator(Validate::required())
                ->options(Options::inst()
                    ->table('qualifications_names')
                    ->value('id')
                    ->label('qualification_name'),
                Field::inst('qualification_name')
                )
        )
        ->where("qualifications_names.archived", "1", "!=")
);

Hi,
By using the global input search box (on top right of the table), I would like to display only the row where the field of the first column start by the searched expression.

For example I have these data in my table (where | is the column separator):
arnaud | manager
sarah | employee
archie | arranger

actually when I enter "ar" in the input search area, all rows are displayed, but only the rows 1 and 3 have "ar" at the beginning of the word. If I search "arn" only the first row should be displayed.

Hope you understand me...

Please could you help me?

Best regards

Good morning, I don't have a very good english so excuse me.

Well I'm trying to do something for the job, where I need a Table made with the DataTable library to be constantly updating for example every 10 seconds.

I'm facing very boring problems, what I'm trying to do is give a Reload on api, as described on the official website here: https://datatables.net/reference/api/ajax.reload()

I'm using this:

function AutoReload1()
{
    var table = $('#OperationFix').DataTable({
        ajax: "data.json"
    });

    setInterval(function () {
        table.ajax.reload();
    }, 5000);

    //loadOrdersFix();
    //alert('Testing')

}

Then he returns the following error to me:

DataTables warning: table id=OperationFix - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

ya agrego el footer al pdf pero sale en todas las hojas como lo hago colo en la ultima

I am trying to convert geometry in a PostgreSQL/PostGIS table into GeoJSON inside Editor and setting an alias for that field. In the "Getting started" documentation there is an example code (showing a MySQL function) that indicates that it's possible to use SQL functions in the fields.

The field I'm creating looks like the following:

Field::inst( 'ST_AsGeoJSON(ST_Transform(ST_Centroid(files_info.geom), 4326))', 'geometry' )
            ->getFormatter( function($val, $data, $opts) { return json_decode($val, true); } ) // server to client
            ->set(Field::SET_NONE),

However, Editor doesn't see the alias in a field with a function.

Using Editor's debug() mode, I can inspect the SQL that it's generated. Instead of using the geometry alias for the function that converts geometry to GeoJSON, it is using the function as as the alias! Thus, DataTables cannot find the data: "geometry" property in the data that's returned from the database.

This is the query Editor is trying:

SELECT wishlists_items.id as \"wishlists_items.id\", ST_AsGeoJSON(ST_Transform(ST_Centroid(wishlists_items.geom), 4326)) as \"ST_AsGeoJSON(ST_Transform(ST_Centroid(wishlists_items.geom), 4326))\" FROM wishlists_items ORDER BY wishlists_items.created_at desc LIMIT 10

I tried using an alias on a simpler function:

Field::inst( 'extract(year from wishlists_items.created_at) AS year' )
            ->set( false ),

And the problem in Editor's resulting SQL is still ignoring the year alias:

SELECT wishlists_items.id as \"wishlists_items.id\", extract(year from wishlists_items.created_at) as \"extract(year from wishlists_items.created_at)\" FROM wishlists_items ORDER BY wishlists_items.created_at desc LIMIT 10

I have found relevant code in the Query.php and Field.php files, and I tried tinkering with _dbField() and _buildField() functions, but I couldn't get the alias to be recognized when there's a function in the field name.

Is there a bug?

In my initiailzation I have columns defined to match my AJAX JSON data as follows (example):

    columns: [
      { data: "column1" },
      { data: "column2" },
      { data: "column3" }
      ]

Is there a way to avoid this and define this from the view via html data attributes like this?:

          <table id="my_datatable" data-source="my_data.json">
            <thead>
              <tr>
                <th data-column="column1">Column 1</th>
                <th data-column="column2">Column 2</th>
                <th data-column="column3">Column 3</th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>

My use case involves the following the following workflow:

• Default view table grid
• Click custom button to edit / add
• On custom button click hide grid, show form (no popup)
• Edit and submit form
• Form hides, grid shows.

Has anyone please got any pointers on how to do this making maximum use of datatables / editor library?
My implementation is Bootstrap4

Any help or comments appreciated
Mike

This is my php code wich i want to change to javascript using datatable

and this is my code javascript using datatable

I want make condition button like on php..
Please Help me..

Thanks