current code :
"tableTools": {
"sSwfPath": "/swf/copy_csv_xls_pdf.swf",
"aButtons": [
{
"sExtends": "copy",
"mColumns": copyColumn,
"sButtonText": "Copy to clipboard"
},
{
"sExtends": "csv",
"mColumns": copyColumn,
"sButtonText": "Save to CSV"
}
]
}

Hi,

I used this example with my own data : http://live.datatables.net/piqidoqo/549/edit
I got the 'processing' message but the filtering is not done.

Any help please ?

Marc

There must be a way to get the CSV or EXCEL export buttons to open the download in a Google sheet on an iPad. I hope that’s just something I’m missing. Would be really bad news if this couldn’t be arranged. If Apple blocks that, we need a website and letter writing campaign to ask Tim Cook to fix that.

Hello, I'm trying to sort a column on <select> tags (with <option> tag inside).

What is the proper way to do that?

This is my sample code:

        this.$appList = this.$appList.DataTable({
            data:       data,
            columns:    [
                            {
                                title: 'Application',   
                                data: 'app'
                            }, 
                            {
                                title: 'Set to',        
                                data: 'list_type',
                                width: '100px',
                                render: function(data){

                                    var select = '<select>';

                                    for (var i=0; i<4; i++) {

                                        if (data.toUpperCase() === that.listTypes[i].toUpperCase()) 
                                            select += '<option value="' + that.listTypes[i].toLowerCase() + '" selected="true">' + that.listTypes[i] + '</option>';
                                        else 
                                            select += '<option value="' + that.listTypes[i].toLowerCase() + '">' + that.listTypes[i] + '</option>';
                                    }

                                    select += '</select>';

                                    return select;
                                }
                            }
            ],
            responsive: true,
            language: {
                        search: '',
                        searchPlaceholder: 'Search Application'
            },
            processing: true,
            autoWidth: false
        });

I'm combining a complex header and fixed columns:
1) complex header: https://datatables.net/examples/basic_init/complex_header.html
2) fixed columns: https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html
It works fine but is there a way to remove the scrollbar from the fixed header columns? I've outlined the bit I'd like to remove.

Basically, I want to make it like this: https://jsfiddle.net/brianlmerritt/8c5jgs4b/ but with DataTables and complex header.
Here's my own fiddle: https://jsfiddle.net/omgLswq6/151/

Hello,

I have a Problem with the update of the html5 attribute data-search.
I want to search my Datasets with special characters, which should not display in the Table directly.

Ich generate my Table with an Array of Data (not from HTML).
I update the row with the data-search Attribute after is created and invalidate the row. But that wont work.

productListDatatable = $('.productListTable').DataTable({
'columns': [
{ title: '#' },
{ title: '1' },
{ title: '2'},
{ title: '3' },
{ title: '4'},
{ title: '5' }
],
'createdRow': function(row, data){
var searchString = 'test';
$(row).find('td').first().attr('data-search', searchString);
productListDatatable.row(productListDatatable.row(row).index()).invalidate();
}
});
Then I add the Data:
productListDatatable.clear().rows.add(datatableProductsData).draw();

I already tried to invalidate after draw the table:
productListDatatable.clear().rows.add(datatableProductsData).draw().rows().invalidate();
But this doesn't work, too.

Hope someone can help me.

Regards

Hello. I know i am doing something wrong, but i can't find where. If you could look at my code, and tell me, why these parameters are null. I am trying to apply serverside pagination to my app and in DataTables.

Spring Controller:
package com.example.controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;


import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import com.example.dao.SeriaDao;
import com.example.model.Seria;


@RestController
public class WebController extends HttpServlet{

    @Autowired
    SeriaDao sed;


    @GetMapping("/tabelka")
    public List<Seria> showTable()
    {
        return sed.findAll();
    }

    int draw = 0;
    int start = 0;
    int length = 20;

    @GetMapping("/pgTabelka")
    public Map<String,Object> pgTable(HttpServletRequest request)
    {

        Map<String,Object> json = new HashMap<String,Object>();
        if(request.getParameter("draw")!=null)
        {
            draw = Integer.parseInt(request.getParameter("draw"));
            System.out.println("draw dziala");
        }
        if(request.getParameter("start")!=null)
        {
            start = Integer.parseInt(request.getParameter("start"));
            System.out.println("start dziala");
        }
        if(request.getParameter("length")!=null)
        {
            length = Integer.parseInt(request.getParameter("length"));
            System.out.println("length dziala");
        }
        int totalRecords = sed.recordsTotal();

        List<Seria> serie = sed.findPart(start, length);

            json.put("draw", draw);
            json.put("recordsTotal", totalRecords);
            json.put("recordsFiltered", totalRecords);
            json.put("data", serie);


        return json;
    }
}

