I downloaded editor samples, and in controller json.js, I write two routes, they all used join tables.

Here is the first one, it works fine on new, editing and deleting.

// using `public` schema
router.all('/api/join', async function(req, res) {
    let editor = new Editor(db, 'users')
        .debug(true)
        .fields(
            new Field('users.first_name'),
            new Field('users.last_name'),
            new Field('users.phone'),
            new Field('users.site').options(
                new Options().table('sites as sites1').value('id').label('name')
            ),
            new Field('sites.name')
        )
        .leftJoin('sites as sites', 'sites.id', '=', 'users.site');

    let e2 = await editor.process(req.body);

    res.json(editor.data());
});

And this one only works on new and editing.On deleting side, it seems the SQL not called.

// using `sandbox1` schema
router.all('/api/join2', async function(req, res) {

    let editor = new Editor(db, 'sandbox1.users as users')
        .fields(
            new Field('users.first_name'),
            new Field('users.last_name'),
            new Field('users.phone'),
            new Field('users.site')
                .options(
                    new Options().table('sandbox1.sites as sites1').value('id').label('name')
                ),
            new Field('sites.name')
        )
        .leftJoin('sandbox1.sites as sites', 'sites.id', '=', 'users.site')

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

I use datatables.net-editor-server 1.8.1.

And I am sure the font-end send the right data to back-end.

Any suggestion for me?

Hello all!

I have the editor extension to my datatable. When a cell is changed I want the value to be sent to a service --> controller --> repository and then be updated via an SP.

Columns in db are, Dog, Cat, Fish, Cow.

JS:

 $(document).ready(function () {
                editor = new $.fn.dataTable.Editor( {
                    ajax: {
                        url: "Services/FileName.svc/SaveNewAnimals ",
                        contentType: 'text/javascript; charset=utf-8',
                        dataType: 'json',
                        data: function(d){
                        
                           return JSON.stringify(d.data);
                       },
                    },

d.data will no contain the value that has been changed in the table. For example lets say we change a 1 --> 2.
d.data will look like this: 17058: {Cow: "2"} - if you change a cell in the cow column. Also the number 17058 I have no idea what that is.

Service (c#):

 public propertyClass SaveNewAnimals (arg) 
        {

            var response = new AnimalPropertys
            {
                Cow = arg.Cow
            };
            Controller.AnimalMethodInController(response);
            return response;
        }

The problem is the **argument **in the service. When I POST from js --> service and send the data 17058: {Cow: "2"} I dont know how to retrieve it with an argument. Shall I create a property class for the send POST and map the values with the properties. Or can I simply send a int from the POST?

What is the best way to retrieve the POST data in a method? Which datatype can I put as and argument to retrieve the data being send from POST.

Br,

Anton

I started evaluating editor for a small requirement I have but I am not so sure it can be done without changing the underlying data structure

This example https://editor.datatables.net/examples/advanced/joinArray.html is closest to what I am looking for

User selects the row, clicks edit and can checkbox up to 3 options Email, SMS, Call
What is displayed however is based on the enabled field in the JSON

DataTables table is able to render the column correctly with simple { data: "notification.enabled" }
The editor however will not render the checkboxes with the editor fields initialization options below.

Any ideas if this is supported in datatables editor ?

            {
              label: "Notification:",
              name: "notification.options",
              type: "checkbox"
            },

//Data source

[
{
    "notification": {
        "enabled": ["Email"],
        "options": ["Email", "SMS", "Call"]
    },
    "_id": "5c2bab964d83ef7b06599621",
    "name": "Doyle Gerlach IV"

}, {
    "notification": {
        "enabled": ["Email"],
        "options": ["Email", "SMS", "Call"]
    },
    "_id": "5c2bab964d83ef7b06599620",
    "name": "Keagan Batz"
}
]

Hello!

I've been trying to use the datatables scroller to load data dynamically as the scrolling happens. The only problem I'm having is with triggering the ajax to fire again. It doesn't call the ajax in an appropriate position in the table. The same problem occurs in the 50k example on this website.

I've been able to get it to fire by manually setting a height between 25 and 50 viewport height. Here's my initialization:

DOM:

`<table id="permissionsTableList" class="hbs-grid hbs-list" style=" width:98%;height: 25vh !important">
        <thead>

        </thead>
        <tbody></tbody>
    </table>
`

Datatables initialization:

 $('#permissionsTableList').dataTable({
                destroy: reinit,
                "bScrollInfinite": true,
                "bScrollCollapse": true,
                "order": [0, 'asc'],
               "deferRender": true,
                "scrollY": "50vh",
                "serverSide": true,
                "scroller": {
                    loadingIndicator: true,
                    
                },
                "ajax": function (data, callback, settings) {

                    $.ajax({
                        type: "GET",
                        url: "URL?handler=GetData",
                        data: { start: data.start, length: 50 },
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("XSRF-TOKEN",
                                $('input:hidden[name="__RequestVerificationToken"]').val());
                        },
                        success: function (d) {
                                setTimeout(function () {
                                    callback({
                                    draw: data.draw,
                                    data: d,
                                    recordsTotal: @Model.Data.Count(),
                                    recordsFiltered: @Model.Data.Count(),
                                });
                            }, 50)
                        }
                    })
                },

Any help figuring out this problem is apprfiated.

Hello everyone, i use Rest API with Ajax, and i use Jetty server. How i can modify one row.
the button " Edit " i make it inside the Table but i don't have any Idea witch method i have to use, i don't want to use Editor plugin, if u have some Idea tell me please.
i need to method how to edit one row and how to create"Add" new row!
i gonna post one picture for the my Table to see how's it, and the code for Ajax.

Thank you.


$.ajax({
url: "gooooood/job",

    method: "GET",
    dataType: "json",
    success: function (r) {
        var data = r.data
        var dataSet = [];
        for (var i = 0; i < data.length; i++) {
            if (data[i].type == undefined)
            var type_name = ''
            else {
                var type_name = data[i].type.name;
            }
            if (data[i].person == undefined)
            var person_name = ''
            else {
                var person_name = data[i].person.name;
            }
            if (data[i].location == undefined)
            var location_name = ''
            else {
                var location_name = data[i].location.name;
            }
            dataSet.push([
                data[i].id,
                data[i].device,
                type_name,
                data[i].additionalInfo,
                data[i].serialNumber,
                person_name,
                location_name,
                "<button class='edit'>Edit</button><button class='delete'>Delete</button>"
            ]);
        }
        $('#data-table').DataTable({
            data: dataSet,
            columns: [
                { title: "Id" },
                { title: "Device" },
                { title: "Type" },
                { title: "Additional Info" },
                { title: "Serial Number" },
                { title: "Person" },
                { title: "Location" },
                { title: "Actions" }
            ],
            "rowCallback": function (row, data) {
                $(row).find("button.edit").off("click").on("click", function () {
                    edit_row(data[0]);
                });
                $(row).find("button.delete").off("click").on("click", function () {
                    delete_row(data[0]);
                });
            }
        });
    },
    statusCode: {
        401: function () {
            window.location.href = "login.php";
}}

});}

Hi All,

I wanted to insert a "Heading column" when the editor window is opened. This changes based on the context, if a new record is created no heading is displayed where as if a existing record is edited it displays some text. I have used the below code

editor.on('open', function(e,json,data){
    console.log('open');
    console.log(json);
    console.log(data);
    console.trace();

    if (data == 'edit')
    {
        var html = "<center><div id=\"headingtext\" class=\"alert alert-success\">Approve for payment</div></center>";
         $('div.DTE_Form_Content').prepend( html );
    }
});

This method is invoked twice so the prepended html appear twice. Please see the picture below. If i see the stack trace it is invoked from the same handler twice.

I have a similar code in similar html page but there it is only invoked once. I'm using the following header files

<!-- Required datatable js -->
        <script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>


        <script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
        <script src="https://cdn.datatables.net/plug-ins/1.10.19/api/sum().js"></script>

        <!-- Buttons -->
        <script src="https://cdn.datatables.net/buttons/1.5.4/js/dataTables.buttons.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.5.4/js/buttons.bootstrap4.min.js"></script>
        <script src="../../assets_uplon/plugins/datatables/jszip.min.js"></script>
        <script src="../../assets_uplon/plugins/datatables/pdfmake.min.js"></script>
        <script src="../../assets_uplon/plugins/datatables/vfs_fonts.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>
         <script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.colVis.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.flash.min.js"></script>
        <!-- Key Tables -->
        <script src="https://cdn.datatables.net/keytable/2.4.1/js/dataTables.keyTable.min.js"></script>

        <!-- Responsive -->
        <script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
        <script src="https://cdn.datatables.net/responsive/2.2.2/js/responsive.bootstrap4.min.js"></script>

        <!-- Selection table -->
        <script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js"></script>

        <!--datatables-editor ext -->
        <script src="../../php/Editor181/lib//js/dataTables.editor.min.js"></script>
        <script src="../../php/Editor181/lib//js/editor.bootstrap4.min.js"></script>

Is there any initiative to have DataTables operate without jQuery as a dependency?

Hi @allan and other community members,

Request your help in this.

Functional Requirement
I have an php based editor implementation for a table called "Travel Expense". There are two buttons "Advance Request" and "Submit" each of it is connected to its own editor instance. Now i have a separate table called "Remarks" whenever the user click's "Advance Request" or the "Submit" button I insert a record in to the "Remarks" to record the history of the transaction as shown below.

Action: Advance Paid Submitted on: 2019-01-03T17:20 User: kamal.e

Action: Approval Request Submitted on: 2019-01-03T17:21 User: kamal.e

Technical Implementation
I have a Datatable connected to PHP ajax
Two Editor instance for each button as show below

    if (submiteditor == null)
        {
            submiteditor = new $.fn.dataTable.Editor( {
                serverSide: true,
                ajax: {
                    url: "../../php/cud/travelapprovalcud.php",
                    type: "POST",
                    data: function(d){
                        d.userid   = "<?php echo $loginid; ?>"; 
                        d.status   = $("#reportstatus").val();                  
                        d.showdraft = true;
                    }               
                },  
                table: "#travelexpenserecordentrytable",
                fields: [
                    {
                        label: "Expense ID",
                        name: "travelexpenserecord.teid",
                        type: "readonly"
                    },
                    {
                        label: "Status",
                        name: "travelexpenserecord.status",
                        type: "readonly"
                    },

                ]

            });
        }

        if (adveditor == null)
        {
            adveditor = new $.fn.dataTable.Editor( {
                serverSide: true,
                ajax: {
                    url: "../../php/cud/travelapprovalcud.php",
                    type: "POST",
                    data: function(d){
                        d.userid   = "<?php echo $loginid; ?>"; 
                        d.status   = $("#reportstatus").val();
                        d.showdraft = true;
                    }               
                },  
                table: "#travelexpenserecordentrytable",
                fields: [
                    {
                        label: "Expense ID",
                        name: "travelexpenserecord.teid",
                        type: "readonly"
                    },
                    {
                        label: "Status",
                        name: "travelexpenserecord.status",
                        type: "readonly"
                    },
                    {
                        label: "Advance Required",
                        name: "travelexpenserecord.advreq"                  
                    }

                ]       
            });
        }

In order to achieve insertion of remarks entry I use the submitSuccess function as show below,

    adveditor
        .on('submitSuccess', function(e, json, data, action, xhr){
            e.preventDefault();
            console.log("Advance");
            console.log(json);
            console.log(data);
            console.log(action);
            var dtx     = json.data[0];
            managebuttons(dtx);
            insertremarks(dtx, "Advance Request");

        });

        submiteditor            
        .on('submitSuccess', function(e, json, data, action, xhr){
            e.preventDefault();
            console.log("submit");
            console.log(json);
            console.log(data);
            console.log(action);
            var dtx     = json.data[0];
            managebuttons(dtx);
            insertremarks(dtx, "Approval Request");
        });

I also have listeners for "initEdit", "presubmit", "open". When the user clicks the button "Submit" or "Advance" the events are called multiple times because of which the "Remarks" entry are made multiple times instead of just one time. Similar the event "Open" is also called multiple times. The number of time it gets called is unpredictable sometime 3 or 4 or 1.

You can check the entire code and sample implementation here.

https://accounts.inphase.in/pages/tvl/tvldup.php

Why is this happening or where am i going wrong ?

Thanks in advance for your help.

Hey

I have a problem when i use function createPanel.
All Input type (data-editor-field) field works great, but select list not working on Panel?

I use this code editing my own program..
https://editor.datatables.net/examples/standalone/collection.html

Row
'<dd data-editor-field="customer.treatment_id">'+data.customer.treatment_id+'</dd>'+

and
editor = new $.fn.dataTable.Editor( {
ajax: "js_customer.php",
fields: [ {
label: "Treatment:",
name: "customer.treatment_id",
type: "select"
}.......

This same code work if i use normal datatable, not not as use Panel.

A couple of questions / issues when using Datatables in combination with Parcel bundler.
I am quite new to bundlers, especially Parcel. So apologies if I misunderstand the instructions.

Context: using simple example that uses <table> as datatable:

$('#example').DataTable( {
    dom: 'Bfrtip',
    select: true,
    buttons: [
        'copy', 'excel', 'pdf'//, 'selectAll', 'selected'
    ]
} );

I used the Datatables download tool (1. framework: DataTables, 2 packages: jQuery 3, DataTables; extensions: Buttons, HTML5 export, JSZip, pdfmake, Print view, Responsive, Select).

When using download method CDN everything works as expected.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/jszip-2.5.0/dt-1.10.18/b-1.5.4/b-html5-1.5.4/b-print-1.5.4/r-2.2.2/sl-1.2.6/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/jszip-2.5.0/dt-1.10.18/b-1.5.4/b-html5-1.5.4/b-print-1.5.4/r-2.2.2/sl-1.2.6/datatables.min.js"></script>

When using download method Yarn I have several issues. I followed the instructions: added the modules (yarn add), and added the requires to the app.js:

var $  = require( 'jquery' );

require( 'jszip' );
require( 'pdfmake' );

require( 'datatables.net-dt' )();
require( 'datatables.net-buttons-dt' )();
require( 'datatables.net-buttons/js/buttons.html5.js' )();
require( 'datatables.net-buttons/js/buttons.print.js' )();
require( 'datatables.net-responsive-dt' )();
require( 'datatables.net-select-dt' )();

1) CSS is not loaded?

I don't see any Datatables CSS being loaded.

2) no buttons are displayed

None of the buttons are displayed / visible in the source code.

3) selectAll, selected, print, give Uncaught Unknown button type

When I e.g. add selected, selectAll or print I get in the log e.g.: Uncaught Unknown button type: selectAll

4) pdfmake gives fs error on build

<path>/node_modules/pdfkit/js/image.js:32:33: Cannot statically evaluate fs argument
<path>/node_modules/png-js/png-node.js:45:29: Cannot statically evaluate fs argument
<path>/node_modules/fontkit/index.js:43:31: Cannot statically evaluate fs argument
<path>/node_modules/pdfkit/js/font/afm.js:11:41: Cannot statically evaluate fs argument

Could be this is related to https://github.com/parcel-bundler/parcel/issues/432
I tried @import 'datatables.net-dt' but that had no effect (CSS still not loaded).
I don't get the mentioned error message (main.css:2.1).

It refers to a blog post, I have the feeling that was not created yet?

Hi all,

I have been integrating Datatables on my site. On some pages it works fine. On others, none of the features (search, sort, ...) appear on the screen although it slightly modifies the display of the tables.

This error appears and as you can guess, I don't use a variable called nTd :

jQuery.Deferred exception: nTd is undefined _fnCreateTr@http://localhost/e-banking/JAVA/datatables.js:3118:6
_fnAddData@http://localhost/e-banking/JAVA/datatables.js:2435:4
http://localhost/e-banking/JAVA/datatables.js:2463:11
http://code.jquery.com/jquery-3.3.1.min.js:2:1324
map@http://code.jquery.com/jquery-3.3.1.min.js:2:3169
map@http://code.jquery.com/jquery-3.3.1.min.js:2:1292
_fnAddTr@http://localhost/e-banking/JAVA/datatables.js:2461:10
loadedInit@http://localhost/e-banking/JAVA/datatables.js:1293:6
http://localhost/e-banking/JAVA/datatables.js:1318:5
each@http://code.jquery.com/jquery-3.3.1.min.js:2:2571
each@http://code.jquery.com/jquery-3.3.1.min.js:2:1238
DataTable@http://localhost/e-banking/JAVA/datatables.js:881:3
$.fn.DataTable@http://localhost/e-banking/JAVA/datatables.js:15135:18
http://localhost/e-banking/JAVA/xdata.js:4:17
l@http://code.jquery.com/jquery-3.3.1.min.js:2:29373
http://code.jquery.com/jquery-3.3.1.min.js:2:29677
undefined jquery-3.3.1.min.js:2:30920
TypeError: nTd is undefined[En savoir plus]

Any chance I could get some help with this ?

Thanks a lot.

Hi y'all,
This might not be a Datatables/Editor problem, but hopefully someone had the same problem..

My project worked perfectly, but after I updated my computer (using linux parrot), something went wrong...
I'm getting invalid Jsom error, with the following output:

I've tried to solve it, but have no clue what so ever..
I do have a hunch that it might have something to do with Postgresql, which I'm using in my project.
If i disable my ajax call, which is also serversided, then it works but with no data ...

Does any1 know how to fix this?
Regarding the error line in /var/www/html/ReGen2.0/Editor-PHP-1.7.4/php/Database/Driver/Postgres/Result.php on line 58, is the following:

It does say "Method 'fetch' not found..." but I haven't done anything to any of the default Datatables/Editor files.....
It overrides the following method, if it helps

I truly hope someone can help.... I'm loosing my mind..

Kind regards Esmurf!

do I use the datatables in database class manually

insert 
update 
delete
select 
row count 

how use this ?

how to get the error codes ?

I believe i solved the problem with printing with row grouping. I found a snippet of code on StackOverflow here and was able to fix it up to work with row grouping. This is placed in datatable-buttons.js on line 1564.

Heres some images of it working!
http://prntscr.com/fhx1vu
http://prntscr.com/fhx1ia

    var _exportData = function ( dt, inOpts )
    {

        var config = $.extend( true, {}, {
            rows:           null,
            columns:        '',
            grouped_array_index: [],
            modifier:       {
                search: 'applied',
                order:  'applied'
            },
            orthogonal:     'display',
            stripHtml:      true,
            stripNewlines:  true,
            decodeEntities: true,
            trim:           true,
            format:         {
                header: function ( d ) {
                    return strip( d );
                },
                footer: function ( d ) {
                    return strip( d );
                },
                body: function ( d ) {
                    return strip( d );
                }
            }

        }, inOpts );

        var strip = function ( str ) {
            if ( typeof str !== 'string' ) {
                return str;
            }

            // Always remove script tags
            str = str.replace( /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '' );

            if ( config.stripHtml ) {
                str = str.replace( /<[^>]*>/g, '' );
            }

            if ( config.trim ) {
                str = str.replace( /^\s+|\s+$/g, '' );
            }

            if ( config.stripNewlines ) {
                str = str.replace( /\n/g, ' ' );
            }

            if ( config.decodeEntities ) {
                _exportTextarea.innerHTML = str;
                str = _exportTextarea.value;
            }

            return str;
        };


        var header = dt.columns( config.columns ).indexes().map( function (idx) {
            var el = dt.column( idx ).header();
            return config.format.header( el.innerHTML, idx, el );
        } ).toArray();

        var footer = dt.table().footer() ?
            dt.columns( config.columns ).indexes().map( function (idx) {
                var el = dt.column( idx ).footer();
                return config.format.footer( el ? el.innerHTML : '', idx, el );
            } ).toArray() :
            null;

        var rowIndexes = dt.rows( config.rows, config.modifier ).indexes().toArray();
        var selectedCells = dt.cells( rowIndexes, config.columns );
        var cells = selectedCells
            .render( config.orthogonal )
            .toArray();
        var cellNodes = selectedCells
            .nodes()
            .toArray();

        var grouped_array_index     = config.grouped_array_index;                     //customised
        var no_of_columns           = header.length;
        var no_of_rows              = no_of_columns > 0 ? cells.length / no_of_columns : 0;
        var body                    = new Array( no_of_rows );
        var body_data               = new Array( no_of_rows );                                //customised
        var body_with_nodes         = new Array( no_of_rows );                          //customised
        var body_with_nodes_static  = new Array( no_of_rows );                          //customised
        var cellCounter             = 0;

        for (var i = 0, ien = no_of_rows; i < ien; i++)
        {
            var rows            = new Array( no_of_columns );
            var rows_with_nodes = new Array( no_of_columns );

            for ( var j=0 ; j<no_of_columns ; j++ )
            {
                rows[j]             = config.format.body( cells[ cellCounter ], i, j, cellNodes[ cellCounter ] );
                rows_with_nodes[j]  = config.format.body( cellNodes[ cellCounter ], i, j, cells[ cellCounter ] ).outerHTML;
                cellCounter++;
            }

            body[i]                     = rows;
            body_data[i]                = rows;
            body_with_nodes[i]          = $.parseHTML('<tr class="even">'+rows_with_nodes.join("")+'</tr>');
            body_with_nodes_static[i]   = $.parseHTML('<tr class="even">'+rows_with_nodes.join("")+'</tr>');
        }

        /******************************************** GROUP DATA *****************************************************/
        var row_array                       = dt.rows().nodes();
        var row_data_array                  = dt.rows().data();
        var iColspan                        = no_of_columns;
        var sLastGroup                      = "";
        var inner_html                      = '',
            grouped_index;
        var individual_group_array          = [],
            sub_group_array                 = [],
            total_group_array               = [];
        var no_of_splices                   = 0;  //to keep track of no of element insertion into the array as index changes after splicing one element

        for (var i = 0, row_length = body_with_nodes.length; i < row_length; i++)
        {
            sub_group_array[i]              = [];
            individual_group_array[i]       = [];

            var sGroup                      = '';

            for(var k = 0; k < grouped_array_index.length; k++)
            {
                sGroup                          = row_data_array[i][grouped_array_index[k]];
                inner_html                      = row_data_array[i][grouped_array_index[k]];
                grouped_index                   = k;
                individual_group_array[i][k]    = row_data_array[i][grouped_array_index[k]];
                sub_group_array[i][k]           = sGroup;
            }

            total_group_array[i] = sGroup;


            console.log("grouped_index",grouped_index);

            if ( sGroup !== sLastGroup )
            {
                var table_data              = [];
                var table_data_with_node    = '';

                for(var $column_index = 0;$column_index < iColspan;$column_index++)
                {
                    if($column_index === 0)
                    {
                        table_data_with_node        += '<td style="border-left:none;border-right:none">'+inner_html+'</td>';
                        table_data[$column_index]   = inner_html + " ";
                    }
                    else
                    {
                        table_data_with_node        += '<td style="border-left:none;border-right:none"></td>';
                        table_data[$column_index]   = '';
                    }
                }

                body_with_nodes.splice(i + no_of_splices, 0, $.parseHTML('<tr class="group group_'+grouped_index+' grouped-array-index_'+grouped_array_index[grouped_index]+'">'+table_data_with_node+'</tr>'));
                body_data.splice(i + no_of_splices, 0, table_data);
                no_of_splices++;
                sLastGroup = sGroup;
            }
        }

        return {
            header: header,
            footer: footer,
            body:   body_data
        };
    };

Usage:
Define grouped_array_index in exportOptions

 exportOptions: {
        // Any other settings used
        grouped_array_index: [<place row to use here>],
 },

Hello Support
I have designed websites for many years but have been using an old system called WebPlusX8 from Serif and no longer supported. It still works but time to move up and on and I have been looking at WordPress but I need to be able to filter a table of old cycle race results by up to 4 columns eg Race Name, Date, Club and Member.
Can anyone be kind enough to point me in the correct direction regarding DataTables and filtering as I found this page shows exactly what I require
https://legacy.datatables.net/extras/thirdparty/ColumnFilterWidgets/DataTables/extras/ColumnFilterWidgets/
Any help much appreciated.

So I am trying to add data-sort attribute on initialisation of the datatable. Mainly for use of sorting dates or numbers.
datatables attribute
However after googling and searching I couldn't find how to do this in the .DataTable() initialisation.

Anyone have suggestion or can link to another post which shows it?
Something like having it in the columns option if this is doable:
.DataTable({columns: [{ data: 'date'}]})

Hi
I am trying the example for scrollTo and does not seem to work
https://datatables.net/extensions/scroller/examples/initialisation/api_scrolling
It should point to record 1000 but does not move

Having the same problem with my program

Thanks
JF

I have added child rows from the example https://datatables.net/examples/api/row_details.html . Now I want to add responsive to the table. I have a problem that when I show the child row, the table is way to wide even for the container. I thought maybe there was some configuration problem but notice that when I remove "nowrap" from the table it is fine. But then the responsive does not work. When I have table class="display responsive nowrap" any long text in a TD in child row breaks the width. Is there a way to fix this?
Here is closed: https://www.screencast.com/t/OQrJtrus3Bc
Here it is opened: https://www.screencast.com/t/WOMclzely

Hi there,

I am very new to DataTables. I'm facing an issue related to the visibility of my results. I'm making an ajax request which returns 5155 items, ordered alphabetically.
But not all of these items are being shown at the first moment. It seems DataTables makes a sumarization of the data, and, for performance issues, "chooses" only some data to show.
For example, I have a lot of words that begin with 'A', but only a few of them are being shown.

Is there anything I need to set on my options to avoid this situation?

That's how my table is being initialized:

$('#myTable').DataTable({
                ajax: {
                    url: "/my_service",
                    dataSrc: function(myList){
                            var data = [];
                            for(var i = 0; myList && i < myList.length; i++){
                               // do some stuff here....
                              data.push({
                                  field1: myList[i].field1,
                                  field2: myList[i].field2,
                                  field3: myList[i].field3,
                                  field4: myList[i].field4
                              })
                            }
                        }
                        return data;
                    }
                },
                columns: [
                    { data: 'field1' },
                    { data: 'field2' },
                    { data: 'field3' },
                    { data: 'field4' }
                ],
                scrollY:        true,
                deferRender: false,
                scroller: true,
                language: {
                    decimal: ',',
                    thousands: '.'
                }
            });

$('#myTable').on( 'init.dt', function (e, settings, results) {
                // do some stuffs here...
            } );

Is there anything I'm missing?

Thanks,

Guilherme

Hi there,

I need to pass specific custom parameters on server side mode. This parameter is returned on the first requisition and then I need to pass it on the next ones. I couldn't do that because I couldn't change the ajax url string. Is there a way to do it?

Thank you,

Guilherme