Hello,

I use the i18n lang file for german, but at moment it doesn't work. Because the comment /** ... */ part will not ignor.
https://github.com/DataTables/Plugins/blob/master/i18n/German.lang

IF delete the comment part every thing is fine.

I need some help. I have been successful in uploading images and they are being stored on to my server. But the trouble is when I look in my database the file name is incorrect. Not sure why that it is.

According to my database the incorrect file name is "editor-fileName". But according to my saving feature of this line of code...

->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'] . '/images/.../profile__ID__.__EXTN__' )

This gives the correct file name on my server. But storing it into the database with this line of code is incorrect...

->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'] . '/images/.../profile__ID__.__EXTN__' )
                                ->db( 'Table', 'ID', array(
                                    'Field' => $pathToImg . Upload::DB_FILE_NAME
                                ) )

But according to the documentation: https://editor.datatables.net/manual/php/upload#Database-information

It says that "Upload::DB_FILE_NAME File name (with extension)"

But it's not doing what I want it to. How do I tell it the File Name is what I saved it to? How do I do that?

Few days i was trying to achieve a dataTable print view with a row grouping but still its not going to work.. :(

I have a dataTable, where one column is hidden and that column is row grouped. Same as in this example: https://datatables.net/examples/advanced_init/row_grouping.html

And i am using a Buttons Extension (https://datatables.net/extensions/buttons/) for Print button. And when i hit the print button, i see all the columns of my dataTable even the one column shoud be hidden. Then i used an option "columns": ":visible", to print only visible columns, but it's again not good, because the grouped row is missing.

So does anyone know how to get the same table in Print view with row grouping as the original dataTable?

i have a page with editor instance.

when i edit a row, the editor window and all of the fields appear, but in chrome (only) the buttons in the footer (eg cancel and create) are not shown. if I resize the browser window they appear.
once they have appeared, i can open and close the edit window, and they continue to appear, unless i reload the page

this problem does not happen with ff or edge

the page in question is in admin of live site, so cant post url, so would need to upload a copy to test server if it needs to be seen.

wondered if this has been seen before, or if anyone has any tips to debug.

Hi @allan,

I think I've found a bug when using Bootstrap styling in combination with scrollX and scrollY enabled. As you can see in the example provided, the table footer becomes misaligned when you scroll all the way to the right.

http://live.datatables.net/niqenaho/1/edit?output

Thanks,
Andrew

Hi folks,

Is there a way to set and unset (above all) the new template attribute for a Datatables Editor instance? I have a table which changes columns drastically depending on it's usage and I would like to use a template for its editor depending on certain conditions. Is this possible?

I recently upgraded to the latest releases of Datatables, Editor, and a few other plugins and I noticed now that I get an error when I try to programmatically export to an Excel file:

datatables.js:38395 Uncaught TypeError: Cannot read property 'toString' of null
    at _excelColWidth (datatables.js:38395)
    at _Api.action (datatables.js:39015)
    at action (datatables.js:35096)
    at HTMLAnchorElement.<anonymous> (datatables.js:35111)
    at HTMLAnchorElement.dispatch (jquery.js:4435)
    at HTMLAnchorElement.elemData.handle (jquery.js:4121)
    at Object.trigger (jquery.js:4350)
    at HTMLAnchorElement.<anonymous> (jquery.js:4901)
    at Function.each (jquery.js:374)
    at jQuery.fn.init.each (jquery.js:139)

The code that triggers the export is:

myDT.button('0-0').trigger();

where the buttons config is this:

//...
      buttons: [
        { extend: 'collection',
          text: 'Export',
          buttons: [
            { extend: 'excel',
              exportOptions: {
                orthogonal: 'export',
              }
            },
            'csv',
          ]
        },
      ]
//...

The list of all my custom Datatables download build is: JSZip 2.5.0, Moment 2.13.0, jQuery Mask 1.13.4, Select2 4.0.1, DataTables 1.10.13, Buttons 1.2.4, Column visibility 1.2.4, Flash export 1.2.4, HTML5 export 1.2.4, ColReorder 1.3.2, Editor 1.6.1, Field type - Display 1.5.6, Field type - Mask 1.5.6, Select 1.2.0

I'm getting this error when the no.of columns changes. I call the LoadGrid method with 3 columns first. It works perfectly fine but when I call it again with new Data (having only 2 columns/objects) it throws this error. Also it doesn't update column headers. Instead stick with the previous 3 columns. Is there something we need to do when no.of columns changes? Do we have to notify the dataTable? Please help

function LoadGrid(tableId, gridData) {
    var pageCount = 0;
    var columnKeys = [];

    if (gridData != null) {
        pageCount = gridData.length;

        for (var k in gridData[0]) {
            columnKeys.push({ "data": k });
        }

        $(tableId).dataTable().fnClearTable();
        $(tableId).dataTable({
            "autoWidth": false,
            "fixedHeader": false,
            "searching": true,
            "pageLength": pageCount,
            "bDestroy": true,
            "bSort": false,
            "scrollY": 450,
            "scrollX": true,
            data: gridData,
            columns: columnKeys
        });

    }
}

Calling LoadGrid by passing the tableId

LoadGrid("#tblActivitySummary", object.ActivitySummary, false); // object.ActivitySummary length is 3

When I call it again with different data I get error

LoadGrid("#tblActivitySummary", object.ActivitySummary, false); //object.ActivitySummary length is 2

Cannot read property 'sWidth' of undefined

Hi,

I have a Database with more than 10000 Dataset, that I should listed. If a user use this list, the Server sends all results and Datatables makes Pagination as settings. Is it possible load the 1st 100 dataset and with the pagination button loads automatic the next 100, if the Data is outside the fist 100 Datasets?

The same is with the search function. It works only if all Data loaded. May be I can send a search to the backend, and the send the results to the frontend?

Best Andreas

Can I use entity framework to define the target table and to execute the database operation (insert, update, delete)?
Since I would like to record audit log through entity framework, DataTables cannot help me to achieve this purpose.
Any recommendation?

Hi,

We are using SmartAdmin Template v1.8.6.2 (https://wrapbootstrap.com/theme/smartadmin-responsive-webapp-WB0573SK0) with DataTables.net (https://datatables.net/) and are facing some issues using scroller along with the column filters simultaneously. Both of them works independently however when the "scrollY" property is added for the datatable with the filter property set to "true" then the scroller works fine however the filter stops working.

Here is the sample code specifying data table configuration. (in typescript) (filename: datatable.component.ts)

import {Component, Input, ElementRef, AfterContentInit, OnInit} from '@angular/core';

declare var $: any;

@Component({

  selector: 'sa-datatable',
  template: `
      <table class="dataTable {{tableClass}}" width="{{width}}">
        <ng-content></ng-content>
      </table>
`,
  styles: [
    require('smartadmin-plugins/datatables-bundle/datatables.min.css')
  ]
})
export class DatatableComponent implements OnInit {

  @Input() public options:any;
  @Input() public filter:any;
  @Input() public detailsFormat:any;

  @Input() public paginationLength: boolean;
  @Input() public columnsHide: boolean;
  @Input() public tableClass: string;
  @Input() public width: string = '100%';

  constructor(private el: ElementRef) {
  }

  ngOnInit() {
    Promise.all([
      System.import('script-loader!smartadmin-plugins/datatables-bundle/datatables.min.js'),
    ]).then(()=>{
      this.render()

    })
  }

  render() {
    let element = $(this.el.nativeElement.children[0]);
    let options = this.options || {}


    let toolbar = '';
    if (options.buttons)
      toolbar += 'B';
    if (this.paginationLength)
      toolbar += 'l';
    if (this.columnsHide)
      toolbar += 'C';

    if (typeof options.ajax === 'string') {
      let url = options.ajax;
      options.ajax = {
        url: url,
        // complete: function (xhr) {
        //
        // }
      }
    }

    options = $.extend(options, {

      "dom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs text-right'" + toolbar + ">r>" +
      "t" +
      "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
      oLanguage: {
        "sSearch": "<span class='input-group-addon'><i class='glyphicon glyphicon-search'></i></span> ",
        "sLengthMenu": "_MENU_"
      },
      "autoWidth": false,
      retrieve: true,
      responsive: true,
      initComplete: (settings, json)=> {
        element.parent().find('.input-sm', ).removeClass("input-sm").addClass('input-md');
      }
    });

    const _dataTable = element.DataTable(options);

    if (this.filter) {
      // Apply the filter
        element.on('keyup change', 'thead th input[type=text]', function () {
            debugger;
        _dataTable
          .column($(this).parent().index() + ':visible')
          .search(this.value)
          .draw();

      });
    }


    if (!toolbar) {
      element.parent().find(".dt-toolbar").append('<div class="text-right"><img src="assets/img/logo.png" alt="SmartAdmin" style="width: 111px; margin-top: 3px; margin-right: 10px;"></div>');
    }

    if(this.detailsFormat){
      let format = this.detailsFormat
      element.on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = _dataTable.row( tr );
        if ( row.child.isShown() ) {
          row.child.hide();
          tr.removeClass('shown');
        }
        else {
          row.child( format(row.data()) ).show();
          tr.addClass('shown');
        }
      })
    }

  }

}

And here is the html for displaying datatable. (filename: datatable.html)

 <sa-datatable [options]="{
               select: true,
            ajax: 'assets/api/tables/datatables.standard.json',
            columns: [ {data: 'name'}, {data: 'phone'}, {data: 'company'}, {data: 'zip'} ] }
            "
                                    filter="true" tableClass="table table-condenced table-striped table-bordered">
                          <thead>
                              <tr>
                                  <th class="hasinput" [ngStyle]="{width:'17%'}">
                                      <input type="text"
                                             class="form-control"
                                             placeholder="Filter Name" />
                                  </th>
                                  <th class="hasinput" [ngStyle]="{width:'18%'}">
                                      <div class="input-group">
                                          <input class="form-control"
                                                 placeholder="Filter Phone"
                                                 type="text" />
                                      </div>
                                  </th>
                                  <th class="hasinput" [ngStyle]="{width:'10%'}">
                                      <input type="text"
                                             class="form-control"
                                             placeholder="Filter Company" />
                                  </th>
                                  <th class="hasinput" [ngStyle]="{width:'16%'}">
                                      <input type="text" class="form-control"
                                             placeholder="Filter Zip" />
                                  </th>
                              </tr>
                              <tr>
                                  <th data-class="expand">Name</th>
                                  <th>Phone</th>
                                  <th data-hide="phone">Company</th>
                                  <th data-hide="phone,tablet">Zip</th>
                              </tr>
                          </thead>
                      </sa-datatable>

