I added some code to change the background color of certain rows using the fnRowCallBack function. That works fine. However, the row selection highlights no longer work for the rows that have the changed background color. Need some help getting that to work in conjunction with my background color code. Here is my code used to change the row color:

var table = $('#cancel').DataTable( {
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
if ( aData[1].startsWith("H")) {
if ( aData[1].endsWith("VS")) {
$(nRow).css('background-color', 'orange');
}
else if ( aData[1].endsWith("O")) {
$(nRow).css('background-color', 'yellow');
}
else {
$(nRow).css('background-color', 'pink');
}
}
if ( aData[8].length > 0 ) {
$(nRow).css('background-color', 'pink');
}
},
.......
});

The documentation states that "paging and scrolling can both be enabled at the same time if desired". Since there doesn't seem to be any examples of this in the documentation I am hoping some could shed some light on how to implement this?

Hello I'm trying to use this plugin option: https://datatables.net/reference/option/fixedHeader
And it's working, however I would like it to start sticking at a point that is not the top of the scrolling window.

I adjusted the CSS to make the header appear where I want to when it does stick, but I want to adjust the spot when it starts sticking, because the content of the page will be behind a sticky header on the site.

This is the CSS that I have:
table.fixedHeader-floating{position:fixed !important; background-color:white; top:170px !important; }
But how do I also make the script think that 170px from the top is where it should think that it's reached the top of the document.

Here is the live site: http://www.sealanddesign.com/page/fluid-compatibility
As you scroll more and more the table header eventually does "stick" just under the site header, but I want it to start sticking earlier than that. I can't find any options about this FixedHeader plugin that let me adjust that.

Thank you for any advice.

I've just switched over to using DataTables, and I'm really loving its capabilities. So thanks for the excellent software.

My small issue: in my table, the columns don't resize when the window size is changed, unless scrollX is set to true. Is that the expected behavior? My only issue with just setting that to true is that it then makes the rendering of the table too wide for the iPad screen and forces the user to scroll, whereas if I keep scrollX=false and turn on responsive, the table fits fine on an iPad screen, so I'd like to use that if possible (but to have my desktop users have the columns resize automatically on a window size change).

I'm initializing the table like this:

  $(document).ready( function () {
     var table = $('#target_table').DataTable( {
          "scrollX": false,
          "columnDefs": [
                         { "visible": false, "targets": [0] },
                         { "orderSequence": [ "desc", "asc" ], "targets": [ 7, 10, 11 ] },
           ],
          "order": [[ 6, "asc" ]],
      } );

  } );

and working examples are here:

With scrollX = false : http://astro.swarthmore.edu/test/test_scrollx_false.html
With scrollX = true : http://astro.swarthmore.edu/test/test_scrollx_true.html

I also tried adding

   $(window).on('resize', function () {
      table.columns.adjust();
       } );

to the initialization, but that doesn't seem to help; it still requires scrollX = true to work correctly.

Thanks in advance for any thoughts!

I'm trying to figure out how to export only filtered rows in my DataTable but I can't seem to get the right combination of code to work.

This is my table
var table = $('#myTable').DataTable();

This is my filtered data
var visibleRows = $('#myTable tr:visible');

Can anyone help me with how to configure the Excel Export button to just export the "visibleRows"?

Thank you!!

Hi, I want to create a filtering as described here (using only client-side processing) :
- (Filter a value 1 into the first column and a value 2 into the second column and a value 3 into the third column) or (a value 4 into the fourth column and a value 5 into the fifth column and a value 6 into the sixth column) or a value 7 into the seventh column...
--> For a better understanding of the filter, please take a look at the enclosed screenshot.

In my case, AND must have the priority against OR (parenthesis). I managed to create AND filter only (using fnFilter). But I'm stuck to create an OR filter that would take different AND values on different columns.

Is it possible to do this? How should I process?
In advance, thank you.

Hello,

My datatable has positive and negative dollar amounts, for example:

($18,929.00)

I've been able to implement the built-in styles during the Excel button export to remove the $ from the positive numbers, but can someone help me with how to remove the $ from the negative numbers? Ideally, I'd like Excel to display this:

