Puzzled - when I add TableTools, my existing page stops working

Puzzled - when I add TableTools, my existing page stops working

marcwmarcw Posts: 18Questions: 4Answers: 0
edited November 2012 in DataTables 1.9
I had a lovely page, with advanced pagination and search - close to 1,000 rows all being sorted/filtered client-side.
Then I thought I'd add TableTools to have the export options.
I copied the initialisation code from the example - and the table reverted to a single long table again, no search, sort or pagination.
I have DataTables installed in a directory on my server referenced as /lib where I keep all the javascript code.
I'm assuming that I've got the paths confused somehow- unless TableTools is incompatible with advanced pagination?

I have:










If my initialisation section looks like:


$(document).ready(function() {
$('#clients').dataTable( {
"sPaginationType": "full_numbers",
"bFilter": true
} );
} );


It works fine, debug says 1 table. (tag=ifukiz)


If I change it to:

$(document).ready(function() {
$('#clients').dataTable( {
"sPaginationType": "full_numbers",
"bFilter": true,
"sDom: 'T<"clear">lfrtip'
} );
} );


It doesn't include the TableTools functionality *or* the original sorting/paging.

What basic idiot mistake am I making?

debug says:

DataTables 1.9.4 Up-to-date
AutoFill Not installed
ColReorder Not installed
ColVis Not installed
FixedColumns Not installed
FixedHeader Not installed
KeyTable Not installed
Scroller Not installed
TableTools 2.1.4

But it also says: 0 tables.

Eh?

Replies

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Probably a Javascript error. Can you link us to the page please? Also, I'd suggest loading zero clipboard before TableTools.

    Allan
  • marcwmarcw Posts: 18Questions: 4Answers: 0
    I can't link you to the page because it's a passworded admin page with confidential data.

    I'll try changing the order as you suggested, to see if it makes a difference.

    But the only Javascript on the page is cribbed directly from the TableTools site.
  • marcwmarcw Posts: 18Questions: 4Answers: 0
    Hmm. I changed the load order. Made no difference.

    I've produced a "safe" version of the site...

    It has the same number of rows etc but the content is redacted.
    If you go to www.lane3.co.uk/mqha

    and log in with TEST1 and JSDEBUG, you can see the page as it should be (but without TableTools).
    Log in with TEST2 and JSDEBUG and you can see the failed version.
    It's probably something *really* simple and stupid, but I've worn out my eyeballs trying to see what's different from the version in the example.
    I
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Did you look at the console in your browser? The page that doesn't work has a Javascript error:

    > a-menu.html:56 SyntaxError: Expected an identifier but found 'clear' instead

    You are missing a quote from sDom.
  • marcwmarcw Posts: 18Questions: 4Answers: 0
    Ah, that fixed it, thanks. I knew it would be something simple and stupid.

    Mind you, Firebug in Chrome didn't apparently spot it- nothing in the console.
    Opera fared a bit better.
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Showed up in Chrome and Firebug for me. However, good to hear it is working now.

    Allan
  • marcwmarcw Posts: 18Questions: 4Answers: 0
    edited November 2012
    Ah. Spoke too soon. It's now displaying the buttons, but not doing anything with them.
    Except if I press the "PRINT" button, when it pops up what looks as though it's going to be a dialog and then loses the pagination feature.

    Opera says: "unhandled DOMException: SYNTAX_ERR, apparently in jQuery.

    I'm going to switch to the un-minified version of jQuery to see if it makes anything clearer.

    OK. At line 5163 in jquery-1.7.2.js, it doesn't like the line:
    return makeArray( context.querySelectorAll( "[id='" + nid + "'] + query ), extra );

    Does it need a specific version of jQuery?

    Or does it not need jQuery at all? Your example pages don't seem to load jQuery; is it bundled in, and I'm getting some sort of conflict?
  • marcwmarcw Posts: 18Questions: 4Answers: 0
    edited November 2012
    Ah. It does more than just display (half a) dialogue and lose the pagination- it's lost the rest of the page! It's just showing me the table (without paging or search, but with sort icons).

    "Curiouser and curiouser", said Alice.

    Ah. I see- that's (part of) what it's meant to do- it just doesn't finish the prompt display.

    And ESC gets it back to the main display- so Print *nearly* works.
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Hi,

    > Does it need a specific version of jQuery?

    1.4.2 onwards, so your 1.7 will do nicely.

    The problem at the moment (when I login as TEST2) is:

    [quote]
    Failed to load resource: the server responded with a status of 404 (Not Found) http://www.lane3.co.uk/mqha/media/swf/copy_csv_xls_pdf.swf
    [/quote]

    So the SWF file needed for the exporting is not in place. Very odd that Chrome isn't telling you that - it pops up for me in Inspector's console immediately :-).

    Two options to get this working:

    1. Put the file into that path
    2. Use the sSwfPath parameter to tell TableTools where the file actually is: http://datatables.net/release-datatables/extras/TableTools/swf_path.html

    > Ah. It does more than just display (half a) dialogue and lose the pagination- it's lost the rest of the page! It's just showing me the table (without paging or search, but with sort icons).

    That's more or less what the Print display option in TableTools does. It alters the page layout to be suitable for prating the page. Actually doing the printing is up to the user. A print view is considered to be the page without pagination, or any other elements on the table, other than the table itself (the header is needed of course, so sorting remains).

    > so Print *nearly* works.

    The text in the Print dialogue is white for some reason on your page - so it can't be seen. It looks like the `.DTTT_print_info` class has `color: white` . Set it to #111 or black or whatever and you should be able to see the text.

    Regards,
    Allan
This discussion has been closed.