Here, the filter works fine till the time we introduce a property "scrollY" in datatable options in datatable.html or in the datatable.component.ts file.

I am using Editor Datatables to show records from my Oracle db in ASP.NET MVC. I have successfully implemented datatables. But the problem occurs when I try to inline edit a column and post back JSON from my controller to datatable.

HTML:

<div>
    <table class="display" cellspacing="0" id="trx_detail_tbl">
                                <thead>
                                    <tr>
                                        <th>Id</th>
                                        <th>Cutomer Id</th>
                                        <th>Customer Name</th>
                                        <th>Cheque Id</th>
                                        <th>Receipt Number</th>
                                        <th>Receipt Date</th>
                                        <th>Maturity Date</th>
                                        <th>Amount</th>
                                        <th>Currency</th>
                                        <th>Functional Amount</th>
                                        <th>Transaction Date</th>
                                        <th>Status</th>
                                        <th>Status Date</th>
                                        <th>Clearing Status</th>
                                        <th>Clearing Date</th>
                                        <th>Discounted Amount</th>
                                        <th>Comments</th>
                                        <th>Discounted</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>

Javascript:

   ```

function getTransactionDetails(id) {
$("#trx-detail-div").show();

    editor = new $.fn.dataTable.Editor({
        ajax: {
            "url": "/ChequeDiscounting/SaveTransactionDetails",
            "type": "POST",
            "data": JSON.stringify(),
            "dataType": "json"
        },
        table: "#trx_detail_tbl",
        idSrc: 'ChequeId',
        fields: [{
            label: "Functional Amount:",
            name: "FunctionalAmount"
        }, {
            label: "Transaction Date:",
            name: "TransactionDate",
            type: "datetime"
        }, {
            label: "Status:",
            name: "Status",
            type: "select",
            options: [
                { label: 'Select Status', value: '0' },
                { label: 'Approved', value: '1' },
                { label: 'Rejected', value: '2' },
                { label: 'Bounced', value: '3' }
            ]
        }, {
            label: "Status Date:",
            name: "StatusDate",
            type: "datetime"
        }, {
            label: "Clearing Status:",
            name: "ClearingStatus",
            type: "select",
            options: [
                { label: 'Select Clearing Status', value: '0' },
                { label: 'Cleared', value: '1' },
                { label: 'Uncleared', value: '2' }
            ]
        }, {
            label: "Clearing Date:",
            name: "ClearingDate",
            type: "datetime"
        }, {
            label: "Discounted Amount:",
            name: "DiscountedAmount"
        }, {
            label: "Comments:",
            name: "Comments"
        }],
        formOptions: {
            inline: {
                onBlur: 'submit'
            }
        }
    });

    trxDetailTable = $('#trx_detail_tbl').removeAttr('width').DataTable({
        "stateSave": true,
        "scrollX": true,
        "filter": true,
        "ajax": {
            "url": "/ChequeDiscounting/GetTransactionDetails/" + id,
            "type": "POST",
            "dataType": "json"
        },
        "columns": [
            { "data": "Id" },
            { "data": "CustomerId" },
            { "data": "CustomerName" },
            { "data": "ChequeId" },
            { "data": "ReceiptNumber" },
            { "data": "ReceiptDate" },
            { "data": "MaturityDate" },
            { "data": "Amount" },
            { "data": "Currency" },
            { "data": "FunctionalAmount" },
            { "data": "TransactionDate" },
            { "data": "Status" },
            { "data": "StatusDate" },
            { "data": "ClearingStatus" },
            { "data": "ClearingDate" },
            { "data": "DiscountedAmount" },
            { "data": "Comments" },
            {
                "data": null,
                "render": function (data, type, row) {
                    if (row.IsDiscounted == 1)
                        return '<td>Already Discounted</td>';
                    else
                        return '<a onClick=checkDiscount(' + row.ChequeId + ');>Discounted</a>';
                }
            },
        ],
        "columnDefs": [
            //{
            //    "defaultContent": "-",
            //    "targets": "_all"
            //},
            { "width": 70, "targets": 0 },
            { "width": 300, "targets": 1 },
            { "width": 100, "targets": 2 },
            { "width": 100, "targets": 3 },
            { "width": 100, "targets": 4 },
            { "width": 100, "targets": 5 },
            { "width": 100, "targets": 6 },
            { "width": 110, "targets": 7 },
            { "width": 130, "targets": 8 },
            { "width": 110, "targets": 9 },
            { "width": 110, "targets": 10 },
            { "width": 100, "targets": 11 },
            { "width": 110, "targets": 12 },
            { "width": 100, "targets": 13 },
            { "width": 140, "targets": 14 },
            { "width": 200, "targets": 15 },
            { "width": 100, "targets": 16 },
        ],
        "fixedColumns": true,
        "order": [1, 'asc']
    });

    $('#trx_detail_tbl').on('click', 'tbody td:not(:first-child)', function (e) {
        editor.inline(this);
    });
    });
}

Controller:

[HttpPost]
public ActionResult SaveTransactionDetails(FormCollection form)
{
bool flag = false;

        int chequeId = Convert.ToInt32(form.Keys[1].Split('[')[1].Split(']').First());
        string columnName = form.Keys[1].Split('[')[2].Split(']').First();

        int functionalAmount;
        string transactionDate;
        string status;
        string statusDate;
        string clearingStatus;
        string clearingDate;
        int discountedAmount;
        string comments;
        string query;
        string serializedData = "";

        List<CustomerTransactionModel> tempList = new List<CustomerTransactionModel>();

        var customerTrxDetail = Shared.CustomerTransactionDetailsList.Where(a => (a.ChequeId == chequeId) && a.Id > 0).FirstOrDefault();
        var newCustomerTrxDetail = Shared.CustomerTransactionDetailsList.Where(a => a.ChequeId == chequeId).FirstOrDefault();

        if (columnName == "FunctionalAmount")
        {
            functionalAmount = Convert.ToInt32(form[1]);

            if (customerTrxDetail != null)
            {
                customerTrxDetail.FunctionalAmount = functionalAmount;
                tempList.Add(customerTrxDetail);
                serializedData = JsonConvert.SerializeObject(tempList);
            }
          }

        return Json(new { data = serializedData });
    }

Model:

public class CustomerTransactionModel
{
public int Id { get; set; }

public string ReceiptNumber { get; set; }

public string ReceiptDate { get; set; }

public int Amount { get; set; }

public string Currency { get; set; }

public int ChequeId { get; set; }

public string CustomerName { get; set; }

public int CustomerId { get; set; }

public string MaturityDate { get; set; }

public int FunctionalAmount { get; set; }

public string TransactionDate { get; set; }

public string Status { get; set; }

public string StatusDate { get; set; }

public string ClearingStatus { get; set; }

public string ClearingDate { get; set; }

public int DiscountedAmount { get; set; }

public string Comments { get; set; }

public int IsDiscounted { get; set; }

}
```

