EDIT: Problem resolved and was unrelated to the title. In the datatable that wasn't working, I had neglected to add a "thead" field to my first column. Apologies.

~~I have a webpage that shows two datatables, but only works with one.

In my links section, I have the following references to datatables:

    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.css" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" type="text/css">
        <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">

Now in my view page, I have the scripts for these two tables:

        <script> <!--This doesn't work -->
          $(document).ready(function () {
            $('#courseTable').DataTable( {
              "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]]
            });
            $('.dataTables_length').addClass('bs-select');
          });
        </script>

        <script> <!-- This works-->
          $(document).ready(function () {
            $('#userTable').DataTable( {
              "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]]
            });
            $('.dataTables_length').addClass('bs-select');
          });
        </script>

The "userTable" table is read, but the "courseTable" isn't. Here are the references in their tables:

    <div class="form-group"> <!-- This works-->
        <table id="userTable" data-page-length='5' cellspacing="0"
        class="table table-bordered table-striped table-hover table-condensed"
        role="grid">
        ..
        </table>
    </div>


    <div class="form-group"> <!--This doesn't work -->
        <table id="courseTable" data-page-length='5' cellspacing="0"
        class="table table-bordered table-striped table-hover table-condensed"
        role="grid">
        ...
        </table>
    </div>

The "userTable" works fine and gets all the lovely DataTable functionality. However, the courseTable doesn't. Not one bit. No clickable columns, no pagination, nothing. Even if I remove the userTable code references from my page, courseTable still doesn't work.

It may be worth noting that I've used the "courseTable" code on other pages for other tables (where there is only one DataTable) and it works fine there.

Does anyone know how to solve this issue? Any help would be greatly appreciated~~

image appears only in first page

extend: 'print',
customize: function (win) {

                    $(win.document.body)
                        .css('font-size', '10pt')
                        .prepend(
                            '<img src="http://datatables.net/media/images/logo-fade.png" style="position:absolute; top:0; left:0;" />'
                        );
                    $(win.document.body).find('table')
                        .addClass('compact')
                        .css('font-size', 'inherit');
                }

Hello,

I would like to do : https://datatables.net/examples/api/row_details.html

Parent row : Nom - Adresse - CodePostal - Ville - Pays
Children row : Telephone - Telecopie - SiteInternet - SiteSupport

The data is stored in the table name : 'Para_Editeur'

I work with database SQL Server.

1. How I can add icon "+" on the rows of my table ?
2. How I search the data of my row parent ?

My script 'editeur.js' (Datatable parent):

/* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+   
        '<tr>'+
            '<td>Téléphone :</td>'+
            '<td>'+d.Telephone+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Télécopie :</td>'+
            '<td>'+d.Telecopie+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Site Internet :</td>'+
            '<td>'+d.SiteInternet+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Site Support :</td>'+
            '<td>'+d.SiteSupport+'</td>'+
        '</tr>'+     
    '</table>';
}
 
$(document).ready(function() {
    var table = $('#table_editeur').DataTable( {
        "bProcessing": true,
        "serverSide": true,
        "ajax":{
            url :"./response-displayrow_editeur.php", // json datasource
            type: "post",  // type of method  ,GET/POST/DELETE
            error: function(){
                $("#table_editeur_processing").css("display","none");
              }            
          },        
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": '',
            },
            { "data": "Nom" },
            { "data": "Adresse" },
            { "data": "CodePostal" },
            { "data": "Ville" },
            { "data": "Pays" },
            { "data": "Telephone" },
            { "data": "Telecopie" },
            { "data": "SiteInternet" },
            { "data": "SiteSupport" },
        ],
        "order": [[1, 'asc']]
    } );
     
    // Add event listener for opening and closing details
    $('#table_editeur tbody').on('click', 'td.details-control', function () {        
        var tr = $(this).closest('tr');
        // var tdi = tr.find("i.fa");
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            // tr.find('svg').attr('data-icon', 'plus-circle');
            tr.removeClass('shown');            
            // tdi.first().removeClass('fa-minus-square');
            // tdi.first().addClass('fa-plus-square');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            // row.child(format(tr.data('ACA'), tr.data('ACA'))).show();
            // tr.find('svg').attr('data-icon', 'minus-circle');
            tr.addClass('shown');
            // tdi.first().removeClass('fa-plus-square');
            // tdi.first().addClass('fa-minus-square');
        }
    } );    
} );

My script 'response-displayrow_editeur.php' (Datatable parent):

<?php
    //include connection file
    include_once(".\db_connection.php");
 
    // getting total number records without any search
    $sql = "SELECT dbo.Para_Editeur.Nom,dbo.Para_Editeur.Telephone,dbo.Para_Editeur.Telecopie,dbo.Para_Editeur.SiteInternet,dbo.Para_Editeur.SiteSupport FROM dbo.Para_Editeur";
    $stmt = sqlsrv_query( $conn, $sql);

    if( $stmt === false ) {
        die( print_r( sqlsrv_errors(), true));
        }

    //iterate on results row and create new index array of data
    while( $obj = sqlsrv_fetch_object( $stmt)) {
         $data[] = $obj;
    }   
 
    echo json_encode($json_data);  // send data as json format
 
?>

Thank you for help

My tables often have a data column with a reference key/serial number that looks like a number to excel (ie: 865851038622197 or 0865851038622197). I want excel to read it as text, not a number. If excel reads it as a number, it displays it in exponential format and then loses resolution. Using excel export / excelHtml5 and exportOptions how might I do this? Or, by using buttons.customize? There are complicated ways on the excel side to do this, but its hard on my users. Thanks!

For the Editor example showing how to use a compound primary key here, how would one go about adding a where-clause to limit the records shown in the table? That is, in your example, what would the where-clause look like to limit the display to only one person's visits?

For my case, I have a link table with the following structure:

CREATE TABLE `MapLocationRelationship` (
  `_idMap`            INTEGER NOT NULL,
  `_idLocation`       INTEGER NOT NULL,
  `_idEvent`          INTEGER NOT NULL,
  PRIMARY KEY ( `_idMap`, `_idLocation` )

I've tried to use the following where-clause

...
            ->where(function ($q) use ($idMap) {
                $q->where('MapLocationRelationship._idMap', $idMap);
            })
...

but am getting an exception: Call to member function where() on array.

I am trying to use a condition on the Joined table with MJoin - I do not want to show archived entries - but it does not work. What do I do wrong?

Thanks in advance!

// Build our Editor instance and process the data coming from _POST
$editor = Editor::inst($db, 'as_users', 'user_id');

########
# Joins
// für die as_user_details
$editor->leftJoin( 'as_user_details as details', 'as_users.user_id', '=', 'details.user_id' );

// as_user_roles
$editor->leftJoin('as_user_roles as roles', 'as_users.user_role', '=', 'roles.role_id');

// Join für den Namen des Users, der dein Eintrag erzeugt hat
$editor->leftJoin('as_user_details as created_details', 'as_users.created_by_user_id', '=', 'created_details.user_id');

// Join für die Qualifikationen 1:n

$editor->join(
    Mjoin::inst('qualifications_names')
        //->validator('qualifications_names[].id', Validate::mjoinMinCount(1))
        ->link('as_users.user_id', 'link_as_users__qualifications_names.user_id')
        ->link('qualifications_names.id', 'link_as_users__qualifications_names.qualification_names_id')
        // TODO archivierte nicht anzeigen
        //->order('name asc')
        ->fields(
            Field::inst('id')
                ->set(Field::SET_NONE)
                ->validator(Validate::required())
                ->options(Options::inst()
                    ->table('qualifications_names')
                    ->value('id')
                    ->label('qualification_name'),
                Field::inst('qualification_name')
                )
        )
        ->where("qualifications_names.archived", "1", "!=")
);

I am currently using custom HTTP variables to return view data back to the https://datatables.net/examples/server_side/custom_vars.html controller. In this example they have:

"data": function ( d ) {
                d.myKey = "myValue";

which would add myKey=myValue to the parameters.

Is it possible to return nested parameters such as myKey[one]=myValue&myKey[two]=myOtherValue?

I have my table nice and happy. Only certain fields are editable inline, they are editable with a drop down select list.

If I edit a field and click off the datatable (or click a non-editable filed) all is ok.
But if I click off a select editable field straight onto another editable select field, then I get this error in the console:

TypeError: g is undefined

To fix it, I thought I could change the line below:
editor.inline( this, { onChange: 'submit' } );

To this:
editor.inline( this, { onChange: 'submit' } );

But it didnt work. Any ideas or alternative thoughts?

Hi. I have a table, where some rows are parents and they have one child row "details". I make this row after the table is loaded with jquery like:
```
var nCloneTh = document.createElement( 'th' );
var nCloneTh1 = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
var nCloneTd1 = document.createElement( 'td' );
nCloneTd.innerHTML = '<img src="/oc/stock/images/plus.png">';
nCloneTd1.innerHTML = ' ';
nCloneTd1.className = "txtCenter";
nCloneTd.className = "txtCenter";

$('#fileData thead tr.children').each( function () {
    this.insertBefore( nCloneTh, this.childNodes[0] );
} );

$('#fileData tbody tr.children').each( function () {
    this.insertBefore(  nCloneTd.cloneNode( true ), this.childNodes[0] );
} );


$('#fileData tbody tr:not(.children)').each( function () {
    this.insertBefore(  nCloneTd1.cloneNode( true ), this.childNodes[0] );
} );     




       function fnFormatDetails (table, nTr)

{
sOut2 = 'some details';
return sOut2;
}

        $('#fileData tbody td img').live('click', function () {
    var nTr = $(this).parents('tr')[0];
    if ( table.fnIsOpen(nTr) )
    {
        /* This row is already open - close it */
        this.src = "/oc/stock/images/plus.png";
        table.fnClose( nTr );
    }
    else
    {
        /* Open this row */
        this.src = "/oc/stock/images/minus.png";
        table.fnOpen( nTr, fnFormatDetails(table, nTr), 'details2' );
    }
} ); 



     } );      

