I am trying to show a detectable in a modal box, which opens when user clicks a button. Although the data table is loading properly, but the problem is on check box selection. The Check all options on check box are not working on sometime. When I press escape button in modal then again open the model, the select all option of check box is working. Again I repeat this process, select all option is not working. How to solve it?

Script:

$(document).ready(function() {
        var oTable = $('#order-listing').dataTable( {
            initComplete: function () {
                this.api().columns().every( function () {
                    var column = this;
                    var select = $('<select><option value=""></option></select>')
                        .appendTo( $(column.footer()).empty() )
                        .on( 'change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                            column
                                .search( val ? '^'+val+'$' : '', true, false )
                                .draw();
                        } );

                    column.data().unique().sort().each( function ( d, j ) {
                        select.append( '<option value="'+d+'">'+d+'</option>' )
                    } );
                } );
            },
            columnDefs: [ {
                orderable: false,
                className: 'select-checkbox',
                targets:   0
            } ],
            select: {
                style:    'multi',
                selector: 'td:first-child'
            },
            lengthMenu: [[20,50, 100, -1], [20, 50, 100, "All"]],
            pageLength: 20 
         } );
        var allPages = oTable.fnGetNodes();

        $('body').on('click', '#selectAll', function () {
            if ($(this).hasClass('allChecked')) {
                $('input[type="checkbox"]', allPages).prop('checked', false);
            } else {
                $('input[type="checkbox"]', allPages).prop('checked', true);
            }
            $(this).toggleClass('allChecked');
        });




    } );

while logon is coming screen datacable warning

whenever i export a datatable, the style classes within the table are not applied. Any help

I tried to use the DataTables-Editor-Server DLL that came from the generator which gives me the missing method exception. I also made a new project and tried the DLL from nuget but it has the same result. I am using framework 4.6 and tried it with 4.5 as well.

I have the following onclick:

$('.dropdown-view').on('click', function(e) {
    let order = [7,6,5,4,3,2,1,0];
    table.colReorder.order(order);        
});

This works great and reorders the columns from back to front.
I can also jumble them up:

    let order = [5,6,7,2,3,4,1,0];
    table.colReorder.order(order);       

However, I can never get them back to the original order. This does not work:

    let order = [0,1,2,3,4,5,6,7];
    table.colReorder.order(order);       

I can't see an error in the log. The table just doesn't reorder.

Hello, thanks for a great tool!

I have a problem, sorting on text column (title) works for me but when sorting on fields with only numbers I get weird results.

My DataTable:

{
                pageLength: 50,
                lengthMenu: [[50, 300, -1], [50, 300, "Alla"]],
                processing: true,
                serverSide: true,
                ajax: "{{ route('kontrollpanel.admin.fetchAllStores') }}",
                order: [[1, 'asc']],
                columns: [
                    {
                        className: 'details-control',
                        orderable: false,
                        data: null,
                        defaultContent: ''
                    },
                    {data: 'title', name: 'title', searchable: true},
                    {data: 'edit', name: 'edit', orderable: false},
                    {data: 'show', name: 'show', orderable: false},
                    {data: 'discountCount', name: 'discounts', type: 'num', searchable: true},
                    {data: 'exclusiveCount', name: 'exclusive', type: 'num', searchable: true},
                    {
                        data: 'prio', name: 'prio', searchable: true,
                        render: function (prioritized, type, row) {
                            return prioritized ? "Prioriterad" : "---";
                        }
                    },
                    {
                        data: 'paying', name: 'paying', searchable: true,
                        render: function (paying, type, row) {
                            return paying ? "Betalande" : "---";
                        }
                    },
                    {data: 'updated_at', name: 'updated_at', type: 'date', searchable: true},
                ]
}

When I sort on columns 'discounts' I get following result:

I'm running out of ideas, what am I doing wrong?

Is there any way to export an Excel file with all data from a datatable with server side query?
Here is my CreateTable function written in typescript. Any suggestion is welcome.

createTable() {
    var $this = this;

    // Setup - add a text input to each footer cell
    $('#trackings-table tfoot th:not(:first-child)').each(function () {
        var title = $(this).text();
        $(this).html('<input type="text" />');
    });

    var table = $('#trackings-table').DataTable({
        "dom": 'lBrtip',
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": this.url,
            "type": "POST",
            "contentType": 'application/json',
            "data": function (request) {
                return JSON.stringify(request);
            },
            "dataSrc": function (response) {
                return response.data;
            },
            "beforeSend": function (xhr) {
                xhr.setRequestHeader("Authorization", $this.user.getTokenBearer());
            }
        },
        "columnDefs": [
            {
                "targets": 0,
                "name": "Icon",
                "searchable": false,
                "orderable": false
            },
            {
                "targets": 1,
                "name": "Date"
            },
            {
                "targets": 2,
                "name": "Entrance"
            },
            {
                "targets": 3,
                "name": "Action"
            },
            {
                "targets": 4,
                "name": "Tag"
            },
            {
                "targets": 5,
                "name": "Person"
            },
            {
                "targets": 6,
                "name": "Readergroup"
            },
            {
                "targets": 7,
                "name": "Reader"
            },
            {
                "targets": 8,
                "name": "FacilityTo",
                "visible": false
            },
            {
                "targets": 9,
                "name": "Message"
            },
            {
                "targets": 10,
                "name": "ID",
                "visible": false
            }
        ],                
        "order": [[1, "desc"]],
        "buttons": [
            <any>{
                extend: 'colvis', titleAttr: this.translator.tr('ID_TOGGLE_COLUMNS'), // 'Toggle columns',
                text: this.translator.tr('ID_COLUMNS'),
                columns: ':gt(0)'
            },
            {
                extend: 'excel', titleAttr: this.translator.tr('ID_EXPORT_TO_EXCEL'), // 'Export to excel',
                exportOptions: {
                    columns: <any>[':visible:not(.noExport)']
                },
            },
            {
                extend: 'csv', titleAttr: this.translator.tr('ID_EXPORT_TO_CSV'), // 'Export to csv',
                exportOptions: {
                    columns: <any>[':visible:not(.noExport)']
                }
            }
        ],
        "pageLength": 15,
        "deferRender": true, // Load only the nodes visible on the page (Speeds up to 50,000 records)
        "lengthChange": true,
        "lengthMenu": [[10, 15, 25, 50, -1], [10, 15, 25, 50, this.translator.tr('ID_ALL')]],
        "stateSave": true,
        "searchDelay": 1000,
        "language": {
            "url": "/locales/" + this.globalDef.language + "/datatable.json"
        },
        // Use initcomplete cause language file loads async causing problems
        "initComplete": function (settings, json) {
            $this.isInitialized = true;

            // Dynamic table visibility
            $('a.toggle-vis').on('click', function (e) {
                e.preventDefault();
                var column = table.column($(this).attr('data-column'));
                column.visible(!column.visible());
            });

            // Restore state
            var state = table.state.loaded();
            if (state) {
                table.columns().every(function () {
                    var that = this;

                    if (that.search()) {
                        $('input', that.footer()).val(that.search());
                    }
                });

                table.draw();
            }


            // Apply the search using enter
            //$('input', this.footer()).keypress(function (e) {
            //    if (e.which == 13) {
            //        $this.applySearch();
            //        return false;
            //    }
            //});
        }
    });

    this.table = table;
}