(18,929)

Thank you!!

Guys, I can't print the second footer in <tfoot> tag?
How can I resolve this issue?

Avez-vous suivi tous les projets de collab dans lesquels Beauté et <a href="http://www.eternally.fr/">adidas chaussure</a> Jeunesse ont travaillé cette année? Vous pouvez retourner à travers nos archives et les compter tous dehors, notre vous pourriez juste nous faire confiance que le nombre s est assez grand. Ils ne ralentissent pas non plus. Prochainement est la rivalité de adidas Originals Hi ici, qui a une texture intéressante en cuir galonné en ce qui concerne les bandes latérales sont concernés. Ailleurs, les chaussures utilisent une palette relativement neutre composée de gris, blanc et vert. Obtenez avec nous après la pause pour un meilleur look et restez à l'écoute pour savoir s'ils vont se diriger vers les États.

Une des meilleures parties de la saison des fêtes est le plaisir de la décoration, et surtout les arbres de Noël. Il ya tellement d'éléments traditionnels à choisir, y compris une variété d'ornements, des cannes de bonbons, des lumières, des étoiles et bien sûr, guirlande scintillante. Jeremy Scott capte l'essence de cette corde flamboyante avec les nouveaux adidas Originals JS Holiday Bears, <a href="http://www.eternally.fr/adidas-superstar-c-12/">adidas superstar soldes</a> les remix d'argent et d'or Burl Ives sur le Teddy-fied Metro Attitude avec la fourrure flashy et les semelles brillantes. Ceux-ci tombent en haut des comptes Originals le vendredi 15 novembre, et vous pouvez voir les images officielles sur les Jeremy Scott Glitter Bears après le saut ci-dessous.

Rejoindre l'édition dorée à la vente au détail est bientôt <a href="http://www.eternally.fr/adidas-superstar-c-12/">adidas superstar noir pas cher</a> un Jeremy Scott x adidas Originals JS Silver Bear. Cette coloris JS Bear ne faisait pas partie de la capsule FW13 qui a chuté le 15 octobre, mais après avoir visionné le film en mai, nous savions qu'ils viendraient un jour. Il s'avère que Three Stripes est tout simplement stupéfiant les communiqués pour la saison des fêtes, donc maintenant vous aurez un coup sur le ours en peluche étincelant Metro Attitude avec une semelle d'argent glittery ici en seulement quelques semaines. Découvrez plus de photos ci-dessous afin de décider si l'argent prend la première place et soyez prêt quand ils seront diffusés le 15 novembre chez des détaillants comme Oneness.

En plus de la capsule qui <a href="http://www.eternally.fr/adidas-zx-flux-c-65/">adidas zx flux pas cher</a> a frappé les comptes Originals au milieu du mois dernier, Jeremy Scott a plus de collaborations adidas sneaker sur le chemin pour la saison des Fêtes. Ici, nous voyons un motif familier revisité, comme le métro Attitude tourné ours en peluche accueille un nouvel Jeremy Scott x adidas Originals JS Gold Bear. Ceux-ci sont faits avec la langue d'ours en peluche avec le même matériau de fourrure scintillante qui couvre toute la partie supérieure, et son effet scintillement même porte sur la semelle de gomme. Ceux-ci sont à venir avec une date de sortie le 15 Novembre, alors cliquez pour voir plus de sorte que vous savez ce qui est en magasin pour vous bientôt dans les magasins comme Oneness.

Les marchandises du stade ont tout à fait l'2016. Non seulement la boutique de consignation a ouvert ses portes, mais ils ont également eu quelques ventes incroyables qui étaient remarquables (vous pouvez lire plus sur leurs articles les plus vendus ici). Le Stadium Goods Journal a publié une nouvelle fonctionnalité aujourd'hui dans laquelle ils détaillent leurs 50 meilleures ventes chaussures tout au long de 2016. Vous ne devriez pas être surpris par tous les adidas NMD, Yeezy Boost, et Jordan Retros sur cette liste, mais l'ordre dans lequel ils ont vendu Devrait certainement apporter quelques surprises le long du chemin. Vérifiez les 50 chaussures les plus vendues des marchandises Stadium ci-dessous. Et vous pouvez acheter les 2016 Stadium Goods Top Sellers.

