DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Installation problem with datatables server side processing and wordpress 3.0

Installation problem with datatables server side processing and wordpress 3.0

dingodingo Posts: 23Questions: 0Answers: 0
edited July 2010 in General
Hello,

I have a problem to install datatables on my Wordpress site. PHP and jquery are complete new to me.

I am using Wordpress 3.0 and the Thesis theme, Thesis supports jquery. When I set up a new static page on wordpress there is a box to enable jquery for the page. Wordpress opens jquery hosted at google. This works, at least I see the connection in the sourcecode of the page.

Wordpress is installed via xampp at localhost, so I cannot give you a link to the site.

Datatables should open data from a mysql database on a diffrent server, and show this data like on this page:
http://www.datatables.net/examples/data_sources/server_side.html

What I have done by now:

- Downloaded datatables, and saved it to the root directory of my site: (http://loalhost/wordpress/dataTables-1.6 2)

- Edited the file (http://localhost/wordpress/dataTables-1.6 2/examples/examples_support/server_processing.php)
In this file I have added the "Database connection information" (user, password, db, server) and removed the line below this information according to the instructions in the file. I have tested the connection to the database, so I am 100% sure that this works.

- Saved the server_processing.php file.

- Set up a new static page at Wordpress, enabled jquery support and added the initialisation code:
(There is a special box called "add your own javascript", there is the initialisation code.)

[code]
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../examples_support/server_processing.php"
} );
} );[/code]


Please, can you help me, where is the problem?

Thank you very much.

dingo
«1

