Mathjax render only on first page of the data table

Question

I am using a datatable to show maths questions. The max Equations are added as latex Method. I use the below Js script to render Mathjax equations,

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}

  });

</script>
<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full"></script>

but in the datatable the first pagination only shows the correct rendered equations,next all pages are showing the latex.

Answer 1

With jQuery DataTables only first page exist in DOM, that's why pages other than first remain "as is".

You need to use drawCallback option to handle table redraw event and re-initialize all custom controls there. For example:

$('#example').DataTable( {
    "drawCallback": function( settings ) {
        // MathJax.Hub.Config({
        //    tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
        // });

        MathJax.Hub.Queue(["Typeset",MathJax.Hub]); 
    }
} );

I'm not confident that MathJax.Hub.Config() could be run multiple times but that should give you a start.

See MathJax - Configuration for more details on how MathJax could be configured.

UPDATE

According to this comment, calling MathJax.Hub.Queue(["Typeset",MathJax.Hub]); inside drawCallback solved the problem.

LINKS

See jQuery DataTables: Custom control does not work on second page and after for more examples and details.