Creating a Datatable

Creating a Datatable

by Mehmet Tepeli -
Number of replies: 13

Hi everyone,

I am trying to create a datatable in Moodle. However, I have problem fetching data from the database and putting the data into a datatable. Can someone help me? Here is my index.php
Thank you for any assistance in advance.

<?php


require_once '../../config.php';
global $USER, $DB,$CFG;


$PAGE->set_url('/local/glossary/index.php');
$PAGE->set_context(context_system::instance());
$PAGE->requires->jquery();
require_login();

$strpagetitle=get_string('glossary','local_glossary');
$strpageheading=get_string('glossary','local_glossary');
$PAGE->set_title($strpagetitle);
$PAGE->set_heading($strpageheading);

$result = new stdClass();
$result = $DB->get_records('local_glossary', [], 'id, term, definition');


echo $OUTPUT->header();
echo $OUTPUT->render_from_template('local_glossary/searchbar', ['results' => $result]);
//print_r($result);
echo $OUTPUT->footer();

Average of ratings: -
In reply to Mehmet Tepeli

Re: Creating a Datatable

by lior gil -
Picture of Core developers

First of all, try being more specific. When you have a problem try explaining where the problem is and what errors (if any) you get, otherwise we are left with just guessing.

Now, the get_records() function returns an array of objects, even if it's only a single result. Maybe this is causing you the problem or maybe not, I have no idea.

In reply to lior gil

Re: Creating a Datatable

by Mehmet Tepeli -
Hello,

thank you for your response. The problem is that I can not display data on the data table. print_r($result) function on my code returns array objects, however I want to pass these objects into the data table template. Moodle doesn't show me any error or exception. I also added the result of print_r($result) function.
Attachment glossary.JPG
In reply to Mehmet Tepeli

Re: Creating a Datatable

by lior gil -
Picture of Core developers
It seems that you get the data from the database just fine.
Maybe the template expects a different data structure in order to display it, can't know for sure.
Here's a link to the template documentation, I hope it'll help you pinpoint the reason.
In reply to Mehmet Tepeli

Re: Creating a Datatable

by Andreas Grabs -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers Picture of Translators

Hi Mehmet,

your problem here are the array indexes. The method $DB->get_records() returns an array with the record ids as index:

[
21 => object for record 21,
24 => object for record 24,
...
]

But mustache expects a 0 based array:

[
0 => object for record 21,
1 => object for record 24,
...
]

You must replace the indexes with the default index of a 0 based array:

$result = array_values($result);

Best regards
Andreas

In reply to Andreas Grabs

Re: Creating a Datatable

by Mehmet Tepeli -
Hallo Andreas,

thank you for the hint. However, I am using a data table plugin and I don't have any placeholder tags in my mustache file. Does it cause also a problem? I am new to the Moodle environment and PHP programming, so I may ask some dumb questions :/
This is my mustache file.

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<table id="userTable">
    <thead>
    <th>ID</th>
    <th>Term</th>
    <th>Definition</th>
    </thead>
</table>
<script>
    $(document).ready(function() {
        $('#userTable').DataTable();
    });
</script>
</body>
</html>

Best wishes,
Mehmet
In reply to Mehmet Tepeli

Re: Creating a Datatable

by Andreas Grabs -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers Picture of Translators

Hi,

I am not so familar with datatables but I am sure you have to tell the datatable where the data come from. In your mustache template is no reference to the 'results' element.

You have to build a json structure of the results either in the template or before you call it.

Best regards Andreas


In reply to Andreas Grabs

Re: Creating a Datatable

by Richard Jones -
Picture of Plugin developers Picture of Testers
Here is a simple example of an activity getting data from the database and displaying it within a template:

https://github.com/richardjonesnz/moodle-block_students_list

Ignore all the fancy html/css to reveal extra student info. The guts are here:

<ul>
{{#studentlist}}
<li> {{{pic}}} {{name}}
</li> {{/studentlist}}
</ul>
Works equally well with table tags.  Given the student data object retrieved from the database by class fetch_students, it will print out the student pictures and names.  The pic is in three curly braces because it is actually a url with special characters. 

HTH
Richard
In reply to Richard Jones

Re: Creating a Datatable

by Mehmet Tepeli -
Hello Richard,

Thank you for your response, but the github link is not working. Do you have another link?

Best regards
Mehmet
In reply to Mehmet Tepeli

Re: Creating a Datatable

by Richard Jones -
Picture of Plugin developers Picture of Testers
Sorry, it's working now.
In reply to Richard Jones

Re: Creating a Datatable

by Mehmet Tepeli -
Hello Richard,

Thank you for the link. However, I am still having trouble putting the data into my data table. Could it be possible to review my code and give me feedback on where I am making mistakes? It is very important for me, because I have to create this page for my master's thesis.
This is my index.php
$result = new stdClass();
$result = $DB->get_records('local_glossary', [], 'id, term, definition'); //returns array of objects
$result = array_values($result); //get all values from array

echo $OUTPUT->header();
echo $OUTPUT->render_from_template('local_glossary/searchbar', ['results' => $result]);
//print_r($result); //print results
echo $OUTPUT->footer();

searchbar.mustache
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<table id="userTable">
    {{#results}}
    <thead>
    <th>{{ID}}</th>
    <th>{{Term}}</th>
    <th>{{Definition}}</th>
    </thead>
    {{/results}}
</table>

<script>
    $(document).ready(function() {
        $('#userTable').DataTable();
    });
</script>
</body>
</html>
In reply to Mehmet Tepeli

Re: Creating a Datatable

by Richard Jones -
Picture of Plugin developers Picture of Testers

Hi Mehmet

Most developers at this moment in time are concentrating on getting their stuff ready for Moodle 4 - coming next month - it's a major change.  So it's already a bad time to ask.  Also "trouble" is not descriptive of any errors you encounter.  You were already advised that asking questions in the right way with all of the relevant error information is the most effective way to get help, yet you ignore that advice!

Nevertheless, if you really want help put your code at GitHub and maybe someone will look at it.  I'm not going to promise any time frame.

echo $OUTPUT->render_from_template('local_glossary/searchbar', ['results' => $result]);

Should probably be:

echo $OUTPUT->render_from_template('local_glossary/searchbar', $result); So change {{#results}} to {{#result}} as well (same for {{/results}}.

I don't know why you want to call those scripts in your template, everything you need should already be in the Moodle footer AFAIK.

I don't know why you want jQuery script in your Mustache template, don't do it. If you must have JavaScript look at the example I gave and do it in an AMD module.

Best of luck, persistence is the key.

In reply to Richard Jones

Re: Creating a Datatable

by Mehmet Tepeli -
Hello Richard,

Thank you for your advice and help.

Sincerely yours
Mehmet Tepeli