Hi!

In the company I work we're developing a web platform that needs to fully support Chrome and Firefox (at least no IE needed!) and we are using DataTables. Everything as been running smoothly with it but there's a problem that annoy us (and the client too), which is the alignment of the thead with the tbody when we have scrollX enabled in Firefox.

I've used CSS to show the hidden thead of the div.dataTables_scrollBody to compare the alignments and take a picture of it, which is this one - http://i.imgur.com/jMilmcQ.png - As you can see, the thead of the div.dataTables_scrollHead isn't aligned with the thead of the div.dataTables_scrollBody.

In Chrome they are not aligned too but the difference is very small and is consistent as you can see here - http://i.imgur.com/rjtIRTd.png - which doesn't raise any concern.

I've tried to create a fiddle of it but can't reproduce the problem in there (it works like it should) and I've spent some hours trying to fix it but with no success. I've tried every single 10.x version of DataTables and the problem persists.

I used other options to create my own scrollX behaviour with success however I need to use the FixedColumns extension which requires scrollX property to be enabled.

Does anyone knows what is this problem and how can I solve it?

Data Table input type as text instead of search

I have a system that populate data table using CakePHP and the amazing part is

its search field was something like this

<input type="text" aria-controls="c_table">

And the date table i populate was

<input type="search" class="" placeholder="" aria-controls="c_table">

How do I change my own populated data table search bar as input type "text" instead of "search"

var dt = $('#clients_table').DataTable( {
        "processing": true,
        "serverSide": true,
"oLanguage": {
"sSearch": "Search"},
"sDom": '<"top"f>irt<"bottom"lp><"clear">'

Above is part of my data table declaration but I think that does not affect the search bar to be search instead of text, I wonder how cake PHP actually change the search as text for data table.

Thanks for helping

Hello.

I am using an ajax call to return a table, and I would like DT to do its magic upon that table.

Unfortunately, while the table prints out fine, DT never "sees" it. I thought it was because the $('#the_table').DataTable() was occurring at $(document).ready before the table was actually there, so I stuck in a dummy table with the right ID and overwrite it when I get my ajax result. I still don't see any DataTables output.

I tried putting the DataTables declaration inside the ajax success, but still nothing.

I know I have DT linked correctly to the page because when I use a simple html page with a hardcoded table I see DT take over. In this test document, My script was simply:

<script>$(document).ready(function(){
$('#contentTable').dataTable();})</script>

My backend PHP file won't work without local access to my db, but it just echo's a giant string containing the html for the filled out table, including the table tags and the id "contentTable".

<input type="submit" class="button" id="button_get_all_records" value="Display all records for this fleet."/>
<div id="table_goes_here"></div>

My index.php has this at the top:

$(document).ready(function(){
    $('#button_get_all_records').click(function(){
        $.ajax({
            type: "GET",
            url: "ajax.php",
            data: "<three jquery dropdown box selector.val()s in the form thing1=blah,thing2=durr,thing3=foo"
            success: function(msg){    //RETURNS A COMPLETE TABLE
                $('#table_goes_here').html(msg);
                $('#contentTable').dataTable();
            }
        });
    });
});

If I can get this working, I hope to add back in the colVis, colReorder, and tableTools sections that I had working on a hardcoded table.

This is my code in the doc ready function:

    $("#queue").dataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "/api/FooBarQueue",
            "dataSrc": "",
        }
    });

