jQuery Datatable javascript on links not working with multiple pages

Question

I am having an issue with jQuery's Datatable plugin... I have filled a table, and a specific column has cells looking like this:

<a href="26" name="PO">12</a>

I have prevented the onclick event and it triggers this code:

$( 'a[name="PO"]' ).click(function(){
            event.preventDefault();
            var POid = $( this ).attr('href');
            var element = $( this );
            $( '<div id="Dialog">\
                <p class="error"></p>\
                <p style="text-align:center;" class="main">Entrez le P.O. associé à la commande</p>\
                <input type="text" class="POprompt"/>\
                </div>').dialog({
                resizable: false,
                height: 'auto',
                width:'400',
                modal: true,
                title: 'Ajout d\'un PO',
                show: 'blind',
                hide: 'drop',
                buttons:{
                    "Sauvegarder":function() {
                        $('.error').css('color','FF0000');
                        var prompt = $('.POprompt').val();
                        if (!isNaN(parseInt(prompt)))
                        {
                            $.post('setPO.php',{'PO':prompt,'id':POid},function(data)
                            {
                                element.text( prompt );
                                $('.main').css('color','#0F0');
                                $('.POprompt').css('visible','false');
                                $('.main').text("L\'ajout a été effectué avec succès.")
                                $( this ).dialog( "close" );
                                $('.error').text("");
                                $('.error').css('color','#FFF');
                            });
                        }
                        else
                        {
                            var error = $('.error');

                            error.text("Veuillez entrer des chiffres seulement.");
                            error.addClass( "ui-state-highlight" );
                            setTimeout(function() {
                                error.removeClass( "ui-state-highlight", 1500 );
                            }, 1000 );
                        }
                        $('.error').css('color','FF0000');
                    },
                    "Annuler":function() 
                        {
                            $( this ).dialog( "close" );
                        }       
                }
            } );
        });

But when I go on page 2 or 3, or when I sort results and click on that cell link but that the row was generated in another page than the first one, the javascript does not trigger.

Anyone has an idea? Thanks a lot in advance guys, and have a nice day.

Richard · Accepted Answer · 2013-05-23 13:51:40Z

5

I realize that this question has been answered, however, it's incomplete and with all due respect possibly wrong. The issue with the mutipage datatable is that the initial selector is rendered useless with the user clicks on ANY of the pages other than the default first page. This is because dataTable does some horrible things to the DOM in order to render the table. This has the side effect of disabling your click handler.

The good news is that there is a way to handle this other than listing ALL elements.

instead of...

$( 'a[name="PO"]' ).click(function(){

try this:

$( "#dataTable tbody" ).on('click', 'a[name="PO"]', function(){

Read this jquery page ( on() ) and look for the section on deferred selectors.

answered May 23, 2013 at 13:51

Richard

10.7k10 gold badges47 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Burak Tamtürk · Accepted Answer · 2012-07-25 16:08:26Z

2

Because when the javascript insert element to document it doesn't have onclick. jQuery will not add onclick to them, automatically.

Solution: Call this script every time data loaded (when user changes page or sorts table).

answered Jul 25, 2012 at 16:08

Burak Tamtürk

1,2398 silver badges19 bronze badges

Comments

Jeff Noel · Accepted Answer · 2013-01-04 14:04:57Z

I finally got everything to work fine by adding this:

"bLengthChange": true,

to my datatable declaration.

I also modified the <select> options, adding a "show all" option which loads all the rows by default, but only shows 5 rows on pageload since I set "iDisplayLength": 5. Here is how to add a "show all" value to your length select input (sum):

$(document).ready(function(){
    $('table').dataTable({
        "bLengthChange":true,
        "bFilter":true,
        "iDisplayLength": 5,
        "sDom":'<"H"lfr>t<"F"ip>',
        "oLanguage":{
            "sUrl": "dataTables.txt"
        }
    });
});

The text file contains all your translations (if you need them) and your custom SELECT:

{
    "sProcessing":     "Processing...",
    "sLengthMenu": "Show <select><option value=-1>INFINITE</option></select> results"
}

Note: of course I added other options to my select AND datatable declaration, it is just easier to read this way. The value=-1 part is how to get javascript to load on ALL rows/cells.

Thanks to the guys who tried helping me out, both of your answers were useful to me!

Collectives™ on Stack Overflow

jQuery Datatable javascript on links not working with multiple pages

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related