La bataille contre les <a href="http://www.eternally.fr/adidas-zx-flux-c-65/">adidas zx flux solde</a> faux baskets infiltrant le marché secondaire continue. Une expédition qui provenait de la Chine a été saisie récemment par le bureau national des douanes du Chili le 7 novembre. Les documents personnalisés de l'expédition évaluaient la totalité de l'envoi à 24 209 $, mais le Bureau national des douanes du Chili estime que la valeur réelle est d'environ 31 786 395 $. Les fausses chaussures, qui comprenait la contrefaçon Nike, adidas, et une autre marque Zodiak, a été dissimulé sous des paquets de serviettes. Un total de 16 454 paires de chaussures contrefaites réparties en 474 boîtes ont été saisies.

When i change the show count value, while on the last page, results in a blank page being added to the page display. & If the last page is selected "No records were found" is displayed and showing count is outside of the range of available records.
"Showing 151 to 144 of 144 records"

Dear all,

we have a DT and DT Editor in place. The content of the DT is dynamically updated subject to a selection made in a dropdown box (price list number - itpl_id). We use myTable.ajax.url(ajax_url + "&itpl_id=" + itpl_id).load(); for that.

Unfortunately there seems to be no documented api method in order to do the same with the DT editor ajax url. This means when we update a line for a pricelist id (itpl_id) other than the one we have created the myEditor object, it will disappear until we reselect a new itpl_id from the dropdown menu in order to update myTable.

Is there any (hidden) method we can use in order to modify the DT Editor ajax url? Thanks for your help in advance!

Kind regards,
Oliver

I use datatables with show extra / detailed information
In the fonction format(d), I have include this code to use request asynchrone script
'<tr>'+ '<td>Extra info:</td>'+ '<td>'+asynchrone_tri(d.id)+'</td>'+ '</tr>'+

and this is my asynchrone fonction
function asynchrone_tri(id) { var data = null; // Instanciation grâce au browser getXhr(); // On ouvre une requêtre asynchrone : 'true' xhr.open('POST', '../thumbails/thumbails0.php', true); // Fonction appelée quand la requête change d'état xhr.onreadystatechange = function() { // Si la requête est terminée if (xhr.readyState == 4) // Si la réponse ne contient pas d'erreur if (xhr.status == 200) { alert(xhr.responseText); return xhr.responseText; } //else // Erreur //document.getElementById("liste_agences").innerHTML = 'Erreur serveur !'; } xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // On envoie la requête // n=document.getElementById("n").value; data = "idplanches=" + id + "&reportvisible=true"; xhr.send(data); }

But in my table, I have a "undifined" value in the td.

Can you help me, please?

I need to set a page number with the api myGrid.page(pageNumber).

I saw in the code this comment:

• Note that if you attempt to show a page which does not exist, DataTables will
• not throw an error, but rather reset the paging.

I need to set a page number even if not exists, because I process the start elements from the server side.

Is there any way to do this?

Thanks.

i have been modifying a datatable to add a child row - as the number of fields displayed was making the row a bit cluttered - much better now !

Most elements of the child row are links to related pages, each with a back button to my main page.

what i would like to do is retain the child row in its open state when going back to the page.

using information in another thread

https://datatables.net//forums/discussion/comment/88178/#Comment_88178

I can store the indexes of the open child rows in an array, and use localStorage to retain the values

on initComplete i am using the values stored in localstorage to show the child rows, but i cannot get the class of the open row to display as 'shown'

code to store open rows...

        var openTableRows = JSON.parse(localStorage.getItem('openRows'));

$('#example tbody').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');

            rowIndex = row[0][0];
            var idx = openTableRows.indexOf(rowIndex);
            openTableRows.splice(idx, 1);
            localStorage.setItem('openRows', JSON.stringify(openTableRows));
            //console.log(JSON.parse(localStorage.getItem('openRows')));

    }
    else {
        // Open this row
        row.child( format(row.data()) ).show();
        tr.addClass('shown');

            rowIndex = row[0][0];
            openTableRows.push(rowIndex);
            localStorage.setItem('openRows', JSON.stringify(openTableRows));
            //console.log(JSON.parse(localStorage.getItem('openRows')));
    }
} );