Html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Data Viewer</title>
    <script
              src="https://code.jquery.com/jquery-3.3.1.js"
              integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
              crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css"/>

    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>

</head>
<body>

<table id="tab" class="display">
<thead>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>file</th>
        <th>cassid</th>
        <th>categoryid</th>
        <th>datefrom</th>
        <th>frequency</th>
        <th>markers</th>
        <th>unit</th>
        <th>feed</th>
        <th>userid</th>
        <th>createdate</th>
        <th>changedate</th>
    </tr>
</thead>
</table>
<script>
    $('#tab').DataTable( {

        ajax: {
            processing: true,
            serverSide: true,
            url: '/pgTabelka',
        },
        columns: [
            {data: "id"},
            {data:"name"},
            {data:"file"},
            {data:"cassid"},
            {data:"categoryid"},
            {data:"datefrom"},
            {data:"frequency"},
            {data:"markers"},
            {data:"unit"},
            {data:"feed"},
            {data:"userid"},
            {data:"createdate"},
            {data:"changedate"}
        ]
    } );

    </script>
</body>
</html>

JSON from Postman:
{
"recordsFiltered": 488,
"data": [
{
"id": 41,
"name": "Average Weekly Earnings of All Employees: Total Private in Corpus Christi, TX (MSA)",
"file": "SMU48185800500000011.csv",
"cassid": "1d2e556b-031e-4c6f-aec4-981c4e907324",
"categoryid": 3,
"datefrom": "2006-12-31",
"frequency": 5,
"markers": null,
"unit": "$ per Week",
"feed": "Macroeconomic_And_Major_Markets",
"userid": null,
"createdate": "2016-10-15T23:38:49",
"changedate": "2017-01-09T00:50:01"
},
{
"id": 42,
"name": "Harmonized Index of Consumer Prices: Audio-Visual, Photographic, and Information Processing Equipment for Cyprus",
"file": "CP0910CYM086NEST.csv",
"cassid": "6df5b8d5-ec39-4860-930f-a8b355cce37a",
"categoryid": 3,
"datefrom": "1995-12-31",
"frequency": 5,
"markers": null,
"unit": "Index 2015=100",
"feed": "Macroeconomic_And_Major_Markets",
"userid": null,
"createdate": "2016-10-15T23:38:49",
"changedate": "2017-02-16T11:35:04"
},
{
........
}
],
"draw": 0,
"recordsTotal": 488
}

Just an FYI to help promote the use of Datatables, be aware that Microsoft recently released their Visual Studio replacement for Bower, libman, to manage third-party libraries. This was done in August 2018.

The only CDN currently supported in libman is cdnjs.com. Although I see datatables.net on this CDN, it does not appear that the styling options (e.g. Bootstrap) are on cdnjs.com. Without that support, it is difficult for Microsoft Visual Studio users use libman for packaging both datatables and the style support.

I realize you can use datatables site to package the styling as a bundle, but that defeats the use of package managers like the new libman. Would love to see the styles on cdnjs.com as supported on this page:

https://cdn.datatables.net/

Many thanks.

Hi, I did follow this doc refference https://datatables.net/reference/api/ajax.reload() but I am still getting error with ajax instance.

    $(function () {
        var tt = $('#users-table').DataTable({
            serverSide: true,
            processing: true,

            ajax: '/panel/uzytkownicy/data',

            columns: [
              // my columns
            ]
        });

        setInterval( function () {
            tt.ajax.reload();
        }, 1000 );
    });

This is the way how I add DataTable to my project (i am using npm)

window.$.fn.DataTable = require( 'datatables.net-bs4' );

Error is: TypeError: tt.ajax is undefined

DataTables are working perfectly, I can sort, search etc. etc. but im facing problem with ajax api.

Am i importing datatables in wrong way and it is not recognizing api instance in js or what?

Hi!

I just checked my package.json for updates. For "datatables.net" there's a version "2.1.1" available, while recently it was "1.10.19" (which is still what on this home page presents).