Issue is whenever I try to inline edit a column It gives me following error: DataTables warning: table id=trx_detail_tbl - Requested unknown parameter 'Id' for row 142, column 0. For more information about this error, please see http://datatables.net/tn/4

Stuck in this error for almost a day. Can someone please help me?``

I have the following HTML5 data attributes on a table:

data-language--paginate--next="Suivant"
data-language--paginate--previous="Précédent"
data-length-menu="[[10,25,100,-1],["10","25","100","Tous"]]"

The first two have no effect. The button labels are still in English. The third works, and my length menu is correctly translated.

Is translation supported using data attributes?
Do I have the right syntax, double-dashes, etc.?

In my datatable I have enabled both bubble editing and editing a single or multiple items after selection with main editing form.

If I disable multiEditable in a field, the field works only when clicking new button.
When I select a single item and click edit the field for which multiEditable has been disabled says that the input can only be edited individually. Is taht normal? Can i specify tomehow to the editing form that only a sinlge element is selected and why do i need to do that since the datatable knows how many elements have been selected anyway?
Even if I try to use bubble editing it says the same, even though bubble editing is by default for changing a single cell. Why?

For now I have left multiEditable enabled to avoid these issus but I would appreciate it if you could point me to the right direction.

Hi!
I need to use postEdit function to update another table of my DB as follow:

$data->on('postEdit', function( $editor, $json, $data ) {
  global $conn;
  $ordinato = getOrdinato($data['fromNav_Disponibilita']['idArticolo']);
  if ($ordinato) {
    $idArticoloFisso = $ordinato['idArticoloFisso'];
     $sqlUpdate = "UPDATE righe_disponibilita
      SET idArticolo = '".$idArticoloFisso."'
      WHERE idArticoloFisso = '".$idArticoloFisso."'";
    if ( $resUpdate = $conn->query($sqlUpdate) ) {
        // tutto ok
        //echo $resUpdate;
      } else {
        echo $conn->error;
        }
  }
});

I get this error : Lock wait timeout exceeded; try restarting transaction

I don't know why. I do the same update for create as follow

if ( isset($_POST['action']) && $_POST['action'] === 'create' ) {
    $ordinato = getOrdinato($_POST['data'][0]['fromNav_Disponibilita']['idArticolo']);
  if ($ordinato) {
    $idArticoloFisso = $ordinato['idArticoloFisso'];
    $sqlUpdate = "UPDATE righe_disponibilita
      SET idArticolo = '".$idArticoloFisso."'
      WHERE idArticoloFisso = '".$idArticoloFisso."'";
    if ( $resUpdate = $conn->query($sqlUpdate) ) {
        // tutto ok
        //echo $resUpdate;
      } else {
        echo $conn->error;
        }
  }
}

