CMS Made Simple Forums

Posted: **Sat Jan 18, 2025 10:26 pm**

I have some sample code for inserting a DataTable (https://datatables.net), using AJAX to populate a table, below. Where (and how) can I embed the script so that it properly executes? I've tried enclosing it in the source code for the main content area within {literal} {/literal} but it seems to get stripped out anyway. The script doesn't belong in the <head>, and putting it in "Smarty data or logic that is specific to this page:" doesn't seem to work, either, since that's server-side (right?).

I'm guessing there's some easy way but I haven't stumbled on the right thread or tutorial for how to do it. Pointers are welcome, please!
Kirk

Code: Select all

<!DOCTYPE html>
<__html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DataTable Example</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
  <__script__ src="https://code.jquery.com/jquery-3.6.0.min.js"></__script>
  <__script__ type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></__script>
</head>
</__body>
  <h1>My DataTable</h1>
  <table id="myTable" class="display">
    <thead>
      <tr>
        <!-- Headers will be dynamically filled -->
      </tr>
    </thead>
    <tbody>
      <!-- Data rows will be dynamically filled -->
    </tbody>
  </table>

  <__script__>
    $(document).ready(function() {
      // AJAX request to fetch data
      $.ajax({
        url: 'YOUR_GOOGLE_APPS_SCRIPT_URL',
        dataType: 'json',
        success: function(data) {
          // Create the table headers based on the first row (keys) in the data
          var headers = Object.keys(data[0]);
          headers.forEach(function(header) {
            $('#myTable thead tr').append('<th>' + header + '</th>');
          });

          // Populate table rows
          data.forEach(function(row) {
            var rowData = '<tr>';
            headers.forEach(function(header) {
              rowData += '<td>' + row[header] + '</td>';
            });
            rowData += '</tr>';
            $('#myTable tbody').append(rowData);
          });

          // Initialize DataTables
          $('#myTable').DataTable();
        }
      });
    });
  </__script>
<__body>
</__html>

Posted: **Sun Jan 19, 2025 12:25 am**

The easiest method is to put it in your page template (not page content) just before the closing <__body> tag. Wrapping it in {literal} tags will prevent the use of curly braces in the script from being parsed by Smarty.

There are other methods that are a bit more advanced and/or cleaner, but best to get it working the simplest way first.

Posted: **Tue Jan 21, 2025 8:46 am**

Here is how i do it:

At the top (after {process_pagedata}) in my page template, i insert a custom text block to hold my JS:

Code: Select all

{$custom_js="{content block='custom_js' label='Custom JS' wysiwyg='false' tab='Extra'}" scope=global}

And before closing <__body> i insert:

Code: Select all

{$custom_js}

That way I can, for example, insert data tables or other scripts on a page basis where necessary without having to load the script on every single page.

Posted: **Tue Jan 21, 2025 12:26 pm**

That looks like a good idea. I was also trying with a UDT but couldn't find an example with scripts.

CMS Made Simple Forums

Integrate DataTables into page?

Integrate DataTables into page?

Re: Integrate DataTables into page?

Re: Integrate DataTables into page?

Re: Integrate DataTables into page?