Others like "datatables.net-bs4" used to be version "1.10.19", too. Now there's a "2.1.1" and even a "3.2.2" available. And also "datatables.net-buttons" as well as "datatables.net-buttons-bs4" have new 2.x versions available now.

Are the 2.x (and even 3.x) previews or is that a new visioning scheme? Which one should I use (for non-beta)?

Thanks
Karlo

HI

Open my site (see screenshot 1)
-> table is rendered
-> perfect
Click on the header-link (I use a jquery to collapse/store the status)
-> table is collapsed
-> fine
Click on page refresh
-> table is collapsed
-> fine
Display table via click on header-link
-> table is shown again
-> table is rendered in a new way
-> not perfectly shown (see screenshot 2)

I guess it is wrong rendered?! but i am not sure why?

BTW: will buy the license for editor next week - are data sent to you to check or is the check only for license?

Hi Allan,

Is any new info on exporting complex headers to Excel?
If we still have to wait for V2, is there a work around?

Thanks,

i had included Duplicate button for the editor,when clicked on button the form popup is generated with the data selected for duplicate, but the actual problem is when i click create button, data not posted like object how it posted when i used add button.instead it is posting like datatable input.
Could you please support in achieving the format how the add button form post works?

CODE:

buttons: [
          { extend: "create", editor: propertyEditor },
          { extend: "edit",   editor: propertyEditor },
          {
              extend: "selected",
              text: 'Duplicate',
              action: function ( e, dt, node, config ) {
                  // Start in edit mode, and then change to create
                  propertyEditor
                      .edit( PropertyTable.rows( {selected: true} ).indexes(), {
                          title: 'Duplicate record',
                          buttons: 'Create from existing'
                      } )
                      .mode( 'create' );
              }
          },
          { extend: "remove", editor: propertyEditor },
          {
              text: 'Reload',
              action: function ( e, dt, node, config ) {
                  dt.ajax.reload();
              }
          }
          ]

Is it currently possible to upload a file over API and how would you go around that?

I've managed to implement file upload over front end DataTables editor form, but i need this to be done programmatically.

Hi guys,

I am doing some data scraping and storing the data into MYSQL database.

The field in question is set in MYSQL to UTF8.

I get the following data into the database as

 <div class="panel marTop20">
                <h3>Technical Specs</h3>
                <p>No Load Speed: 2,500-4,200/min.<br>Depth of Cut: @90º: 59mm, @45º: 44mm.<br>With Guide Rails: @90º: 55mm, @45º: 40mm.<br>Blade: 165x20mm Bore<br>Bevel Capacity: 47<br>Weight: 4.7kg</p>
            </div>
            &nbsp;

but the ' deg o' is shown as ' º '

I have tried using decodeURIComponent(escape) in the render but I get error 'URIError: URI error.'

my php is

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');  
$quoteID = $_GET["quoteID"];
/*
 * Example PHP implementation used for the index.html example
 */

// DataTables PHP library
include( "DataTables.php" );

// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Options,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate;

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'products3','productID' )
    ->fields(
        Field::inst( 'products3.productID' )->set(false),
        Field::inst( 'products3.manufacturerCode' ),
        Field::inst( 'products3.TBcost' ),
        Field::inst( 'products3.TBmyCost' ),
        Field::inst( 'products3.CTSmyCost' ),
        Field::inst( 'products3.tradeNett' ),
        Field::inst( 'products3.trade' ),
        Field::inst( 'products3.retail' ),
        Field::inst( 'products3.TBstockCode' ),
        Field::inst( 'products3.barCode' ),
        Field::inst( 'products3.shortDesc' ),
        Field::inst( 'products3.longDesc' ),
        Field::inst( 'products3.category' )
            ->options( Options::inst()
                ->table( 'categories2' )
                ->value( 'catID' )
                ->label( 'name' )
            )//,
        //Field::inst( 'categories2.name' )
    )
    ->join(
        Mjoin::inst( 'fileDetails' )
            ->link( 'products3.productID', 'productFiles.productID' )
            ->link( 'fileDetails.id', 'productFiles.fileID' )
            ->fields(
                Field::inst( 'filename' ),
                Field::inst( 'web_path' ),
                Field::inst( 'id' )
                    ->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/upload/__ID__.__EXTN__')
                        ->db( 'fileDetails', 'id', array(
                            'filename'    => Upload::DB_FILE_NAME,
                            'filesize'    => Upload::DB_FILE_SIZE,
                            'web_path'    => Upload::DB_WEB_PATH,
                            'system_path' => Upload::DB_SYSTEM_PATH
                        ) )
                        ->validator( function ( $file ) {
                            return$file['size'] >= 10000000 ?
                                "Files must be smaller than 10 meg" :
                                null;
                        } )
                        //->allowedExtensions( array( 'png', 'jpg' ), "Please upload an image" )
                    )
            )
    )
    //->leftJoin( 'sites', 'sites.id', '=', 'products3.site' )
    ->process( $_POST )
    ->json();