and all goes well.
Thank you
Pat

debug

I have mutliple datatables on a site. Each menu link points to a different table. The first time I click a given link, the datatable loads, everything works fine. If I click on another link, the page loads (I can tell that the h1 tags have changed), but the datatable does not display.

The debugger shows the first 2 tables (which are no longer displayed), but not the third (Which should be displayed). I am completely confused!

I am using a ColumnFilterWidget jQuery Datatable plugin for Column Filtering in my Angular Datatable. I am able to place the filters but I want to add "reset" link so that I can Reset the Filters and Datatable.
Please guide if you have any suggestions or Solutions..

We are currently in progress of migrating our application to be more usable on phones and tablets and are using bootstrap for this. We also use Datatables a lot.

We have an issue with some tables with many non sortable columns. The columns are too wide due to a large right padding, even for non sortable columns, so they don't fit on our screen.

I think the right padding that's done in the bootstrap integration css (line 148-150) should only be done when we also have sorting and not for every condensed table.

table.dataTable.table-condensed > thead > tr > th {
padding-right: 20px;
}

If I just use ordinary bootstrap table with table-condensed the right padding is 5px, with Datatable it's 20px. Without the table-condensed Datatable has 30 or 8px as right padding depending on if sorting is enabled or not.

See http://live.datatables.net/novejeje/2/

Any comments on this?

Regards
/Roger

How to check a column is fixed or not , for a given index

I'm trying to apply a column width to each column, but it is not being reflected in the output:
http://live.datatables.net/mekuxeya/1/edit?js,output

I've tried setting autoWidth to both true and false, but it does not seem to have any effect. Bootstrap styling, scrollX, and scrollY are also being applied.

https://datatables.net/reference/option/columns.width