I have a set of fields that take input from a user, when creating a new record. Every time the user puts in a value, I want to add all the values in that set of fields and show them the aggregate. On that popup form, I'm not sure how to pull the input values and put them in another field that I have marked as readonly.

DataTables version: 1.10.13
Included libraries:
- DataTables 1.10.13
- Buttons 1.2.4
- Column visibility 1.2.4
- ColReorder 1.3.2
- FixedColumns 3.2.2
- FixedHeader 3.1.2
- KeyTable 2.2.0
- Responsive 2.1.0
- jQuery v1.11.1 (don't ask . . . we'll be here all day, yes it's outdated but not the problem)
Browsers: any
Using the DataTables API, not the object oriented dataTables

The problem: Once a user selects a column sorting, none of the clear methods on either reload or action on a button clear the column sorting selection. We just want to set it back to the natural order output server side.
For example the default ordering is column 2, the created date. Using the arrows in the table headers in DataTables I reorder by column 3, last modified. When I reload the page or hit the "clear filters" button, the method colReorder.reset() should clear the selected ordering. It does nothing.

I have been at this all day, mostly on this site, and it's still broken. I started with 1.10.0 and tried to use the fnSortNeutral plugin, threw various errors depending on how we tried to implement it.

Where we are now: Version 1.10.13 with the above build, no errors but it just doesn't DO anything. :-) All advice would be appreciated.

Task 1: On document ready, per the documentation,

https://datatables.net/reference/api/colReorder.reset()

this should clear the column selections, it does not. This snippet is loaded on document ready:

DT = jQuery('#tbl-wrap table').DataTable({
        **"colReorder": true,**
        "processing": true,
        "serverSide": true,
    "stateSave": true,
    "bAutoWidth":false,
    "deferRender": true,
    "oLanguage": {
    "sLengthMenu": "Show: _MENU_ ",
    "sSearch": "_INPUT_"
    },
      "ajax": sOurAjaxUrl,
    "columns": [
        { "data": "id", "name": "id" },
        { "data": "cr_date", "name": "cr_date" },
        { "data": "last_modified" , "name": "last_modified" },
        // ETC. : all our columns
    ],
    // To search via the filter form, the columns must be on the page. Set these hidden.
    "columnDefs" : [
        { "targets": [9, 10, 11, 12, 13, 14, 15], "visible": false, },
    ],
    "search": {
        "regex": true
    },
    // Once a column has been selected, this is not honored on reload!
    "order" : [[1, 'desc']],
    "fnDrawCallback": function(oSettings, oData) {
        // We do some stuff to the DOM here
    } // fnDrawCallBack
}).colReorder.reset(); // <--------- FAILS, but otherwise draws

Task 2: Alrighty then, that doesn't work, we have a clear filters button that works fine to clear all of our custom search fields across the column headers. This works great, but the reset() method doesn't work on the sort order. On load of the document, we attach the event to the button like so:

// Clear Filters button - clickEvent is either 'click' or 'touchstart' depending

jQuery('#clear-filters').on(clickEvent, function(e) {

    // The filter code which all works perfectly here

    DT.colReorder.reset().draw(); // <-------- FAILS, but otherwise draws

    return false;
});

It will draw the changes to the column search headers but will NOT include the changes to ordering.

Can someone please let me know what we're doing wrong here?

I am trying to use the editor api to simply set the title and message during edit/create.
No errors are shown. But the form is not displaying the text.

Obviously I am misusing the API but I cannot quite see where i have gone wrong.

Can anyone help me ..

Thanks in advance

cpdHoursEditor = new $.fn.dataTable.Editor({ ... });
cpdHoursTable = $('#cpdHoursTable').DataTable({ ... });

// this does nothing
cpdHoursEditor.title('My Edit Title').buttons('edit');
cpdHoursEditor.title('My New Title').buttons('create');

// this sets the message the first time the editor form is displayed.. after that no message is displayed
cpdHoursEditor.message("mymessage").buttons("edit)

in a multi row edit, is there a way to concatenate a submitted value with an existing value from JSON data and apply the update to each unique row with each unique composite value?

I've tried preEdit but the submitted_value+existing_value from row_1 was also applied to row_2

thank you

I'm a newbie to DataTables, but have made lots of progress through the use of DataTables on my project. Thanks it's a great tool, but I am still learning.

Is there a way to display my data using two rows instead of one. I have lots of columns and currently I'm using a method that enables user to click on a + icon to display rest of the information. Using two rows (for the desktop version) will allow users to view all of the columns instead of clicking on the + icon . Thanks in advance.

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?

Here's the bottom line... you can get DataTables to work in Angular 2 just fine - as long as your data is static. But if you have a real-world application where you call an Angular service to dynamically fetch your data when your component is initialized, it breaks DataTables. The table displays correctly initially. But as soon as you try to sort a column or search, all of the data disappears.

I was able to implement a really ugly work-around (hack) by delaying the application of the DataTable() call via a setTimeout - essentially giving Angular time to manipulate the DOM before DataTables does. But this is undesirable for a number of reasons.

I was hoping that Angular-DataTables (a bridge between the two) would solve the problem. And while I do like some things about it, this particular problem does not go away.

I understand that this is not an Angular 2 support forum. But given the popularity of that platform, I would think that the DataTables team would have some interest in making it work properly on it.

We currently have a selectize field in the editor popup, which options are shown inline. When the field get focus, these options are shown and the popup resizes to the maximal height of the browser window, but the footer keeps the same position relative to the header.

• before options show
• after options show

Also, some problems remain when adding/removing fields. I am quite sure things only break when the scrollbar gets involved, because when I do the same test as above with a slightly higher window everything seems to be fine.

Would there be an easy fix for this?

With the Edit table, I am trying to run samples with SQLite. First, there are errors running the sql script. Fixed that. Second, there are errors with "var provider = DbProviderFactories.GetFactory(Adapter()); in Database.cs" Fixed that by hard coding the connection string to my SQlite DB. Now, I get the following error at the browser (http://localhost:49942/api/staff?_=1484082959664).

I have been at setting up the sample for hours. Am I missing something? Simple is killing me. Anyone have any thoughts? Thank you.

{draw: null, data: [], recordsTotal: null, recordsFiltered: null,…}
cancelled:[]
data:[]
debugSql:null
draw:null
error:"String was not recognized as a valid DateTime."
fieldErrors:[]
files:{}
id:null
meta:{}
options:{}
recordsFiltered:null
recordsTotal:null
upload:{id: null}

On clicking search button below table is refreshed and data is fetched. Below is the sequence of steps done to search and load data in table.

STEPS to Reproduce ISSUE

1. Click search
2. clear cache to reset pagination back to page 1. This is done as follows
   window.localStorage.clear();

FYI: I tried localStorage.removeItem("claimListDataTable"); But was not successful in resetting pagination.

1. The table data is refreshed with new data.

ISSUE:::

The issue i am facing now is after table is refreshed with new data, i navigate to page 2 in table search results and select an item.
This takes me to different page. On clicking back to return to table the pagination is on page 1 and not on page 2 where i was before navigating away from table. Subsequent pagination history is retained correctly. The pagination is lost the first time after data is loaded.

Could someone explain why i am seeing this behavior and suggest ways to fix this problem?

$("#claimListTable").dataTable( {
        "aLengthMenu": [[10, 25, 50], [10, 25, 50]],
        "bProcessing": true,
        "bServerSide": true,
        "bSort" : false,
        "sort": "position",
        "bStateSave": false,
        "iDisplayLength": 10,
        "iDisplayStart": 0,
        "bFilter": false,
        "bStateSave": true,
        "fnStateSave": function (oSettings, oData) {
            sessionStorage.setItem('claimListDataTable', JSON.stringify(oData));
        },
        "fnStateLoad": function (oSettings) {
            return JSON.parse(sessionStorage.getItem('claimListDataTable'));
        },
       // "bInfo": false,
        "fnDrawCallback": function () {
        },
        "sAjaxSource": "retreiveClaimsList",
        "fnServerParams": function ( aoData ) {
            aoData.push({ "name": "audit_id", "value": audit_id });
            aoData.push({ "name": "provider_nm", "value": provider_nm });
            aoData.push({ "name": "selProvider", "value": selProvider });
            aoData.push({ "name": "batch_num", "value": batch_num });
            aoData.push({ "name": "selStatus", "value": selStatus });
            aoData.push({ "name": "reasonCd", "value": reasonCd });
            aoData.push({ "name": "recipientId", "value": recipientId });
            aoData.push({ "name": "recipient_firstName", "value": recipient_firstName });
            aoData.push({ "name": "recipient_lastName", "value": recipient_lastName });
            aoData.push({ "name": "selOpType", "value": selOpType });
            aoData.push({ "name": "op_from_dos", "value": op_from_dos });
            aoData.push({ "name": "op_thru_dos", "value": op_thru_dos });
        },
        "aoColumns": [

                {"mData" : "auditStatusCd"},
                {"mData" : "batchNum"},
                {"mData" : "overpaymentType"},
                {"mData" : "patientLastName"},
                {"mData" : "patientFirstName"},
                {"mData" : "recipientId"},
                {"mData" : "fromDOSDate"},
                {"mData" : "thruDOSDate"},
                {"mData" : "paidDate"},
                {"mData" : "icnNumber"},
                {"mData":   null,
                "mRender": function ( data, type, row ) {
                    if ( type === 'display' ) {
                        var opAmt = formatNumber(row.finalAmt);
                       return '<p align="right">'+opAmt+'</p>';
                    }
                    return data;
                },
                className: "dt-body-center",

                },
                {"mData" : "claimType"},
                {"mData":   null,
                    "mRender": function ( data, type, row ) {
                        if ( type === 'display' ) {
                           return '<a href="#" onclick="goToLineDetail('+'\''+row.recipientId+'\',\''+row.fromDOSDate+'\',\''+row.thruDOSDate+'\',\''+row.overpaymentType+'\',\''+row.batchNum+'\',\''+row.icnNumber+'\',\''+row.providerId+'\''+')">Details</a>';
                        }
                        return data;
                    },
                    className: "dt-body-center",

                },

        ]
    } );

I have implemented column filter widget with data table plugin.It is working fine for normal scenario but if apply reordering to columns, values from all column filters which are on top of each column header get changed except default values from each filter,here default value is column name, so the scenario will be like default name of one column and values of another column.
Thanks.

codepen.io/anon/pen/LxGmXW
In above uploaded code column filter widget not visible so attached images as

I'm getting this error in Chrome, sometimes in Firefox and IE too. but the same code is working in the different server but both are Centos /PHP5.x / MariaDB.
_
"ERR_INCOMPLETE_CHUNKED_ENCODING"_

When we change the 'Page per display' to 25,50,100 getting this error. For 10 list per page is working and even pagination is also working. Maybe the issue with Content-length or any server variables needs to change?

Hello everyone,

i am now trying to modify the table before saving it as EXCEL and i don't know how to add two sentences before the table starts. For example add one new row before the table and input there a text. I am now using the following code to make the column G blue. I can use the customize ability, but no idea how

    buttons: [{
                        extend: 'excel',
                        text: 'Save in EXCEL',
                        filename: 'td900',
                        customize: function(xlsx) {
                            var sheet = xlsx.xl.worksheets['sheet1.xml'];
                           // $('c[r=A1] t', sheet).text( 'Custom text' );

                            // Loop over the cells in column `F`
                            $('row c[r^="G"] ', sheet).each( function () {
                                // Get the value and strip the non numeric characters

                                   if ( $( this).text() !== "needed Adjustment" ) {
                    $(this).attr( 's', '20' );
                }

                            });
                        }


                            }]

Hello

Im using datatables for displaying data on the webpage. Have also added and Export button which would export the data in Excel format.
Currently im using search() (based on column no. 17) in the javascript to only show specific data in the datatables. On clicking export only the filtered data is being exported. I would want to export the entire data without any filter being applied.
1. in the view it should only show the rows where column 17 has a specific value 'abc' (Working)
2. While exporting, it should export entire data i.e column 17 should be having all values as without the search being applied. (Not Working)

Code Snippet:

var table = $('.tableContent').DataTable({
        "autoWidth": false,
        "pageLength": 50,
        dom : 'lBfrtip',
        buttons : [ {
            extend : 'excel',
            text : 'Export to Excel'
        } ],
        "columnDefs" : [{
            "targets" : [ 0, 1, 2, 8, 9, 10, 11,  17, 18 ],
            "visible" : true,
            "searchable" : true
        }, {
            "targets" : [ 3, 4, 5, 6, 7, 12, 13, 14, 15, 16, 19, 20, 21 ],
            "visible" : false,
            "searchable" : false
        }]
    });

    table.column(17).search('abc', false, false, true).draw();

hi guys,
I'd need your help in order to solve an urgent issue I have with my application.

So far datatable has been working fine for us, but now I get the following error when accessing the page:
Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING

Currently I have 3.650 records on the table I want to display. If I delete some records it works.

I don't know what I can do to get it running again.

Please, could you help me?

Thanks
Dani

hi to all,
In our company we use IE9 (Standard browser for Intranet)

I just tried to implement the basic example for fixed header.
On the datatable website it's working as expected.

But when I try to use it in my html page, it doesn't.
here's my fiddle
I expected the table header to "stop" when reaching the top of my id "contentMain".
Even if I set the top of "contentMain" to 0, it does not work.

Can anyone help me please to find my mistake?

thank you very much,
azfrank

i am exporting a table to excel using html5 button, and setting the title of the export.

what i would like to do is append the date and time to the file name, which kinda works, except the characters as date separators are not working.

i checked the syntax on moment.js, but no joy,

this is my code

{
            extend: 'excelHtml5',
            exportOptions: {
                columns: [ 1, 2, 3, 4, 5, 7, 8, 10]
            },
    title: 'Membership_Renewals '+ moment().format('DD[/]MM[/]YYYY h[:]mm a')
        },

and i get Membership_Renewals 11012017 932 am

plz give the entair code for full length code

hi this is Ravi.plz i will send image.i want image upload field,curd operations and filter all in one table using jtable,dao,servlet in java with example full length code

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.