reloading mathjax on dynatable

StackOverflow https://stackoverflow.com/questions/23204466

  •  07-07-2023
  •  | 
  •  

Question

I would like to use MathJax together with Dynatable in order to display tables with rendered formulas. Here's a minimal example to show the problem:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>dynatable mathjax test</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">/script>
<script src="js/jquery.dynatable.js"></script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
      MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    jax: ["input/TeX","output/HTML-CSS"],
    tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
    });
</script>
<script>
$.dynatableSetup({
      dataset: {
        perPageDefault: 3,
        perPageOptions: [3,6],
      },
    });
$( document ).ready(
   function() {
       var jsontabledata = [
                {
                "id":  1 ,
                "name": "$1$ test",
                "titel": "some latex/mathjax: $\\sum_a^b$",
                },
                {
                "id":  2 ,
                "name": "$2$ test",
                "titel": "some latex/mathjax: $\\sum_a^b$",
                },
                {
                "id":  3 ,
                "name": "$1$ test",
                "titel": "some latex/mathjax: $\\LaTeX$",
                },
                {
                "id":  4 ,
                "name": "$1$ test",
                "titel": "some latex/mathjax: $\\sum_a^b$ a",
                },
                {
                "id":  5 ,
                "name": "$1$ test",
                "titel": "some latex/mathjax: $\\sum_a^b$ a",
                },
                {
                "id":  6 ,
                "name": "$1$ test",
                "titel": "some latex/mathjax: $\\sum_a^b$ a",
                },
                {
                "id":  7 ,
                "name": "$1$ test",
                "titel": "some latex/mathjax: $\\sum_a^b$ a",
                },
                ];
        var dynatable = $('#my-final-table').dynatable({
            dataset: {
            records: jsontabledata
            }
        }).data('dynatable');
    }
);
</script>
</head>
<body>

<table id="my-final-table">
      <thead>
        <th>Id</th>
        <th>Name</th>
        <th>Titel</th>
        </thead>
      <tbody>
      </tbody>
    </table>

</body>
</html>

It renders the formulas nicely when I call the page for the first time, but mathjax is not updating when I resort the dynatable or go to the next page in the pagination.

So far I tried including

MathJax.Hub.Queue(["Typeset",MathJax.Hub,"my-final-table"]);

somewhere in the code, but I could not get it to work. I am not sure if I should use the event hooks of the dynatable and how to bind them in a way that works.

Was it helpful?

Solution

So I solved the problem by looking at this question.

This will work:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>dynatable mathjax test</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/jquery.dynatable.js"></script>
    <script type="text/javascript"
    src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
          MathJax.Hub.Config({
        extensions: ["tex2jax.js"],
        jax: ["input/TeX","output/HTML-CSS"],
        tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
        });
    </script>
    <script>
    $.dynatableSetup({
          dataset: {
            perPageDefault: 3,
            perPageOptions: [3,6],
          },
        });
    var processingComplete = function(){MathJax.Hub.Queue(["Typeset",MathJax.Hub,"my-final-table"]);};
    $( document ).ready(
       function() {
           var jsontabledata = [
                    {
                    "id":  1 ,
                    "name": "$1$ test",
                    "titel": "some latex/mathjax: $\\sum_a^b$",
                    },
                    {
                    "id":  2 ,
                    "name": "$2$ test",
                    "titel": "some latex/mathjax: $\\sum_a^b$",
                    },
                    {
                    "id":  3 ,
                    "name": "$1$ test",
                    "titel": "some latex/mathjax: $\\LaTeX$",
                    },
                    {
                    "id":  4 ,
                    "name": "$1$ test",
                    "titel": "some latex/mathjax: $\\sum_a^b$ a",
                    },
                    {
                    "id":  5 ,
                    "name": "$1$ test",
                    "titel": "some latex/mathjax: $\\sum_a^b$ a",
                    },
                    {
                    "id":  6 ,
                    "name": "$1$ test",
                    "titel": "some latex/mathjax: $\\sum_a^b$ a",
                    },
                    {
                    "id":  7 ,
                    "name": "$1$ test",
                    "titel": "some latex/mathjax: $\\sum_a^b$ a",
                    },
                    ];
            var dynatable = $('#my-final-table').dynatable({
                dataset: {
                records: jsontabledata
                }
            }).bind('dynatable:afterProcess', processingComplete);
        }
    );
    </script>
  </head>
  <body>

<table id="my-final-table">
          <thead>
            <th>Id</th>
            <th>Name</th>
            <th>Titel</th>
            </thead>
          <tbody>
          </tbody>
        </table>

</body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top