Replies

  • allanallan Posts: 63,150Questions: 1Answers: 10,404 Site admin
    If you look at Firebug when the XHR to get the data is executed, what does it show? Does it show a 404 error perhaps? Or a server error, or something else?

    Allan
  • dingodingo Posts: 23Questions: 0Answers: 0
    Hello allan,

    Thank you for your answer.

    I know firebug, but not how to check the XHR with it, sorry!

    Will donate now! ;)
  • dingodingo Posts: 23Questions: 0Answers: 0
    Here is a screenshot of my Website:

    The initialasation code is visible on the page. This is also not normal for sure...

    http://img841.imageshack.us/img841/241/bildschirmfoto20100718uq.png
  • dingodingo Posts: 23Questions: 0Answers: 0
    You should have the donation now.

    This is the source code of the wordpress page:

    [code]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



    Konrad




    <!--[if lte IE 8]><![endif]-->








    .recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}






    Home
    Konrad
    Subscribe



    Konrad
    Ein weiterer WordPress-Blog







    Konrad
    [edit]







    Comments on this entry are closed.







    Get smart with the Thesis WordPress Theme from DIYthemes.
    WordPress Admin



    <!--[if lte IE 8]>

    <![endif]-->



    $(document).ready(function() {
    $('#example').dataTable( {
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "../examples_support/server_processing.php"
    } );
    } );



    [/code]
  • allanallan Posts: 63,150Questions: 1Answers: 10,404 Site admin
    Hi dingo,

    Thanks for the donation :-)

    To check the XHR in Firebug, open Firebug and look at the 'console' tab. Any remote requests will show up there.

    However, I doubt there will be one at the moment, based on your screenshot and HTML. The Javascript code most certainly shouldn't be shown on the page! The code needs script tabs around it. Something like:

    [code]

    $(document).ready(function() {
    $('#example').dataTable( {
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "../examples_support/server_processing.php"
    } );
    } );

    [/code]
    I've never used WordPress, so I'm not entirely sure how it operates, but it could be as simple as just putting those script tags in place.

    Regards,
    Allan
  • dingodingo Posts: 23Questions: 0Answers: 0
    Hi Allan,

    Added the javascript tags to the code and it is no more to see on the page. First problem solved. :)

    Here you can see the firebug error message:

    http://img197.imageshack.us/img197/4741/bildschirmfoto20100718u.png




    In my opinion there is a problem with the directories of the server_processing.php file.

    In the initialisation code we have this directory: [code]"sAjaxSource": "../examples_support/server_processing.php"[/code]

    But the file "server_processing.php is located at: http://localhost/wordpress/dataTables-1.6 2/examples/examples_support/server_processing.php

    Anyway, this is just my newbie-view of the problem :)
  • allanallan Posts: 63,150Questions: 1Answers: 10,404 Site admin
    That error shows that the function $().dataTable does not exist, which suggests that you haven't included the DataTables JS source. Indeed looking through the HTML I don't see it anywhere!

    So along with your initialisation code you'll need to include DataTables itself. Something like:

    [code]

    [/code]
    will hopefully get around that hurdle.

    Allan
  • dingodingo Posts: 23Questions: 0Answers: 0
    edited July 2010
    Included the code: still not working. But there is no error to see in the firebug console!

    Hmmm.. This is the new source code:



    [code]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



    Konrad




    <!--[if lte IE 8]><![endif]-->








    .recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}






    Home
    Konrad
    Subscribe



    Konrad
    Ein weiterer WordPress-Blog







    Konrad
    [edit]







    Comments on this entry are closed.







    Get smart with the Thesis WordPress Theme from DIYthemes.
    WordPress Admin



    <!--[if lte IE 8]>

    <![endif]-->





    $(document).ready(function() {
    $('#example').dataTable( {
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "../examples_support/server_processing.php"
    } );
    } );





    [/code]
  • dingodingo Posts: 23Questions: 0Answers: 0
    Now a new error in the console:

    http://img62.imageshack.us/img62/4741/bildschirmfoto20100718u.png
  • allanallan Posts: 63,150Questions: 1Answers: 10,404 Site admin
    document.observe is a Prototype.js method. Are you using prototype in your code at all? It's not something that appears to be included in your HTML nor is it something that is included in the DataTables package...

    Does the table now initialise and say that there is no data, and show the 'processing' indicator? You've got jQuery, you've got DataTables and you got a table... actually looking at your code you don't...

    You've got jQuery doing $('#example')... but there is no element with an ID of example, never mind it being a table! Have a look at the example code on this page: http://datatables.net/examples/data_sources/server_side.html

    You need to put the HTML table in where you want it with the required number of columns etc.

    Allan
  • dingodingo Posts: 23Questions: 0Answers: 0
    Sorry for the many questions Allan... ;)

    But I dont understand what you mean.

    As I see it: jQuery is OK, DataTables is OK, but there is no HTML table on my site.

    Now I put this HTML Code, (changed according to the fields in my MySQL database) on the wordpress page and it should work.

    Is this what mean with the previous post?

    [code]



    Rendering engine
    Browser
    Platform(s)
    Engine version

    CSS grade




    Loading data from server





    Rendering engine
    Browser
    Platform(s)
    Engine version
    CSS grade




    [/code]
  • allanallan Posts: 63,150Questions: 1Answers: 10,404 Site admin
    Yes that is what I meant.

    When you now load the page it should initialise that table (you can tell if it has done so since DataTables will add the filtering input, etc). When it does that it will also send out an XHR request (which you will see in the firebug console) asking the server for data. Is that happening?

    Allan
  • dingodingo Posts: 23Questions: 0Answers: 0
    This is not happening.

    Please see the Firebug console screenshot:

    http://img805.imageshack.us/img805/4741/bildschirmfoto20100718u.png
  • allanallan Posts: 63,150Questions: 1Answers: 10,404 Site admin
    Actually - I'd say that was good progress. DataTables is being initialised, and correctly sending out the XHR. However, it's pointing at the wrong place for the file, which is why it's getting a 404 no found error.

    That means your path "../examples_support/server_processing.php" is wrong.

    Perhaps it should be: /konrad2/dataTables-1.6/examples/examples_support/server_processing.php ? Not sure on the set up of your server/paths, so this might not be quite right.

    Allan
  • dingodingo Posts: 23Questions: 0Answers: 0
    Allan, I really hope we get to an end with this installation.

    Path is changed, no 404 error now, but a new one:

    http://img204.imageshack.us/img204/4741/bildschirmfoto20100718u.png

    "Could not select database kontab"

    kontab is the name of the table into the database. ;)
  • allanallan Posts: 63,150Questions: 1Answers: 10,404 Site admin
    That would suggest that your PHP installation isn't able to talk to your SQL database for whatever reason. It might be authentication, it might be something to do with PHP - I'm not sure :-). Server-side errors like this probably aren't possible to diagnose remotely like this, but I'd suggest checking that you have the right user name and password - also the right host and the correct privileges to access the db.

    Once this server-side error is taken care of, you should get information from the database put into the array and returned. You could try adding mysql_error() to my "Could not select database" string - which should give you a little bit more information to go on.

    Allan
  • dingodingo Posts: 23Questions: 0Answers: 0
    Ok, I have checked the MySQL host, username, password etc... this is all okay...

    But I believe this is now a small problem.

    What I dont understand is, you have no field for the database name, only for the table name. Is this correct?

    Thank you so much for your great help and patience with a newbie!!


    Regards

    dingo
  • allanallan Posts: 63,150Questions: 1Answers: 10,404 Site admin
    Hi dingo,

    You need to modify all of the following information:

    [code]
    $aColumns = array( 'engine', 'browser', 'platform', 'version', 'grade' );

    $sIndexColumn = "id";

    $sTable = "ajax";

    $gaSql['user'] = "";
    $gaSql['password'] = "";
    $gaSql['db'] = "";
    $gaSql['server'] = "localhost";
    [/code]
    The db name and the table name are both in there and required. Certainly without a db name it won't be able to connect to the db :-)

    Does mysql_error() show anything interesting?

    Allan
  • dingodingo Posts: 23Questions: 0Answers: 0
    edited July 2010
    Hi Allan,

    This is my code:

    [code]
    $sIndexColumn = "id";

    $sTable = "ajax";

    /* Database connection information */
    $gaSql['user'] = "USERNAME";
    $gaSql['password'] = "PASSWORD";
    $gaSql['db'] = "TABLE-NAME";
    $gaSql['server'] = "SERVER OF DB";
    [/code]

    You write I should include the db name AND the table name. Whats the field "db" in the above code for? I think it is the table name?

    But where to put the db name?

    By now this part was not in the file: (!)
    [code]
    $sTable = "ajax";
    [/code]

    I was not able to get the mysql_error() working.
  • dingodingo Posts: 23Questions: 0Answers: 0
    My database has 33'968 entries. Could this be the problem? (Too many entries)
  • allanallan Posts: 63,150Questions: 1Answers: 10,404 Site admin
    It should be as follows:

    [code]
    $sIndexColumn = "id";

    $sTable = "TABLE-NAME";

    /* Database connection information */
    $gaSql['user'] = "USERNAME";
    $gaSql['password'] = "PASSWORD";
    $gaSql['db'] = "DATABASE NAME";
    $gaSql['server'] = "SERVER OF DB";
    [/code]
    Also, 34'000 records won't be a problem. It should cope with many millions!

    Allan
  • dingodingo Posts: 23Questions: 0Answers: 0
    This is the new error in the console :(

    http://img827.imageshack.us/img827/593/bildschirmfoto20100718uz.png

    I dont believe all this...
  • allanallan Posts: 63,150Questions: 1Answers: 10,404 Site admin
    It's quite complex to do what you are trying to do - but progress is being made :-)

    What is the name of your database, and what is the name of your table? Does the 'ajax' table exist if you look at it through your SQL manager interface (phpMyAdmin for example).

    Allan
  • dingodingo Posts: 23Questions: 0Answers: 0
    Allan,

    There is no table "ajax", for sure.

    The name of the database is "rozuch_konrad"

    The name of the table inside the db is "kontab"

    I have all this data added to the file according to your instructions. This is 100% correct.


    To be sure that is not a connection problem to the database (hosted on another server) I have copied the database and stored it locally. The error message in the console is still the same.
  • allanallan Posts: 63,150Questions: 1Answers: 10,404 Site admin
    The SQL error message seems to suggest that you've asked for the table 'ajax' somewhere.

    I presume you now then have:

    $sTable = "kontab";
    $gaSql['db'] = "rozuch_konrad";

    With that are you still getting the same error? I'd suggest making a simple PHP script which will make the connection and do a simple 'SELECT', echoing out the results. This will take DataTables out of the equation, as it appears to be a db connection issue at the moment which needs to be resolved, or perhaps just different usage of the demo script.

    Allan
  • dingodingo Posts: 23Questions: 0Answers: 0
    Yes, exactly this is my code now:

    $sTable = "kontab";
    $gaSql['db'] = "rozuch_konrad";

    Dont know what you mean exactly with the PHP script.

    Thank you again for the help by now!
  • dingodingo Posts: 23Questions: 0Answers: 0
    Now the console shows sometimes this:

    uncaught exception: [Exception... "'[JavaScript Error: "json is null" {file: "http://localhost/konrad2/dataTables-1.6/media/js/jquery.dataTables.min.js" line: 291}]' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x80570021 (NS_ERROR_XPC_JAVASCRIPT_ERROR_WITH_DETAILS)" location: "native frame :: :: :: line 0" data: yes]
  • allanallan Posts: 63,150Questions: 1Answers: 10,404 Site admin
    I think it's safe to ignore that console warning for now - bigger fish to fry...

    Try this little PHP script:

    [code]
    <?php
    $sTable = "kontab";

    $gaSql['user'] = "XXXXXXXXX";
    $gaSql['password'] = "XXXXXXXXX";
    $gaSql['db'] = "rozuch_konrad";
    $gaSql['server'] = "localhost";


    $gaSql['link'] = mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password'] ) or
    die( 'Could not open connection to server: '.mysql_error() );

    mysql_select_db( $gaSql['db'], $gaSql['link'] ) or
    die( 'Could not select database '. $gaSql['db'].": ".mysql_error() );

    $result = mysql_query( "SELECT * FROM ".$sTable, $gaSql['link'] )
    or die ("Couldn't select from database: ".mysql_error() );

    echo mysql_num_rows( $result )." rows selected";
    ?>
    [/code]
    It will test the connection to your database. If it doesn't work, then it's the DB connection that is going wrong somewhere. You need to change the user name and password ("XXXXXXXXX") obviously :-). Load it in a web-browser and let me know what is displayed on screen.

    Allan
  • dingodingo Posts: 23Questions: 0Answers: 0
    Hi Allan,

    thank you for the script!

    I will try this tomorrow and let you know the result.

    My girlfriend is at home now, cannot sit in front of the computer now, otherwise she will kill me! :)


    Thank you

    Regards

    dingo
  • dingodingo Posts: 23Questions: 0Answers: 0
    Hi Allan,

    Loaded the script into firefox, please see the screenshot here:

    http://img826.imageshack.us/img826/4008/bildschirmfoto20100719uk.png

    I think goodnews, right? :)
This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.