Hi
Is there a way to use data from a mysql database used from Symfony Doctrine with the row details like in this example:
https://datatables.net/examples/api/row_details.html
A normal row with data from doctrine I already have running
(sorry I'm very new in programming so this maybe a stupid question)

For Symfony to get data I use this example:

use Omines\DataTablesBundle\Adapter\Doctrine\ORMAdapter;

$table = $this->createDataTable()
->add('firstName', TextColumn::class)
->add('lastName', TextColumn::class)
->add('company', TextColumn::class, ['field' => 'company.name'])
->createAdapter(ORMAdapter::class, [
'entity' => Employee::class,
]);

so the table is generated in the controller and than send to the twig template to display.

Hi,

do datatable editor support inline adding a new row just like below?

Hi,

do datatables editor support inline adding a new row just like below attached screen capture?

Hello,

I use DataTable editor with c#.NET library.

One on my fields it's "upload" type.
I don't want save the file in disk, I want directly save content in my DB.
What's method for this ?

This code save content on my DB and on my disk :

  var response = new Editor(db, "users")
                    .Model<UploadModel>()
                            .TryCatch(false)
                    .Field(new Field("image")
                        .SetFormatter(Format.IfEmpty(null))
                        .Upload(new Upload(request.PhysicalApplicationPath + @"uploads\__ID____EXTN__")
                            .Db("files", "id", new Dictionary<string, object>
                            {
                                {"web_path", Upload.DbType.WebPath},
                                {"system_path", Upload.DbType.SystemPath},
                                {"filename", Upload.DbType.FileName},
                                {"filesize", Upload.DbType.FileSize},
                                {"content", Upload.DbType.ContentBinary},
                            })
                            .DbClean(data =>
                            {
                                foreach (var row in data)
                                {
                                    // Do something;
                                }
                                return true;
                            })
                            .Validator(Validation.FileSize(500000, "Max file size is 500K."))
                            .Validator(Validation.FileExtensions( new [] {"jpg", "png", "gif"}, "Please upload an image."))
                        )
                    )
                    .Process(request)
                    .Data();

I try Upload(null) by don't work.

Thanks,

I'm trying to get my column names:

table.columns().names()

My DataTable does have names:

columns: [           
    { name: "abc", ...},
    { name: "def", ...}
]

However I get the following error:

.columns(...).names is not a function

Am I missing something obvious?

Hi,
I am considering purchesing Editor, for its inline editing features, however I am wondering if it will solve my problem.

Basicly i have a table, which lenght is determined by the returned data.

Based on the specific case. we can have table for one or multiple years.

Columns for example are like :

Name, Year, Jan, Feb, Mar, Apr ....... Year, Jan, Feb, Mar, Apr ....

So basicly i create columns based on the year count, and then fill it with grouped values using data from a model. I haven't found a way to fill table from dt ajax call.

I need to be able to edit each month values (best if it can be done inline).
From the editor examples i have seen, all table configuration is specefied in the js part. So i am not sure if the inline functionality will work for me.

Can someone advise me if this requirment can be achived with Editor pluign ?

• table columns length will be different based on the case

• inline editing for month values

                   <table id="TempTable"class="display row-border" cellspacing="0" width="100%">
                      <thead>
                          <tr>
                              <th>Name</th>
                               <th>type></th>
                              @foreach (var Year in Model.Years)
                              {
  
                                  <th>Jan-@Year</th>
                                  <th>Feb-@Year</th>
                                  <th>Mar-@Year</th>
                                  <th>Apr-@Year</th>
                                  <th>May-@Year</th>
                                  <th>Jul-@Year</th>
                                  <th>Jun-@Year</th>
                                  <th>Aug-@Year</th>
                                  <th>Sep-@Year</th>
                                  <th>Oct-@Year</th>
                                  <th>Nov-@Year</th>
                                  <th>Dec-@Year</th>
                              }
                          </tr>
                      </thead>
                              <tbody>
                                  @foreach (var item in Model.Data)
                                  {
                                      <tr>
                                          <td>@item.[0].Values.Name</td>
                                          <td>@item.[0].Values.Type</td>
                                          @foreach (var item2 in item.Values)
                                          {
                                              <td>@item2.Jan</td>
                                              <td>@item2.Feb</td>
                                              <td>@item2.Mar</td>
                                              <td>@item2.Apr</td>
                                              <td>@item2.May</td>
                                              <td>@item2.July</td>
                                              <td>@item2.June</td>
                                              <td>@item2.Aug</td>
                                              <td>@item2.Sep</td>
                                              <td>@item2.Oct</td>
                                              <td>@item2.Nov</td>
                                              <td>@item2.Dec</td>
                                          }
                                      </tr>                          
                                  }
                              </tbody>
                          </table>
  
  $(document).ready(function () {
      $('#TempTable').DataTable({
          "dom": 'rti'
      });
  

I have been struggeling for days with this and i am completly stuck.
I need to create a table where names and numbers of columns will depend on 2 parameters. Start and End date. Months columns would have inline editing.

Example for jan2019 & mar2019 we will have Name, Group, Jan19, Feb19, Mar19. If dates would be further appart, we would have more columns.

Is there a way to do something like this with Editor plugin ? I have just purchesed it and i still don't know its full capacity.

I tried designing my tables and code in a 50 different ways, but i can't figure out how to pass generated column names to the view...

Any suggestion would be appriciated.

hi m using inline editing but while clicking on the edit button in the datatable editor dialog box is not coming up
instead it is showing data on the bottom og the page

This is with datatables 1.10.15.

I create a table:

    '#tblOpsMassRepl').DataTable({
      "autoWidth":false
    , "info":true
    , "JQueryUI":true
    , "Order":[0,'asc']
    , "ordering":true
    , "paging":true
    , "pageLength": 27
    , "lengthChange": false
    , "scroller":true
    , "scrollCollapse":true
    ,"drawCallback": function( settings ) {fncAddEventsAndStripes($(this).attr('id'));}
    })

I fill it:

    var locTable        = $('#tblOpsMassRepl).DataTable();
    var locIconChk  = '';
    var locHidId        = '';

    locTable.clear();

    for (var i = 0; i < pData.length; i++) {
        locIconChk  = '<input type="checkbox" name="chkOpsMassRepl" id="chkOpsMassRepl'+i+'" class="JqUiCheckBox" />';
        locHidId        = '<input type="hidden" name="hidOpsMassRepl" id="hidOpsMassRepl'+i+'" value="'+trim(pData[i].PART) + '_' + fncFormatNumber(pData[i].PATH,0,"Y") + '_' + fncFormatNumber(pData[i].OP,0,"Y") +'" />';

        locTable.row.add([
             pData[i].PART
            ,pData[i].DESC
            ,pData[i].COMMODITY
            ,fncFormatNumber(pData[i].PATH,0,"Y")
            ,fncFormatNumber(pData[i].OP,0,"Y")
            ,locIconChk + locHidId
        ]);
    }
    locTable.draw().columns.adjust();

I want to be able to read all checked checkboxes from all pages and then use this to pass an array to an update program (I know how to build the array, the problem is understanding how to loop through the datatable data.

I've started with something like

    locTable.columns(5)....
or
    locTable.columns(5).every(function() {});

But I don't know how to get the data (which will be both the checkbox and hidden field) so I can check/manipulate these to build my parameters for the update.

Any help appreciated.

In all examples i have seen, editor oprates only on data and models fetched from SQL tables....is it possible to create a custom object and join it with the table data in Editor ?

For example i have a table Users with columns Name, Location, Gender

However i want to expand this model by a new property that dosen't exist in database. For example "Salary" which is calculated inside the controler.

Is there a way to pass such object in to Editor Controller (.net mvc). Or only objects that match db tables can be used ?

Hello, this is my table with 2 checkboxes: live.datatables.net/xasihece/1/edit

I'm trying to filter data in my table with these two checkboxes (will be more checkboxes and date-picker in the future). I'm using the php server_processing php and ssp.class.php. I found some comments about custom filtering in the ssp.class.php file, but there is no example how to do it and there is no example also in the DataTables forum or internet.

I know that I need to modify the WHERE conditoin in the ssp.class.php when checkbox is selected, but I'm completely lost how to do it. Thank you in advance.

Hi,

I have a table with a tfoot, this tfoot consists of values summed up from the table above it, this means it could be a currency/percentage etc.

When using the print button option it is perfect and the formatting is in place.

When using the excel button however everything is formatted except for the tfoot which just reverts to standard text with no currency symbol, no commas, no percentage symbols etc.

Is there a way of getting these back in place?

Kevin

I have print, export functions working within Data Tables.

I would like to add print to the editor edit window (ie add print to formButtons) . I have the print button showing but no printing or exports happening within the Edit window

Any examples, pointers grateful

ie

        buttons: [
            { extend: "create", editor: editor},
            { extend: "edit",
                editor: editor,
                formButtons: [
                    {
                        label: 'Cancel',
                        fn: function () { this.close(); }
                    },
                    'Save row',
                    'print'
                ]
            },
            {
                extend: "selected",
                text: 'Duplicate',
                action: function ( e, dt, node, config ) {
                    // Start in edit mode, and then change to create
                    editor
                        .edit( table.rows( {selected: true} ).indexes(), {
                            title: 'Duplicate record',
                            buttons: 'Create from existing'
                        } )
                        .mode( 'create' );
                }
            },

etc