Question

我想将MathJax与Dynatable一起使用，以便显示带有渲染公式的表格。以下是显示问题的最小示例：

<!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>

当我第一次调用页面时，它很好地呈现了公式，但是当我使用dynatable或者转到分页中的下一页时，mathjax没有更新。

到目前为止，我尝试过包括

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

代码中的某个地方，但我无法让它工作。我不确定是否应该使用dynatable的event hooks以及如何以有效的方式绑定它们。

Answer 1

所以我通过查看this问题来解决问题。

这将有效：

<!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>

在dynatable上重新加载mathjax

1 个答案: