Question

因为我不了解jQuery和JavaScript，所以我遵循使用数组构建Tableorter表的简单方法。但是，这根本不起作用。事实上，即使我使用提供的示例（此处：http://mottie.github.io/tablesorter/docs/example-widget-build-table.html），也没有结果只是一个空白的网页。这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Testing Tablesorter (fork)</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(){
                // Call the PHP script that grabs all data from DB
                $.getJSON('./get_data.php',function(data){
                    //alert(data.length);
                    var dataArr = new Array();
                    for (x = 0; x < data.length; x++)
                    {
                        dataArr[x] = data[x];
                        //console.log(dataArr[$x]);
                    }
                    applyTable(dataArr);              
                });
            });

            function applyTable(arrayIn)
            {
                //alert(arrayIn[0]);
                $('#topdiv').tablesorter({
                    theme : 'default',
                    //widgets : ['zebra','columns'],
                    debug : true,
                    widgetOptions : { 
                        build_source : arrayIn, 
                        build_headers : { 
                            rows : 1, 
                            classes : [], 
                            text : [],
                            widths  : [ '15%', '15%', '30%', '15%', '40%', '30%', '30%', '30%', '30%', '30%' ] 
                        } 
                    }
                });
                $("#topdiv").trigger("updateAll");
            }
        </script>
</head>
    <body>
        <div id="topdiv"></div>
    </body>
</html>

有什么想法吗？莫蒂，你在哪里。

编辑： Chrome报告没有JavsScript错误。虽然控制台（因为我指定“debug：true”）给出：

~~stopping initialization! No table, thead, tbody or tablesorter has already been initialized~~

~~我也知道PHP脚本运行正常。~~

编辑，PHP代码（摘录）：

$headersArr = array('ID', 'Col 2', 'Col 3',
                    'Col 4', 'Col 5', 'Col 6',
                    'Col 7', 'Col 8', 'Col 9', 'Col 10');

$allArr = array();
array_push($allArr, $headersArr);

while($row = mysql_fetch_object($rs))
{
    $newRow = array($row->id, $row->col_B, $row->col_C, 
                    $row->col_D, $row->col_E, 
                    $row->col_F, $row->col_G,
                    $row->col_H, $row->col_I,
                    $row->col_J);
    array_push($allArr, $newRow);
}
echo json_encode($jobsArr);

以下图片是Chrome控制台中的JavaScript输出（我没有更新上面的代码以防止它变大，但我只是重新打包传递给applyTable()的数组并将两个数组输出到控制台）。这些数组中的哪一个应该与Tablesorter一起使用？

Array of arrays, or array of an array of arrays?

Answer 1

从查看代码看，数组看起来只是一个长数组。

dataArr = [ 'r0c0', 'r0c1', 'r0c2', 'r1c0', 'r1c1', 'r1c2', ... ];

它必须是一个行数组数组：

dataArr = [ 
    ['r0c0', 'r0c1', 'r0c2'],
    ['r1c0', 'r1c1', 'r1c2'],
    ...
];

所以制作两个循环（demo）：

$(function () {
    // Declare the array holding the data
    var dataArr = [];
    // Call the PHP script that grabs all data from DB
    $.getJSON('./get_data.php', function (data) {
        var i, j, row,
        // you need to know how many columns
        columns = 3,
        // calculate how many rows
        rows = Math.ceil(data.length / columns);

        for (i = 0; i < rows; i++) {
            // clear row array
            row = [];
            for (j = 0; j < columns; j++) {
                row.push(data[i * columns + j]);
            }
            dataArr.push(row);
        }
        applyTable(dataArr);
    });

});

function applyTable(arrayIn) {
    $('#topdiv').tablesorter({
        theme: 'default',
        //widgets : ['zebra','columns'],
        widgetOptions: {
            build_source: arrayIn,
            build_headers: {
                rows: 1,
                widths: ['33%', '33%', '33%']
            }
        }
    });
}

并且不要触发“updateAll”，因为该表刚刚构建。

你提到的错误仍然出现，它看起来像一个错误，但它只是一个无意的消息，没有别的。

Answer 2

由于缺少HTML标题中的行，表格未构建：

<script type="text/javascript" src="./includes/tablesorter-master/js/widgets/widget-build-table.js"></script>

PHP脚本绝对没问题。唯一需要的JavaScript是：

$(document).ready(function(){
    $.getJSON('./get_data.php',function(data){
                    applyTable(data);            
                });
            });

            function applyTable(arrayIn){
                $('#topdiv').tablesorter({
                    theme: 'default',
                    //widgets : ['zebra','columns'],
                    debug: true,
                    widgetOptions: { 
                        build_source: arrayIn, 
                        build_headers: { 
                            rows: 1
                        } 
                    }
                });

表不建

2 个答案: