4

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.

Gyrocode.com
  • 57,606
  • 14
  • 150
  • 185
Kavin Smk
  • 808
  • 11
  • 37
  • 2
    it is about rerender about mathjax, maybe this [answer](http://stackoverflow.com/questions/5200545/how-to-recall-or-restart-mathjax) will help you – Yangguang Mar 08 '16 at 10:33
  • i solved by putting in datatable `$('#example').DataTable( { "drawCallback": function( settings ) { MathJax.Hub.Queue(["Typeset",MathJax.Hub]); } } );` – Kavin Smk Mar 09 '16 at 12:52
  • Note from the future: cdn.mathjax.org is nearing its end-of-life, check mathjax.org/cdn-shutting-down for migration tips. – Peter Krautzberger Apr 13 '17 at 06:56

1 Answers1

5

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.

Gyrocode.com
  • 57,606
  • 14
  • 150
  • 185
  • i got this error `Uncaught ReferenceError: MathJax is not defined` – Kavin Smk Mar 09 '16 at 12:30
  • i solved by putting in datatable `$('#example').DataTable( { "drawCallback": function( settings ) { MathJax.Hub.Queue(["Typeset",MathJax.Hub]); } } );` – Kavin Smk Mar 09 '16 at 12:53