```

Everything is ok, when 10 rows is shown, but if i select 25 or 50 or "all", other rows (11 and next) will not show the first column (see pictures).

What is wrong?

Greetings
I have a count field, I thought of providing calculation in it, so user can put 2+3 to get 5.
I'm using field.dependent for that.
Here is my code

let field = 'item_count';
editor.dependent(field, (val) => {
                            let obj = {values: {}};
                            try {
                                let r = eval(val);
                                if (r != val) {
                                    obj.values[field] = r;
                                }
                            } catch (e) {
                                obj.values[field] = 0;
                            }
                            return obj;
                        });

This works fine, when I put 2+5 and switch to another field, it will directly be 5.
The problem is when I put 2+5 and then click submit button. It seems that the editor send the data with the originial ("2+5") before the depenent funcion finishes.
Is there a way to make all depenedencies resolve and applied before submissionis sent ?

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

We are using DataTable with Fixed Columns, Scroller, Editor and KeyTable with inline editing and using server-side rendering.

We are having an issue with being unable to edit any of the fixed columns (there are 6). When clicking into a fixed column cell, the orange editor outline appears but there is no cursor and cannot be typed into. If I click on the same cell again, it seems that sometimes I am editing the table underneath. We also have validation rules on these cells, and error message will sometimes cause the fixed columns and the table underneath to be misaligned.

Please let me know what is the best way to engage support for this issue. I tried re-creating our scenario on http://live.datatables.net/seweyepe/1/edit (this is in-work).

We have a DT column containing images and logos (using <img> tag).

Is it possible to include these images and logos as part of the PDF export? Or even as part of the "print" export?

Hi, I have been working with DataTables for a few months now. It has been a great experience as well. I have come a long way with DataTables and successfully implemented a lot of features. My question is, how would I show an Image in the Message Bottom or Message Top areas for the DataTables. I have converted the image to base64 and did all that was necessary in the same context. I could display the image in the header section of the exported document, but that is not what I want to do. The image should be displayed as a bottom message. Any help or input is greatly appreciated.

Thanks!

the state of the datatable is getting retained even after user logout and logs in .I have used stateDuration=-1,but still the searched results or sorted results is not getting cleared when user logout.

$("#dataEntryFormTable").dataTable().fnDestroy();
        dataEntryFormTable = $("#dataEntryFormTable")
                .dataTable(
                        {   
                            "bProcessing" : false,
                            "bServerSide" : false,
                            "stateSave":true,
                            "stateDuration":-1,

I have my project in this way : https://jsfiddle.net/Eufragio/u342qgoz/1/

My problem is when exporting to excel, that the results bring me this way:

The result that I hope is this:

var $dataSocietyTable = $('#data');
// execute the below code only where we have this table
if ($dataSocietyTable.length) {
    //console.log('Inside the table!');
    var jsonUrl = '/creditdebit/credit/creditDebit';
    $dataSocietyTable.DataTable({

        lengthMenu: [[10, 30, 50, -1], ['10', '30', '50', 'ALL']],
        pageLength: 10,

        scrollCollapse: true,
        ajax: {
            url: jsonUrl,
            dataSrc:''
        },

        fixedColumns:   {
            leftColumns: 2
        },
        columnDefs: [ {
            targets:   0,
            checkbox:{
                selectRow:true
            }
        } ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },


        columns: [

             {
                data: 'originalName'
            }, 
            {
                data: 'newDate'
            },

        ],


    });
}

Hello i just started with DataTables and I also have a simple question..
is it possible to color the background color of a cell if there is a certain value in the cell?

Please Tell me why both search are not same

Hi everyone,
I know there is an export to excel function in the plugin. My question is there an import to excel function in the plugin ? or is there any similar to it? I would appreciate any help with this.
Thank you.

I have this issue popping up in the console on a specific page, but I can't figure out why I get this error, even after researching on Google.

TypeError: settings.aoColumns[column] is undefined

I'm on a point where I don't want to fix the "issue" (the table is not broken in the end), I just want the browser to ignore it and continue its execution. Because of this message, My code doesnt enter in the $(document).ready() function and I'm stuck because of this.

$.fn.dataTable.ext.errMode = 'none'; alone doesnt do the job, the error is still displayed.

How do I actually turn it off ?