code to re-open previously open rows...

initComplete: function ( settings, json ) {

        var table = $('#example').DataTable();
        table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
        openRows = JSON.parse(localStorage.getItem('openRows'));
        openRows.forEach(function(entry) {
        var tr = entry;
        var row = table.row(tr);
        row.child(format(row.data())).show();
        })
        })

        }

if I add tr.addClass('shown'); to the block above, i get error tr.addClass is not a function

Dear Sir

With due to respect that i beg to say that i am facing problems then to fetch upto 5000 rows to produces error.
Please you told about it. i want to fetch from 5000 to 500000 rows.

Regards & Thanks
Fateh Chand Rana

I'm using the select plugin on a table and have logic which triggers based on how many rows the user has selected.
The possibilities are: No Rows, One Row, and Multiple Rows
I was triggering my logic off of the 'Select' and 'Deselect' events, but this causes a problem when I select a new row while another is already selected. The deselect and select events both fire, triggering two of my conditions back to back. I fixed this problem by adding my own 'Select-Done' event to the code, and think it might be nice feature to officially have in the code.

Hi.
I tried create table with pagination with Ajax - Server-side processing
** I get json data :-
{"recordsTotal":56,"recordsFiltered":4,
"table_data":[{"stud_id":"1","stud_name":"ABC","class":"1"},{"stud_id":"5","stud_name":"PQR","class":"2"},{"stud_id":"6","stud_name":"LMN","class":"3"},{"stud_id":"10","stud_name":"XYZ","class":"1"}] }

** but at the html side it shows
Showing 1 to 4 of 4 entries (filtered from 56 total entries) and data row as "No Matching Records Found"

** My datatable code as :
$('#datatable_info').DataTable({dom: "Bfrtip",
"processing": true,
"serverSide": true,
"ajax": {
url,
"dataSrc": ""
},

        buttons: [{extend: "copy", className: "btn-sm"}, {extend: "csv", className: "btn-sm"},
            {extend: "excel", className: "btn-sm"}, {extend: "pdf", className: "btn-sm"},
            {extend: "print", className: "btn-sm"}], responsive: !0,
        "order": [[0, 'desc']],

"aoColumns": [
{'mData': "table_data.stud_id"},
{'mData': "table_data.stud_name"},
{'mData': "table_data.class"}
],
});

*** I need help for creating table which
1: load data with AJAX Server-side processing
2: pagination which load 10 records at start & load next / previous 10 records on button click previous 1 2 3 .. 10 last

Thank You.

In editor.bootstrap.js, the code adds CSS class form-control to inputs with type="text" but not other inputs like email/password/number/....

Replace:

// For each instance we need to know when it is opened
dte.on( 'open.dtebs', function ( e, type ) {
    if ( type === 'inline' || type === 'bubble' ) {
        $('div.DTE input[type=text], div.DTE select, div.DTE textarea').addClass( 'form-control' );
    }
} );

Replace with:

// For each instance we need to know when it is opened
dte.on( 'open.dtebs', function ( e, type ) {
    if ( type === 'inline' || type === 'bubble' ) {
        $('div.DTE input:not([type=checkbox]):not([type=radio]), div.DTE select, div.DTE textarea').addClass( 'form-control' );
    }
} );

Hi,

i have a datatable where i define on TH a class "not-visible" if the column should be hidden.
This visibility class is set based on some conditions.

I am also using statesave, so users keep the search etc.

The problem is, when the state is saved and "not-visible" is changed, these columns behave strangely.

What would be a proper way to handle this scenario?

Hello,

I'm trying to set css background on row class "odd" and "even".

My problem: I have some rows with class "inactives" which souldn't be affected because they are not always displayed and have a specific css style.

My question is: Is this possible to set css on "odd" and "even" class but not the ones with "inactives" class?

The datatable can be reordered with different columns so I can't find a way to do this in javascript.