0

レンダリングされた数式を含むテーブルを表示するために、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>

初めてページを呼び出すと数式がうまくレンダリングされますが、ダイナテーブルに頼るか、ページネーションの次のページに移動すると、mathjax が更新されません。

これまでのところ、含めてみました

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

コードのどこかにありましたが、動作させることができませんでした。dynatableのイベント フックを使用する必要があるかどうか、および機能する方法でそれらをバインドする方法がわかりません。

4

1 に答える 1

1

だから私はこの質問を見て問題を解決しました。

これはうまくいきます：

<!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>
于 2014-04-22T08:11:06.300 に答える