This is an ajax call on a web api function that returns this data (an object array). When I look in Fiddler, the call that is made results in a 404 because of a very long query string (even though the url is /api/FooBarQueue with nothing appended. Lots of query params such as draw=1&columns%5B0%5D.......

I used "dataSrc": "" based on a forum reply of a user with similar problem and that worked for him.

The returned data:

"[{\"QueueID\":27,\"BCOrderNumber\":300524,\"OrderDate\":\"2015-02-16T16:39:05\",\"SKU\":\"3DOV-FP-GP-094\",\"MaterialID\":0,\"Quantity\":1,\"OriginalFileName\":\"blahblah.jpg\",\"Initials\":\"\",\"ModelFileName\":\"\",\"MD5\":\"\",\"CreateDate\":\"2015-03-01T18:29:08.627\"},{\"QueueID\":28,\"BCOrderNumber\":300524,\"OrderDate\":\"2015-02-16T16:39:05\",\"SKU\":\"XXDOX-XX-XX-094\",\"MaterialID\":0,\"Quantity\":1,\"OriginalFileName\":\"xxxxCrest.jpg\",\"Initials\":\"\",\"ModelFileName\":\"\",\"MD5\":\"\",\"CreateDate\":\"2015-03-03T12:23:56.297\"}]"

(var table = $('#example').dataTable( { dom: 'Rlfrtip' ) is not working
any body try another thing so kindl help me

For some reason the body of the table doesn't match with the header of the table. The first column in the table body (where all the companies are listed) doesn't match with the header of the table as you can see in this JSfiddle:

http://jsfiddle.net/xF8hZ/164/

I tried to adjust the header with some CSS:
.display.table.table-striped.table-bordered.table-hover.dataTable.no-footer:last-of-type { width: 100px !important;
}

But the header again doesn't match with the first column inside the table:

http://jsfiddle.net/xF8hZ/166/

Any help would be appreciated.

I have just started upgrading an old DT application to use the newest stable release, and at the same time I am upgrading jQuery and moving from Jquery UI to Bootstrap. Rather than migrating my old config, I am starting from scratch to build the interface and pull all libraries and CSS from CDNs, paying attention to using correct versions, and with config and initialization based on DT/TT/Bootstrap examples. I am using DT 1.10.5 and TT 2.2.3 and jQuery 1.11.1.

Most basic things are working, including Bootstrap styling, localization and more. But I am struggling with getting the TT buttons to work. Of course, this is one of the most common problems and questions asked, but I can't seem to identifiy exactly what I am doing wrong. But trying different things, I see some strange behavior. My first question is, what is the difference by doing

var DT = $('#statbyorg').DataTable({
        .......
       "tableTools": {
            "sSwfPath": "http://cdn.datatables.net/tabletools/2.2.3/swf/copy_csv_xls.swf",
            "aButtons": [ ... ]
      }
 });
var TT = new $.fn.dataTable.TableTools( DT);
$( TT.fnContainer() ).insertBefore('div.dataTables_wrapper');

and

var DT = $('#statbyorg').DataTable({
        .......
});
var TT = new $.fn.dataTable.TableTools( DT, {
    "sSwfPath": "http://cdn.datatables.net/tabletools/2.2.3/swf/copy_csv_xls.swf",
            "aButtons": [ ... ]
});
$( TT.fnContainer() ).insertBefore('div.dataTables_wrapper');

I have seen both ways used in examples, but in my case, the second approach does not work. Neither the SWF file is picked up nor the customized buttons.

But in the first case, the SWF file is apparently picked up since the 404 error in the JS console is gone, but nothing happens when clicking the Excel or PDF button I am using. In addition, the interface hangs. Nothing is seen in the console (started by F12 in Chrome).

My application is behind Basic Auth, would this cause a problem with the SWF file hosted externally? Another thing, if I try to grab the SWF file from bash using "GET", I get an HTML error message saying:

The owner of this website (cdn.datatables.net) has banned your access based on your browser's signature (1c249828a24b06ee-ua24)

I am in Amazon AWS. Could this be the problem also when the request is sent from Chrome, not from bash?

I'm trying to disable sorting and pagination on the table but it is not working.

jQuery(document).ready(function($) {
$('#example').DataTable({
"paging": false,
"ordering": false
});
});

The table is functioning, so the jquery scripts are loading but why arent the options taking effect?

<!DOCTYPE html>
<html>
<head>
    <title>FLEET Spreadsheet</title><!-- DataTables CSS -->


     <link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"rel="stylesheet" type="text/css">
     <link href="//cdn.datatables.net/plug-ins/f2c75b7247b/integration/jqueryui/dataTables.jqueryui.css"rel="stylesheet" type="text/css">

    <script charset="utf8" src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script><!-- DataTables -->
    <script charset="utf8" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"type="text/javascript"></script>
    <script charset="utf8" src="https://cdn.datatables.net/plug-ins/f2c75b7247b/integration/jqueryui/dataTables.jqueryui.js"type="text/javascript"></script>
       <!--<link href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css"rel="stylesheet" type="text/css"> jQuery -->

    <style>
    div.container {
        width: 80%;
    }
    </style>

        <script charset="utf8" src="//code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script><!-- DataTables -->
    <script charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"type="text/javascript"></script>
    <script charset="utf8" src="//cdn.datatables.net/plug-ins/f2c75b7247b/integration/jqueryui/dataTables.jqueryui.js"type="text/javascript"></script>
<script type="text/javascript">
     $(document).ready(function () {
         $("#example").dataTable();  });
 </script>

</head>

<body>



    <table  id="example" class="display" >
        <thead>
           <tr>
                <th>DC</th>

                <th>Partition</th>

                <th>POD1</th>

                <th>POD2</th>

                <th>POD3</th>

                <th>POD4</th>

                <th>POD5</th>

                <th>POD6</th>

                <th>POD7</th>

                <th>POD8</th>

                <th>POD9</th>

                <th>POD10</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>ST</td>

                <td>P01</td>

                <td>5</td>

                <td>5</td>

                <td>5</td>

                <td>5</td>

                <td>5</td>

                <td>5</td>

                <td>5</td>

                <td>5</td>

                <td>5</td>

                <td>5</td>

                <td></td>
            </tr>




        </tbody>

        <tfoot>
            <tr>
                <th>DC</th>

                <th>Partition</th>

                <th>POD1</th>

                <th>POD2</th>

                <th>POD3</th>

                <th>POD4</th>

                <th>POD5</th>

                <th>POD6</th>

                <th>POD7</th>

                <th>POD8</th>

                <th>POD9</th>

                <th>POD10</th>
            </tr>
        </tfoot>
    </table>



</body>
</html>

The following code i had used for calling my method to render the data,
I have more than 10 field. I need to make more than two or there drop down for filter the records.
When ever i changes the drop downlist the filter should be happen. I am newer to use datatable. Your suggestion
would be highly valuable to us.

var table;

$(function () {

table = $('#tblAbondmentDetailist').DataTable({
    serverSide: true,
    processing: true,
    ordering: false,
    pagingType: "full_numbers",
    pageLength: 5,
    ajax: {
        url: "/AbondmentDetail/GetAbondmentList/",
        type: "GET"
    },
    columns: [
        { "data": "CustomerEmailId", "orderable": false },
        { "data": "OrderType", "orderable": false }
    ]
});

});

Regards,
Saravanan

I just want to get all the data of a row, by mouseenter on special cells, for saving it in an array for easy access.
But this takes about 2,5 seconds, what is too much for opening popups with detailed informations.

Am I doing something wrong ?

    $('#'+tabellenname+' tbody .showTooltip').on('mouseenter', function(event)
    {
        // Daten der Zelle, Zeile und Spalte auslesen
        var columnIndex =   tableApi.cell( this ).index().column;
        var rowIndex =  tableApi.cell( this ).index().row;
        var spalte =        $(tableApi.column( columnIndex ).header()).text();
        var data = new Array();

        for(var index = 0; index < spaltenArray[tabellenname].length; index++)
        {
            var title = spaltenArray[tabellenname][index];
            if(tableApi.row(rowIndex).data() !== undefined)
            {
                data[title] = tableApi.row(rowIndex).data()[index];
            }
        }
    });

Hi,
I would like to add a button right to the 'Filter' field. I try to use the custom toolbar API but this creates a new toolbar on top of the filter field. I want it to be on the same line.

here is my code:

jQuery('.datatable_custom').dataTable({
"sScrollY": "700px",
"bPaginate": false,
"bScrollCollapse": true,
"bFilter": true,
"bSort": true,
"bInfo": false,
"bAutoWidth": false,
"sDom": '<"H" <"toolbar">fr>t'
});
$("div.toolbar").html('<span style="margin-left: 1em;"><img src="images/b_export_xls.gif" title="{t}Export to CSV{/t}" /></span>');

The real purpose of this is that it seems that dataTable can only export to CSV using Flash. THis has been discussed many times in the forum, but your answer is always to do something on server side, which seems odd. Some very simple JS libraries can do the job (I'm using www.kunalbabre.com/projects/table2CSV.php), So i'd like to 'plug' it on dataTables.
But mabe I haven't found the right post in the forum ?

Thanks

I'm using the TableTools plugin to extract data, this is how I'm initializing it:

var tt= new $.fn.dataTable.TableTools(myTable,{
            "buttons":[
                "copy",
                "csv",
                "xls",
                "pdf",
                {"type":"print", "buttonText":"Print me!"}
            ],
            "sSwfPath":'/Scripts/media/swf/copy_csv_xls_pdf.swf'
        });
        $(tt.fnContainer()).insertBefore("#TABLE_ID_HERE_wrapper");

This works when I have one datatable in the page but as soon as I have 2 or more datatables the buttons don't do anything when clicked, anyone know why this is?

Community,

I have a table with several columns of text and several columns of numbers - all of which are presented using DataTables and FixedHeader.

I dynamically create html <input> tags to serve as filters on the text columns. When an input tag is changed, I would like to use jQuery to fade out the DataTable, apply filters to the data, and then fade back in the table. I have several instances of this sort of thing working, but ran into some problems when integrating in FixedHeader.

When I use the jQuery animation functions with FixedHeader, FixedHeader seems to display the TH overlays when it shouldnt be displayed - that is the FixedHeader top TH is shown, even when the scroll bar is all the way at the top of the screen.

I've made a simple jfiddle which shows the problem.
http://jsfiddle.net/gk33vbgn/10/

Notice that the FixedHeader top TH is shown immediately, but disappears when the scroll bar moves.

What am I doing wrong?

I created a data table on an HTML table with the following code.
$('#ContractsView').dataTable({
"aaSorting": []
});

This runs fine when the table is empty

When this code runs for a table which has rows I get this error:

Unhandled exception at line 669, column 8 in https://localhost:44308/Scripts/jquery.dataTables.js

0x800a138f - JavaScript runtime error: Unable to get property 'className' of undefined or null reference

At this code
/* Classes */
if ( bClass )
{
nCell.className += ' '+oCol.sClass;
}

I have two other html tables which are entered the same way before hand.

$(document).ready(function () {
$('#FundDocsView').dataTable({
"aaSorting" : []
});
$('#PRView').dataTable({
"aaSorting": []
});
$('#ContractsView').dataTable({
"aaSorting": []
});
});

They run with no problem. The ContractsView tables runs fine when there is no data,
but as soon as the table is populated this error occurs
I am confused what would cause this error.

Hi,

After adjusting the Scrolly property, appeared the following message: Uncaught TypeError : Can not read property ' fnFilter ' . Does anyone know what might be happening or how can I solve this problem ?

Thanks!

Hello,

If anyone can point me to a working JSF example for intergrating server side support? The JED website seems to be gone. All I can find is JSP. Searching this forum yields no actual answers from other people also looking for JSF examples.

I would appreciate any help.

Thank you!

Hello everyone,

I use dataTables plugin to show and edit the content of the rows of an invoice.
Before I used Flexigrid plugin to make the same thing and I used to hide the column for the agent commission.

I tried to make the same with DataTables, but I discovered that when I hide that column with column().visibile(false), that column is destroyed and the input tag with the commission info is lost on the POST when I save submitting my form

I hope to have been clear
Any solutions?

Hello, how i do that?
In my case, i have all records in my db with line and page.

Records e.g

id  |  pag  | desc
------------------------
 1  |    1    | Foo
 2  |    2    | Bar
 3  |    1    | Foo Bar
 4  |    1    | Bar Foo
------------------------

Now i need set records to correct page (eg: Record #1 to page 1, Record #2 to page 2, Record #3 to page 1).

Tips?

Hello, if i have a table with lets say a colum that has a data "2" but "2" is a reference on another table like if 2 is Name.
How can i make it display the name an not the number 2..

Table 1 (this is how it displays it)

| Id | name | last_name | area |
| 1 | 23 | 53 | 51 |

table 2

| Id | name_id | name |
| 1 | 23 |Steve |

table 3

| Id | name_id | last_name |
| 1 | 53 | Butabi |

table 4

| Id | area_id | name |
| 1 | 51 |Home |

table 5 ( this is how i want it to be shown)

| Id | name | last_name | area |
| 1 | Steve | Butabi |Home|

thanks...