I also tried adding this to the bootstrap.php file.

```php
$db->sql("SET character_set_client=utf8");
$db->sql("SET character_set_connection=utf8");
$db->sql("SET character_set_results=utf8");
````

How do I handle this issue please.

Cheers

Steve Warby

Hello All,

This code i written for calling the web api of crm

var fetchxml = "<fetch mapping='logical' page='2' count='10' returntotalrecordcount='true' pagingcookie='%253ccookie%2520page%253d%25221%2522%253e%253caccountid%2520last%253d%2522%257bB8A19CDD-88DF-E311-B8E5-6C3BE5A8B200%257d%2522%2520first%253d%2522%257b475B158C-541C-E511-80D3-3863BB347BA8%257d%2522%2520%252f%253e%253c%252fcookie%253e'>" +
" <entity name='account' >" +
" <attribute name='address1_city' />" +
" <attribute name='name' />" +
" </entity>" +
"</fetch>";

        $("#example").DataTable({
            "processing": true,
            "serverSide": true,
            "aoColumnDefs": [

{ bSortable: true, aTargets: [0] },
{ bSortable: false, aTargets: ['_all'] }
],
"ajax":
{
url: encodeURI(organizationURI + "/api/data/v9.0/accounts?fetchXml=" + fetchxml),
dataType: 'json',
method: 'get',
headers: { 'Authorization': 'Bearer' + token },
data: function (d) {
return d;
},

                },
            columns: [
    { title: "Name" },
    { title: "City" },

            ]
        });

it is throwing the 401 Un Authroizer error..

i written following code it is execute with out any error,

var fetchxml = "<fetch mapping='logical' page='2' count='10' returntotalrecordcount='true' pagingcookie='%253ccookie%2520page%253d%25221%2522%253e%253caccountid%2520last%253d%2522%257bB8A19CDD-88DF-E311-B8E5-6C3BE5A8B200%257d%2522%2520first%253d%2522%257b475B158C-541C-E511-80D3-3863BB347BA8%257d%2522%2520%252f%253e%253c%252fcookie%253e'>" +
" <entity name='account' >" +
" <attribute name='emailaddress1' />" +
" <attribute name='address1_city' />" +
" <attribute name='accountid' />" +
" <attribute name='parentaccountid' />" +
" <attribute name='address1_composite' />" +
" <attribute name='name' />" +
" </entity>" +
"</fetch>";

              var req = new XMLHttpRequest()
              req.open("GET", encodeURI(organizationURI + "/api/data/v9.0/accounts?fetchXml=" + fetchxml), true);
              //Set Bearer token
              req.setRequestHeader("Authorization", "Bearer " + token);
              req.setRequestHeader("Accept", "application/json");
              req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
              req.setRequestHeader("OData-MaxVersion", "4.0");
              req.setRequestHeader("OData-Version", "4.0");
              req.setRequestHeader("Prefer", "odata.include-annotations=*");
              req.onreadystatechange = function () {
                  if (this.readyState == 4 /* complete */) {
                      req.onreadystatechange = null;
                      if (this.status == 200) {
                          var accounts = JSON.parse(this.response).value;
                          var temp = JSON.parse(this.response);
                          temp["@Microsoft.Dynamics.CRM.fetchxmlpagingcookie"];
                          var entityObj = [];
                          var pagingInfo = null;
                          debugger;

                          //Check if results contains cookies
                          //if yes then retrieve next set of records
                          if (temp["@Microsoft.Dynamics.CRM.fetchxmlpagingcookie"] != null) {

                              document.getElementById("next").style.display = "block";
                              document.getElementById("nxtPage").textContent = "";
                              document.getElementById("nxtPage").textContent = temp["@Microsoft.Dynamics.CRM.fetchxmlpagingcookie"];
                          }
                          renderAccounts(accounts);
                          var data = [];
                          for (var i = 0; i < accounts.length; i++) {
                              var name = accounts[i].name;
                              var city = accounts[i].address1_city;
                              data.push([name, city]);
                          }

                      }
                      else {
                          var error = JSON.parse(this.response).error;
                          console.log(error.message);
                          errorMessage.textContent = error.message;
                      }
                  }
              };
              req.send();

Thanks in advance,
Sairam

Hello
I've managed to finish the master-detail functionality, but I've noticed the lack of alignment control, meaning, each time I expand a detail set the header is moving to the right; more, the "scrollX" it appears to function opposite as described: if it is true, the header and the rows are static, although they are misaligned.
Please find below the code along with 2 files of data.

$(document).ready(function() {
    var table = $('#example').DataTable( {
      ajax: "alin@TS Locks_Master.txt"
      /*
      function (data, callback, settings) {
              $.ajax({
                url: "objects.txt",
              }).then ( function(json) {
                var data = JSON.parse(json);
                callback(data);            
              });
      }
      */,
      pageLength: 10,
      scrollX: "true",
      
        columns: [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
                { data: 0 },
                { data: 1 },
                { data: 2 },
                { data: 3 },
                { data: 4 }
            ],
            
        initComplete: function () {
          init = false;
        },
          createdRow: function ( row, data, index ) {
            if (data[5] === '') {
              var td = $(row).find("td:first");
              td.removeClass( 'details-control' );
            }
           }
    } );
     
    // Add event listener for opening and closing first level childdetails
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
        var rowData = row.data();
        var index = rowData[5];
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( 
               '<table id = "child_details'+index+'" style="padding-left:50px;">'+
                   '<thead>'+
                        '<tr>'+
                            '<th>#</th>'+
                            '<th>CltId</th>'+
                            '<th>DocCode</th>'+
                            '<th>DocNo</th>'+
                            '<th>DocDate</th>'+
                            '<th>Value</th>'+
                        '</tr>'+
                    '</thead>'+
                    '<tbody></tbody>'+
                '</table>').show();
          
             $('#child_details'+index).DataTable({
                ajax: function (data, callback, settings) {
                  $.ajax({
                    url: "alin@TS Locks_Detail.txt"
                  }).then ( function(json) {
                    var data = JSON.parse(json);
                    data = data.data;
                    
                    var display = [];
                    for (d = 0; d < data.length; d++) {
                      if (data[d][5] == rowData[5]) {
                        display.push(data[d]);
                      }
                    }
                    callback({data: display});
                  });
                },
                //fixedHeader:{header: "true"},
                scrollX: 800,
                scrollCollapse: true,
                td: 'scope= "col"',
                columns: [
                    {
                        "className":      'details-control1',
                        "orderable":      false,
                        "data":           null,
                        "defaultContent": ''
                    },
                    { data: 0 },
                    { data: 1 },
                    { data: 2 },
                    { data: 3 },
                    { data: 4 }
                  ],
                columnDefs: [{ targets: [1] , visible: false}],
                destroy: true,
                scrollY: '200px',
            });
            tr.addClass('shown');
        }
    })
} );

How to implement Multi Nested DataTable ???

I have a subtable in which I can take the value of id in this way, but if I hide the value of id, it does not work anymore

how can I access a value of a row in a subtable or daughter table

$('table').off('click', 'button.TareaH');
    $('table').on('click', 'button.TareaH', function () {
        idT = $(this).parent().siblings('td:first').text();
        
    });

Gracias

I have an existing DT system, I've downloaded the new CSS and JS responsive files and i'm now wondering where to add the responsive: true value to the JS scripts.

I assumed it would be table.home.js file

var table = $('#home').DataTable( {
        ajax: 'php/table.home.php',
        columns: [
            {
                "data": "full_name"
            },
            {
                "data": "level"
            },
            {
                "data": "id"
            },
            {
                "data": "email_"
            },
            {
                "data": "assesser"
            }
        ],
        rowReorder: {
            selector: 'td:nth-child(2)'
        },
        select: true,
        responsive: true,
        lengthChange: false
    } );

Like such, this seems to make no difference to the tables tho?

Thanks you!