Display problems on Joomla 4 site
Display problems on Joomla 4 site
nigelf
Posts: 7Questions: 1Answers: 0
I am trying to use DataTables on a Joomla 4 site, but there are a couple of problems with the display of the data.
As recommended on other threads on this forum, I am using the Joomla Sourceror plugin to facilitate the input of code on the relevant page. I have also selected the required DataTables components from your "Download" page, and have included them in the code for the relevant page, using the "CDN" method. I have also added the following PHP code, within the <source> tags on the page:-
header("Content-Type:application/json");
try {
$database_name = '****';
$database_user = '*****';
$database_password = '*****';
$database_host = 'localhost';
$pdo = new PDO('mysql:host=' . $database_host . '; dbname=' . $database_name, $database_user, $database_password);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES,false);
$sql = 'select
id,
number,
registration,
date
from details_table';
$stmt = $pdo->prepare($sql);
$stmt->execute();
$data = [];
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
$data[] = $row;
}
$response = [];
$response['data'] = $data;
echo json_encode($response, JSON_PRETTY_PRINT);
} catch (PDOException $e) {
echo 'Database error. ' . $e->getMessage();
}
The result is that the correct data is shown, but in the format shown on the "Ajax" tab on this page (and not in the properly formatted version shown above on the page):-
https://datatables.net/examples/ajax/objects.html
So, I conclude that the mechanics of obtaining the data are functioning correctly, but the presentation is faulty.
The second problem also relates to the presentation. On the site pages, the main content occupies the left column of the display (about two thirds of the total width), with the site menu in the right hand column. However, on the page that contains the DataTable, the whole of the right hand column has been placed at the top left of the page (directly under the page header), compressed to a very narrow width; with the main content below. The result naturally looks like a mess!
Does anybody have any suggestions for resolving these problems?
Thanks in advance for any assistance or suggestions.
Nigel
Answers
Hi Nigel,
Can you give me a link to the page showing the issue please? I'm not sure what you mean that the correct data is shown (i.e. the DataTable displays as expected?), but that the format is shown differently?
I'd need a link to a page showing the issue for the second one as well. Sounds like a CSS layout issue.
Allan
Hello Allan,
Thanks for your very prompt response!
The site is:-
https://j4.sax1g.com/index.php
The page with the problem is:-
https://j4.sax1g.com/index.php/about-red-white/fleet-details-3
When I say that "..the correct data is shown.." I mean that the values extracted from the database, and displayed on the page, are correct - but the display is in "Ajax format". For example:-
{ "data": [ { "id": 1, "fleet_no": "R165", "registration": "GAX1C", "date_new": "9\/65" }, ...
The display issue only affects that page (Fleet details 3).
Thanks again for your help.
Nigel
That second link ahs this error:
Datatables requires jquery.js. Also whole page is formatted incorrectly. For example:
You might be missing more than just jquery.js.
Kevin
Looking at the HTML source for the page, you do (now?) have jQuery being loaded, but you do so after loading DataTables. Do it before.
Also, you are loading the DataTables Javascript twice:
and
Loose the second one (same with the CSS).
Next you have:
But there is no element with an id of
#example. There doesn't actually appear to be a<table>tag anywhere on the page.Allan
Hello Alan, hello Kevin,
Thank you both for your very quick advice.
I have now amended the code on the page, so that the declarations before the PHP code are as follows:-
Unfortunately, this has not resolved the problem. As far as I can tell, there is no change to the appearance of the page. I am now wondering if this occurs because the code that is added via Sourceror is all within the main body of the page, and not in the <head> section, where most of the stylesheets and script files are defined?
If that is the case, I guess that I may need to examine the possibility of adding those file references to the Joomla theme. Would that make sense?
Thanks again for your help.
Regards,
Nigel
I'm not familiar with Joomia nor Sourcer but, as Allan mentioned, there is no
tabletag and I don't see where you are initializing Datatables. Possibly you have the init code in a.jsfile., If you do which file contains the init code?I also see this:
Which is why you are seeing JSON output on the page.
Kevin
Hello Kevin,
Thanks again for your advice. I must confess that I had omitted to include the init code and the
<
table> tag, etc, despite previously reading the references to them.
I should perhaps explain that this project is a form of "proof of concept" for some other sites with much larger databases than the 145 records in this case. As such, I am looking for a method that will facilitate accessing the records direct from the database; and I am unsure if Ajax is appropriate. I will therefore re-examine Allan's extensive documentation to try to clarify that point.
Regards,
Nigel
See the data docs for the supported data sources. Likely Ajax will be your best options as the request can be sent to a URL that will route to a function to execute the data query. The response can be sent as JSON data. See the ajax docs for more details.
See this Ajax example.
Kevin
Hello,
Just a simple question for clarification:-
On this page:
https://datatables.net/examples/server_side/simple.html
...the Javascript tab shows a line :
ajax: 'scripts/server_processing.php',
I presume this php file should contain the content shown on the adjacent "Server-side script" tab?
That is the approach that I am trying currently.
Thanks in advance.
Regards, Nigel
The server side processing examples use a simple/sample script called ssp.class.php. Its not maintained but you can use it to learn from. The recommended option is to use the Editor server side libraries. You may or may not want to use the client side Editor functionality, which is licensed, but you can use the server side libraries which is open source. See this blog for more details.
Antoher optino is to write your own server side processing library. See the SSP protocol docs for details.
Kevin
Worth noting as well that server side processing is only worth pursuing if you are working with tens if thousands of rows or more. It adds complexity and if you don't need it, just Ajax load the data and allow DataTables to process it on the client side.
Allan
Thanks for the quick and helpful responses again. I will examine those possibilities in more detail.
I would also add that one of the sites that I would potentially switch to Joomla has a table with 180,000 records, with more being added at regular intervals.
Thanks again.
Regards, Nigel
I have downloaded the ssp.class.php file, and commented lines 20-23 out, as recommended in the comments directly above those lines. I have not made any further changes to the ssp.class.php file.
That file is now called in the "require" statement in the server_processing.php file. The server_processing.php file is placed in a folder named "server_side/scripts". I have placed this file link in the "ajax:" line of the script, as shown on the "Javascript" tab on the documentation page ( https://datatables.net/examples/server_side/simple.html ).
The HTML code for the table header and footer elements is included in the php file for the web page. For development purposes I have set this up on a plain (non-Joomla) site at:-
https://www.mhsoftware.co.uk/test4.php
Is my understanding of the instructions and examples correct? The resulting page contains the correct data, but not properly placed within the table.
Thanks again.
Nigel
The problem is the Datatables initialization code is executing before the
tableelement is added to the document. So#exampleis not found and there is no ajax request sent to the server. Relevant code snippet:Typically the
scripttags are placed towards the bottom of the HTML code for proper execution order. Also you might consider placing the Datatables init code in $( document ).ready(). See this tutorial for more info aboutscripttag placement.Datatables won't use the data in line 21.
Kevin