Question

所以我一直在阅读tablesorter的文档，但我现在想要根据数据库中的内容构建一个动态HTML表。我决定使用getJson方法。

我的问题是虽然表是构建的并且我可以看到每行的所有相关记录，但是在我遍历getJson方法返回的所有对象并构建表之后，tablesorter没有在我的表上初始化

这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test Test</title>
        <!-- load tableSorter theme -->
        <link href="./includes/tablesorter-master/css/theme.default.css" rel="stylesheet">
        <!-- load jQuery and tableSorter scripts -->
        <script type="text/javascript" src="./includes/jquery-2.1.0.js"></script>
        <!-- <script src="http://code.jquery.com/jquery-1.11.0.js"></script> -->
        <script type="text/javascript" src="./includes/tablesorter-master/js/jquery.tablesorter.js"></script>
        <!-- load tableSorter widgets -->
        <script type="text/javascript" src="./includes/tablesorter-master/js/jquery.tablesorter.widgets.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                //loader();
                $.getJSON("./get_recs.php",function(data){
                    $("#mytable").append("<thead><tr><th>Test1</th><th>Test2</th><th>Test3</th>" + 
                                        "<th>Test4</th><th>Test5</th><th>" + 
                                        "Test6</th><th>Test7</th><th>Test8</th>" + 
                                        "<th>Test9</th></tr></thead>");
                    $("#mytable").append("<tbody>");

                    for ($z = 0; $z < data.length; $z++)
                    {
                        //console.log(data[$z])
                        $("#mytable").append("<tr><td>" + 
                            data[$z]['test1'] + "</td><td>" + 
                            data[$z]['test2'] + "</td><td>" + 
                            data[$z]['test3'] + "</td><td>" + 
                            data[$z]['test4'] + "</td><td>" + 
                            data[$z]['test5'] + "</td><td>" + 
                            data[$z]['test6'] + "</td><td>"+ 
                            data[$z]['test7'] + "</td><td>" + 
                            data[$z]['test8'] + "</td><td>" + 
                            data[$z]['test9'] + "</td></tr>");
                    }
                    $("#mytable").append("</tbody>");
                });
                initialise();
            });
            function initialise()
            {
                $("#mytable").tablesorter({
                    theme : 'default',
                    widgets : ['zebra','columns'],
                    debug : true
                });
            }
        </script>
</head>
    <body>
        <div id="topdiv">
            <table id="mytable" class="tablesorter">
            </table>
        </div>
    </body>
</html>

有人帮忙吗？

Answer 1

查看build table widget。它实际上不是一个小部件，但它会自动为你构建一个表。

默认情况下，它接受如下所示的JSON：

{
  "headers" : [
    [
      { "text": "First Name", "class": "fname", "width": "20%" },
      "Last Name",
      { "text": "Age", "class": "age", "data-sorter" : false },
      "Total",
      { "text": "Discount", "class" : "sorter-false" },
      { "text": "Date", "class" : "date" }
    ]
  ],
  "footers" : "clone",
  "rows" : [
    [ "Peter", "Parker", 28, "$9.99",  "20%", "Jul 6, 2006 8:14 AM"   ],
    [ "John",  "Hood",   33, "$19.99", "25%", "Dec 10, 2002 5:14 AM"  ],
    [ "Clark", "Kent",   18, "$15.89", "44%", "Jan 12, 2003 11:14 AM" ],

    { "newTbody": true, "class": "tablesorter-infoOnly" },
    { "cells" : [ { "html": "<strong>JSON Info Row</strong>", "colspan": 6 } ] },

    { "newTbody" : true },
    [ "Bruce", "Evans",    22, "$13.19",  "11%", "Jan 18, 2007 9:12 AM"  ],
    [ "Bruce", "Almighty", 45, "$153.19", "44%", "Jan 18, 2001 9:12 AM"  ],

    { "class": "specialRow",
      "cells" : [
        { "text": "Fred", "class": "fname" },
        { "text": "Smith", "class": "lname" },
        { "text": 18, "class": "age", "data-info": "fake ID!, he's only 16" },
        { "text": "$22.44", "class": "total" },
        "8%",
        { "text": "Aug 20, 2012 10:15 AM", "class": "date" }
      ],
      "data-info" : "This row likes turtles"
    }
  ]
}

使用.getJson构建动态表

1 个答案: