I want to start with a dt with ordering set to false and turn it after pageload.
I have, but it's not working:

const dt_1 = $('#my_id').DataTable({
   ordering  : false,
//...... others
});
// and then
$(() => {
    dt_1.ordering = true;
    dt_1.draw();
}

I am using the page-resize datatables plugin inside a .ibox-content container which is an Inspinia panel (see: http://webapplayers.com/inspinia_admin-v2.8/tabs_panels.html - the third example on the page, "Example with fullscreen option")

When I click on the icon to make the panel content go full screen the resize page plugin fires the onresize event in an endless loop.

If you save the inspina page referenced above as a starting point and add the following style, js, and .ibox-content HTML to the third .ibox on that page then you will be able to reproduce the issue.

Style:

<style>

/* !!!!!!!!!!!!!!!
Note that I suspect that this is what causes the infinite loop.  However, without this the .ibox-content does not expand to consume the entire display area of the screen */
.ibox.fullscreen {
    position: fixed !important;  /*have to use !important here because of conflict between datatables overwriting inspinia's property */
}

        .resize_handle {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 1.5em;
            text-align: center;
            font-size: 0.8em;
            line-height: 1.5em;
            background-color: inherit;
            color: #5e5e5e;
        }

            .resize_handle:hover {
                background-color: #1c84c6;
                color: white;
                cursor: pointer;
            }

        table.dataTable th, table.dataTable td {
            white-space: nowrap;
        }

        div.dataTables_length {
            display: none;
        }

        .dataTables_wrapper {
            padding-bottom: 15px;
        }
    </style>

JS:

<script>

        $(document).ready(function() {


            // Event listner to resize the .resize_wrapper container with a mouse drag on the .resize_handle element
            //** this is slightly modified from the example to make it work for multiple panels with resizeable datatables on a single page
            $('.resize_handle').on('mousedown',function(e) {
                var wrapper=$(this).closest('.ibox-content').find('.resize_wrapper');
                var mouseStartY=e.pageY;
                var resizeStartHeight=wrapper.height();

                $(document)
                    .on('mousemove.demo',function(e) {
                        var height=resizeStartHeight+(e.pageY-mouseStartY);
                        if(height<180) {
                            height=180;
                        }

                        wrapper.height(height);
                    })
                    .on('mouseup.demo',function(e) {
                        $(document).off('mousemove.demo mouseup.demo');
                    });

                return false;
            });

            // DataTables initialisation
            var table=$('#demoTable').DataTable({
                scrollResize: true,
                scrollX: true,
                scrollY: 100,
                scrollCollapse: true,
                paging: false
            });

        });

        
        // listen for when datatables is done rendering a dt so we can move the
        // #dataTables_info element into the associated #{table}_info-container.
        $('.wrapper-content').on('draw.dt',function(e) {
            var id=$(e.target).attr('id');
            $('#'+id+'_info').appendTo('#'+id+'_info-container');
        });       


    </script>

Look for this HTML found in the referenced URL above:

<div class="ibox">
                    <div class="ibox-title">
                        <h5>Example with fullscreen option</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="fullscreen-link">
                                <i class="fa fa-expand"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">

                        <p>
                            Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. </p>
                        <p>
                            Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
                        </p>
                    </div>
                </div>

And replace it with this:

        <div class="row">
            <div class="col-xs-12">
                <div class="ibox position-relative border-bottom">
                    <div class="ibox-title">
                        <h5 class="text-muted">
                            <span><i class="fal fa-ticket-alt"></i> Orders <span class="badge">74</span></span>
                        </h5>
                        <div class="ibox-tools">
                            <a class="fullscreen-link">
                                <i class="fa fa-expand"></i>
                            </a>                            
                        </div>
                    </div>
                    <div class="ibox-content position-relative">
                        

                        <div class="row">                            
                            <div id="demoTable_info-container" class="col-xs-12 mt-0 mb-4"></div>
                        </div>

                        <div class="resize_wrapper position-relative">
                            <table id="demoTable" class="table table-striped table-responsive">

                                <thead>
                                    <tr>
                                        <th>Order #</th>
                                        <th>Cust. #</th>
                                        <th>Cust. Name</th>
                                        <th>City, State</th>
                                        <th>Rep</th>
                                        <th>Labels</th>
                                        <th>Creation Date</th>
                                        <th>Status</th>
                                        <th>Status User</th>
                                        <th>Status Date</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>

                        </div>
                        <div class="resize_handle text-muted">Click and drag to resize</div>
                    </div>
                </div>
            </div>

        </div>

**Also, load the datatables and page_resize scripts in the head section. **
This is the datatables script file we are using: https://datatables.net/download/#bs/jszip-2.5.0/pdfmake-0.1.32/dt-1.10.16/b-1.5.1/b-html5-1.5.1/b-print-1.5.1/fc-3.2.4/fh-3.1.3/sc-1.4.4

And this is the page_resize plugin file we are using:
https://datatables.net/blog/2017-12-31#Implementation

hi alan i am waiting for the reply for the two duplicates at

https://m.datatables.net/forums/discussion/52203/editor-select2-ajax-set-default-value-to-select2-when-datatable-row-selected#latest
and
https://datatables.net/forums/discussion/52112/select2-editor-edit-set-intial-value-or-default-value#latest

Hello guys, I am using DataTables and I am having some troubles with get the data from the all the rows that are selected, I am using a check box on my table, all the rows have a little form using a dropdown select as a input, with some pre-established options depending of the row, I already put the dropdown list as cell, like the exemple of form on dataTable.

How can I get the data just from the select row, with the form already $.()serialized ??

I have tried this code

$(document).ready( function () {
  var table = $('#myTable').DataTable(

'buttons' : [ {
extend: 'selected',
text: 'Count selected rows',
action: function ( e, dt, button, config,indexes  ) {
var rowData = table.rows( { selected: true }).data().toArray().$('select').serialize();
alert(JSON.stringify(rowData))
  } }]
 );
  // ...
 });

I tried both

        .on('initSubmit', async function( e, a ) {
            map = await teamNameMap()
            team_id = editor.field('system_name').val()
            team_name = map[team_id]
            editor.field('subsystem').val(team_id)
            editor.field('system_name').val(team_name)
            editor.field('api_token').val(Math.random(1) * 100)
        })

and

        .on('preSubmit', async function( e, o, a ) {
            console.log(e)
            data = o.data[Object.keys(o.data)[0]]
            data.subsystem = data.system_name
            let map = (await teamNameMap())
            data.system_name = map[data.subsystem]
            data.api_token = "cheese"
            o.data = data
        })

and neither seem to be affecting the data that gets sent to the server, afaics from dev console

Hi,

I setup autofill and when I go to drag it, it would highlight the rows but not save any data in it. Now, I don't know what changed but it doesn't even show the little blue box to drag. I'm using autofill with keys together + inlining. Wondering what I'm doing wrong...

autoFill: {
                columns: ':not(:first-child)',
                editor: editor
            },
            keys: {
                columns: ':not(:first-child)',
                editor: editor
            },
            select: {
                style: 'os',
                selector: 'td:first-child',
                blurable: true
            },     

I'm trying to populate a datatable with server side processing and have set the serverSide option to true with the following ajax configuration.

        ajax: {
            url: 'get-data',
            type: 'get',
            contentType: "application/json",
            dataSrc: function(d) {
                return d.data;
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(jqXHR, textStatus, errorThrown);
            },
        },

However, the only input my get-data API receives is {"\/get-data":null}. I'm not sure what I'm doing wrong as I thought there should be a number of automatic sent parameters including "start" and "length". Does anyone know what I'm doing wrong? Any help is much appreciated! Thanks in advance!

Is it possible to hide all the rows when the table is processing during a serverside search?
Preferably showing a message in the table with the processing text? Just like the one that is shown when no rows are found?

Hello my dear friends!
i'm looking for an experienced developer to work on my project and upgrade datatable to editor and customize it to my needs

we're using vk.com API - mysql (elasticsearch in nearest future) - laravel - datatable with a lot of js scripts and i want these scripts to migrate to back-end in laravel mode validator

you have to be online in skype and telegram 9.00 to 18.00 (+3 GMT)

rate > 15$/hr

My problem is with Data-Table Grand child. Toggle button to show and hide the row works fine when it is parent and child, but it won't work when i've 3 level nesting, e.g parent , child, grand child.

The problem i'm facing is , Click on parent does not close the grand child. If i close the parent then child and grand child should also be closed but it does not. What is the solution?

I have read posts saying this is a bad idea but i'm pretty sure I have a good use case.

Currently (without DT) I have a table that updates live, when the database gets a new row it sends a websocket message to the tables javascript which appends a new row. I'd like to do the same with DT but the only way i can get it to work is to fresh the whole table when a new row comes in.

Is there a way to simply add a new row with javascript? I have tried .draw(false) but doesn't seem to work.

Thanks.

Hello,

I use a custom API in order to make calls and pass data to my datatables. I don't use the ajax() method of DataTable but i initialize my Datatable with columns and data parameters. (JSON).

I use the API with .row/.rows/.data/.add in order to manipulate my rows when I received data from the server (in fact is websocket API).

I need to "re-execute" the render of data, because data is updated by websocket and sometimes all data are replaced.
Currently I found a way to do it :
- I Use the api with .rows().every() in order to loop data
- In the loop I use : this.data(this.data()); in order to "re-render" the data
- After the loop I use draw() for reload.

I want to know if a "propper" way it's possible ?
I think it's mandatory to use data() method in order to update data(), but maybe it exists a data().refresh(), or table.reload();
Because the .draw() simply draw the table with the data but doesn't reload the data().

Thank's.

I have some problems with mark.js where a regex search does not get highlighted.

dtApi.column('status:name').search('^test|test space$', true, false).draw();

The search works; only when the column matches "test" or "test space" the result is shown. However, because of the whole-line (^$) search, mark.js does not mark the results. When searching for test|test space it works, but I'd like to use the whole-line operators for the exact matches. Otherwise "test" also matches "test space".

I tried search('"test" "test space"', false, true); but that does not seem to be what I'm looking for. I also tried to change the mark() function in the datatables.mark.js plugin to markRegExp() but with the limited amount of time I have I couldn't get that to work either.

Wondering what I should do here and whether on not it's something that's supposed to work the way I'm using it.
I'm thinking of handling the marking myself as if it were a regular table on a page, but such workarounds I'd rather keep as a last resort.

Thanks.

Hello,

I wanted to ask if it is possible to set ',' as the global default decimal separator so that I don't always have to use the Number helper $.fn.dataTable.render.number( '.', ',' ) as renderer for my columns. Because I'm getting the data as JSON and there the numbers come with a '.' as separator but I always want to display them with a ','.

Thanks in advance

"ajax": "data/arrays.txt" - how to get ajax load completed event.

Hello,

I wanted to ask if it is possible to have a default text-alignment for columns depending on the type so that e.g. columns with numbers are always aligned to the right ?

Thanks in advance

Steps:
Data-table with editor has multiple select2 in form.
->select2 is binded data with ajax.
->when datatables->create is called new form with select2 works fine , shows autocomplete retrieved through ajax and sets value to the text input when option selected from auto fill.

Question:
But not able to set the initial value to select2 when a particular row is selected from data-table.Noticed ajax calls in console for the select2 when edit button is clicked after row is selected.

screenshot :

code :

{
                 "label": "Area",
                 "name": "Area.AreaId",
                 "type": "select2",
                 "data": "Area.AreaName",
                 "initialValue":true,
                 "opts": {
              "templateResult": function(data) {

                      return data.text;
                  },
                  "templateSelection": function(data) {
                      alert(JSON.stringify(data.text));
                       return data.text;
                  },
                     "minimumInputLength": 3,
                     "placeholder": 'Area',
                     "allowClear": true,
                     //"initialValue":true,
                     ajax: {
                       url: 'Area/json',
                       delay: 250 ,
                       dataType: 'json',
                      initialValue:true,

                     data: function (params) {
                         var query = {
                               value: params.term

                         }

                         // Query parameters will be ?search=[term]&type=public
                         return query;
                       },
                     processResults: function (data) {
                       return {
                           results: $.map(data, function(obj) {
                               return { id: obj.AreaId, text: obj.AreaName };
                           })
                       };
                   }
                     }
                 }
             }

thanks

Hi Allan

i have implemented select2 successfully for editor , worked as expected for "create" option,
but problem is the edit form does not update with value to the select2.

     {
                      "label": "Area",
                      "name": "Area.AreaId",
                      "type": "select2",
                      "data": "Area.AreaName",
                      "initialValue":true,
                      "opts": {
                          "minimumInputLength": 3,
                          "placeholder": 'Area',
                          "allowClear": true,
                          //"initialValue":true,
                          ajax: {
                            url: 'Area/json',
                            delay: 250 ,
                            dataType: 'json',
                          //  initialValue:true,

                          data: function (params) {
                              var query = {
                                    value: params.term

                              }

                              // Query parameters will be ?search=[term]&type=public
                              return query;
                            },
                          processResults: function (data) {
                            return {
                                results: $.map(data, function(obj) {
                                    return { id: obj.AreaId, text: obj.AreaName };
                                })
                            };
                        }
                          }
                      }
                  },

Response :

{"id":47,"text":"newyork"}

this might be my last question for you.
thanks alot for support

regards
sarath

Hi,

When I load the "Buttons" extension ("vendor/DataTables/Buttons-1.5.2/js/dataTables.buttons.js") I get the following error:

Uncaught TypeError: Cannot read property 'i18n' of null
    at text (dataTables.editor.js:7401)
    at text (dataTables.buttons.js:523)
    at Buttons._buildButton (dataTables.buttons.js:583)
    at Buttons._expandButton (dataTables.buttons.js:475)
    at Buttons.add (dataTables.buttons.js:160)
    at Buttons._constructor (dataTables.buttons.js:379)
    at new Buttons (dataTables.buttons.js:85)
    at Object.fnInit (dataTables.buttons.js:1893)
    at _fnAddOptionsHtml (jquery.dataTables.js:3681)
    at _fnInitialise (jquery.dataTables.js:4703)

I have used the "Download" facility to download all the scripts, and have used the suggested code to load the CSS and JS. I am avoiding the CDN approach because my internet connection is dodgy. (Hello from Africa!)

I have pasted the relevant code here: https://pastebin.com/1Dg24zTj

Hello,

I have below settings on my datatables.

"fixedHeader": true,
"autoWidth": false,
"columnDefs": [ 
            { "targets"  : 'no-sort',  "orderable": false },
            { "orderSequence": ["desc", "asc"], "targets"  : '_all'},
            { "width": "20%", "targets": 0 },
            { "width": "5%", "targets": 1 },
            { "width": "9%", "targets": 2 },
            { "width": "4%", "targets": 3 },
            { "width": "3%", "targets": 4 },
            { "width": "2%", "targets": 5 },
        ],

Problem is I am using responsive plugin, have enabled fixedheaders and when I scroll down, it shows fixed header with the percentages being assigned on the column headers in percentages. But as soon as I scroll back up, it loses the inline percentages that are assigned to header columns. Any solution for this? I need to keep the column width's in percentages as defined by columnDefs.