How to create module for Joomla with table filter?

Question

PHP

I'm trying to make a module for Joomla that displays a table. It is necessary to implement the ability to display the number of records, sort by clicking on the column and search in the table.
I decided to use an example from this site https://www.datatables.net/examples/basic_init/zer...
Everything works fine in normal HTML.
In Joomla, I wrote:

<?php
//запрет прямого доступа
defined( '_JEXEC' ) or die;

//Подключение стилей
$doc =& JFactory::getDocument();
$doc->addStyleSheet('https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css');
//Подключение JS
$doc->addScript('https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js');
$doc->addScript('https://code.jquery.com/jquery-3.5.1.js');
?>

<script>
$(document).ready(function() {
  $('#example').DataTable();
} );
</script>

<table id="example" class="display" style="width:100%">
            <thead>
              <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
              </tr>
              <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
              </tr>
              <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
              </tr>
              <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
              </tr>
              <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
              </tr>
              <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
                <td>$372,000</td>
              </tr>
              <tr>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012/08/06</td>
                <td>$137,500</td>
              </tr>
              <tr>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
                <td>$327,900</td>
              </tr>
              <tr>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2009/09/15</td>
                <td>$205,500</td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
              </tr>
            </tfoot>
          </table>

The table is displayed. Styles and JS files on the page are included. But nothing works. Can anyone suggest what is wrong? Or can you suggest another way to solve this problem?

Answer 1

I solved the problem differently. I added the files I needed to the js and css folder (in the template) and connected them as follows.

// Add Stylesheets
JHtml::_('stylesheet', 'jquery.dataTables.min.css', array('version' => 'auto', 'relative' => true));

// Check for a custom js file
JHtml::_('script', 'jquery-3.5.1.js', array('version' => 'auto', 'relative' => true));
JHtml::_('script', 'jquery.dataTables.min.js', array('version' => 'auto', 'relative' => true));

Answer 2

First of all, you should keep in mind that datatable is a plugin for jQuery. Therefore, his script must be included AFTER jQuery itself.
In addition, you may not need to include jQuery at all if it is already present (without your inclusion).
And you didn't specify the version of Joomla. It is unclear if there is a conflict with Mootools. And in general, it is not clear if there are other JS conflicts, they did not indicate a link to the problem page. It remains to guess)

Answer 3

Maybe you don't need to write your own module? There is a szaki table content plugin that does the same. In modules, you can enable processing by content plugins, and edit the plate manually. Or, if you want to mess around in the code, then run the module through content.prepare.